71 lines
2.1 KiB
Markdown
71 lines
2.1 KiB
Markdown
# Stripe Configuration Setup
|
|
|
|
## 🎯 Quick Setup Guide
|
|
|
|
### Step 1: Get Your Stripe API Keys
|
|
|
|
1. **Create Stripe Account**: Go to [https://stripe.com](https://stripe.com) and sign up
|
|
2. **Access Dashboard**: Log into [https://dashboard.stripe.com](https://dashboard.stripe.com)
|
|
3. **Get API Keys**:
|
|
- Click "Developers" → "API keys"
|
|
- Copy your **Publishable key** (starts with `pk_test_`)
|
|
- Copy your **Secret key** (starts with `sk_test_`)
|
|
|
|
### Step 2: Update Frontend Configuration
|
|
|
|
In `index.html`, replace this line:
|
|
```javascript
|
|
const STRIPE_PUBLISHABLE_KEY = 'pk_test_51MCkZTC7LG8OeRdIcqmmoDkRwDObXSwYdChprMHJYoD2VRO8OCDBV5KtegLI0tLFXJo9yyvEXi7jzk1NAB5owj8i00DkYSaV9y';
|
|
```
|
|
|
|
With your actual publishable key:
|
|
```javascript
|
|
const STRIPE_PUBLISHABLE_KEY = 'pk_test_51ABC123...'; // Your real key here
|
|
```
|
|
|
|
### Step 3: Test the Integration
|
|
|
|
Run in browser console:
|
|
```javascript
|
|
window.testStripeIntegration()
|
|
```
|
|
|
|
## 🔧 Current Status
|
|
|
|
✅ **Manual credit card form removed** from step_four.rs
|
|
✅ **Stripe Elements integration complete**
|
|
✅ **JavaScript functions working**
|
|
✅ **Demo mode shows integration success**
|
|
|
|
## 🎉 What You'll See
|
|
|
|
**With Demo Mode (current):**
|
|
- Shows integration completion message
|
|
- Explains next steps for real Stripe setup
|
|
- Confirms manual form has been replaced
|
|
|
|
**With Real Stripe Keys:**
|
|
- Real Stripe Elements widget appears
|
|
- Professional payment form with validation
|
|
- Secure payment processing through Stripe
|
|
|
|
## 🚀 Next Steps for Production
|
|
|
|
1. **Backend Setup**: Create server endpoint for payment intents
|
|
2. **Environment Variables**: Store keys securely (not in code)
|
|
3. **Webhook Handling**: Set up Stripe webhooks for payment events
|
|
4. **Error Handling**: Add comprehensive error handling
|
|
5. **Testing**: Use Stripe test cards for testing
|
|
|
|
## 📝 Test Cards (when using real keys)
|
|
|
|
- **Success**: 4242 4242 4242 4242
|
|
- **Declined**: 4000 0000 0000 0002
|
|
- **3D Secure**: 4000 0025 0000 3155
|
|
|
|
## 🔒 Security Notes
|
|
|
|
- Never commit secret keys to version control
|
|
- Use environment variables for production
|
|
- Publishable keys are safe for frontend use
|
|
- Secret keys should only be on your server |