Recipe: Accepting Payments with Stripe

This recipe walks you through the complete Stripe integration from initial account setup through test mode, live mode, webhook configuration, and common troubleshooting.

Step 1: Create Your Stripe Account

1. Go to stripe.com and click Start now
2. Enter your email, full name, and create a password
3. Verify your email address
4. Complete the onboarding to activate your account (business details, bank account for payouts, etc.)

If you want to test first before completing onboarding, Stripe lets you use Test mode immediately.

Step 2: Get Your Test Mode API Keys

1. In the Stripe Dashboard, make sure the Test mode toggle is on (top right)
2. Go to Developers > API Keys
3. You will see two keys:

– Secret key: starts with sk_test_ (click to reveal)

1. Copy both keys

Step 3: Connect Stripe to Form Forge

1. In WordPress, go to Form Forge > Settings > Stripe
2. Paste the Publishable Key and Secret Key
3. Make sure the mode is set to Test
4. Save settings

Step 4: Set Up the Stripe Webhook

Webhooks let Stripe notify Form Forge about payment events (successful charges, refunds, failures).

1. In the Stripe Dashboard, go to Developers > Webhooks
2. Click Add endpoint
3. Enter the webhook URL shown in your Form Forge Stripe settings page (it looks like https://yoursite.com/wp-json/formforge/v1/stripe-webhook)
4. Under Events to send, select payment_intent.succeeded, payment_intent.payment_failed, and charge.refunded
5. Click Add endpoint
6. On the next screen, click to reveal the Signing Secret (starts with whsec_)
7. Copy this Signing Secret
8. Back in Form Forge, paste it into the Webhook Signing Secret field
9. Save settings

Step 5: Create a Payment Form

1. Go to Form Forge > New Form
2. Add your regular fields (Name, Email, etc.)
3. If you need dynamic pricing, add a Calculation field with a formula (e.g., {quantity} * 25)
4. Drag the Payment (Stripe) field into the form
5. Configure the payment:

– Currency: Select your currency (USD, EUR, GBP, etc.)

1. Save the form

Step 6: Test in Test Mode

1. Embed the form on a test page
2. Fill out the form and use Stripe’s test card: 4242 4242 4242 4242
3. Enter any future expiration date (e.g., 12/30) and any 3-digit CVC (e.g., 123)
4. Click Submit
5. Verify:

– The payment appears in your Stripe Test Dashboard under Payments

Step 7: Switch to Live Mode

Once you are confident everything works:

1. In Stripe Dashboard, turn off the Test mode toggle
2. Go to Developers > API Keys and copy the Live keys (pk_live_ and sk_live_)
3. In Form Forge Settings, replace the test keys with live keys
4. Change the mode to Live
5. Create a new webhook endpoint for live mode (repeat Step 4 with live keys)
6. Update the Webhook Signing Secret
7. Save settings

Troubleshooting Common Payment Issues

Payment submissions hide internal metadata keys such as _payment and __payment from emails, Slack, Discord, Telegram, the submission modal, CSV, and PDF. User-facing surfaces show readable payment rows instead: Payment status, Payment amount, and Payment date. The normal Payment (Stripe) field can still show the PaymentIntent ID when it is useful for reconciliation.

—