Testing

Before launching your payment form to customers, test the entire payment flow to ensure everything works correctly. Stripe provides test mode for safe, risk-free testing.

Enable Test Mode in Stripe

Axle uses your Stripe account's test and live keys. To test payments:

1. Log in to your Stripe dashboard
2. Ensure you're in Test mode (toggle in top-left corner)
3. You'll see test keys prefixed with pk_test_
4. Add your test key to your site via the head snippet (see Add Head Snippet)

No test transactions will result in real charges.

Test Card Numbers

Stripe provides special test card numbers that trigger different scenarios. Use these to test various payment flows:

Successful Payment

This card simulates a successful payment. Use it to test your happy path flow.

Insufficient Funds

Simulates a declined card due to insufficient funds.

Expired Card

Simulates an expired payment method.

3D Secure Required

Triggers additional authentication (3D Secure). Complete the prompt to test advanced flows.

International Cards

Stripe offers test cards for various countries. See Stripe's test card documentation for a complete list.

Testing Checklist

Follow this checklist to validate your payment flow:

Form Mode Testing

• Form Displays — Verify the form overlay appears when clicking the button
• Form Fields Render — All custom fields display correctly with correct labels
• Placeholder Text — Placeholders are visible and helpful
• Quantity Selector — If enabled, quantity picker works and price updates
• Required Fields — Fields marked required show asterisks
• Field Validation — Email fields validate email format, required fields block submission if empty
• Submit Button — Button text is correct, button is clickable
• Form Submission — After filling form, Stripe checkout opens with correct amount
• Data Passes To Stripe — Your Amount and Currency display correctly in Stripe checkout

Direct Checkout Testing

• Button Works — Clicking button opens Stripe checkout immediately
• Correct Amount — Stripe shows the correct Amount from your component
• Correct Currency — Currency symbol/code matches your setting
• Product Details — Product Title and Description display in Stripe checkout

Payment Processing

• Test Card (Success) — Use 4242 4242 4242 4242 to complete a successful payment
• Payment Confirms — Stripe shows success page after payment
• Transaction Appears in Dashboard — Check Axle dashboard for the transaction
• Stripe Records It — Check Stripe dashboard for the test charge

Styling Validation

• Button Colors — Background, text, and hover colors are correct
• Button Fonts — Font family, size, and weight match your design
• Form Container — Form overlay background, padding, border radius look right
• Input Styling — Input fields have correct background, text color, border
• Label Styling — Label text color and font are correct
• Focus States — Clicking into input changes appearance (focus state visible)
• Error States — Required field errors show red/error styling
• Mobile Responsive — Test on mobile devices or browser mobile view

Edge Cases

• Declined Card — Use 4000 0000 0000 0002 to test error handling
• Empty Form Submission — Try submitting form without filling required fields
• Invalid Email — Try submitting with invalid email format (if email field present)
• Large Quantities — Test with quantity selector at high values
• Special Characters — Test form fields with special characters/emojis
• Very Long Text — Test textarea with long text to ensure it displays properly

Browser & Device Testing

• Desktop Chrome — Latest Chrome version
• Desktop Firefox — Latest Firefox version
• Desktop Safari — Latest Safari version (if applicable)
• Mobile iOS — iPhone/iPad browser
• Mobile Android — Android browser
• Tablet — iPad or Android tablet
• Landscape Mode — Test form in landscape orientation on mobile

Email Testing (If Configured)

• Confirmation Email Sent — Check your inbox for payment confirmation
• Email Title — Uses Submission Mail Title (or Product Title if not set)
• Form Data in Email — Custom field data appears in email (if applicable)
• Amount in Email — Final charged amount displays correctly
• Email Formatting — Email is readable and properly formatted

Switching to Live Mode

When testing is complete and you're ready to accept real payments:

1. In Stripe dashboard, switch to Live mode (toggle in top-left)
2. Copy your live key (starts with pk_live_)
3. Update your head snippet with the live key (see Add Head Snippet)
4. Verify the key changed (live keys begin with pk_live_)
5. Test a small real transaction to ensure live mode works
6. Monitor your Stripe dashboard for charges

Adding Production Domains

In Stripe (and possibly in Axle settings), you may need to whitelist your production domain(s) for security:

1. Go to Stripe Dashboard → Settings → Authorized domains (or similar)
2. Add your production domain(s)
3. Verify the domain is confirmed
4. Test that payments work on your live domain

Common Testing Issues

"Invalid API Key" Error

• Verify the key in your head snippet matches your environment (test vs. live)
• Test mode uses pk_test_, live mode uses pk_live_
• Check for typos in the key

Form Overlay Won't Open

• Ensure Axle Form is set to Yes in component properties
• Check browser console (F12) for JavaScript errors
• Verify the head snippet is in your page's <head>

Stripe Checkout Won't Open

• Check that your API key is correct
• Verify Amount is a valid decimal (e.g., "10.00", not "10")
• Check browser console for errors
• Ensure Pop-ups aren't blocked in your browser

Wrong Amount Charging

• Verify the Amount property (top-level) is correct
• If using Quantity Selector, check that calculation is correct (Amount × Quantity)
• Check Stripe dashboard to see what amount was actually charged

Email Not Received

• If email notifications are configured, verify the email address is correct
• Check spam/junk folders
• Verify that email notifications are enabled in Axle settings (if applicable)

Mobile Form Layout Broken

• Two-column fields should stack on mobile—verify they do
• Check that button width and padding work on small screens
• Test in actual mobile browsers, not just browser dev tools

Test Transaction Limits

• Test Mode — Unlimited test transactions. No real charges.
• Live Mode — Real charges. Monitor for unexpected issues.
• Stripe Fee — Live mode incurs standard Stripe processing fees (typically 2.9% + $0.30 per transaction)

Cleanup After Testing

• Remove or disable test transactions from your Stripe dashboard (if desired)
• Archive test events if your Stripe plan allows
• Don't leave your site in test mode once you go live

Best Practices

1. Test the Full Flow — Don't just test the button. Complete entire payment and verify it appears in both Axle and Stripe dashboards.

2. Test on Target Devices — Test on the devices your actual customers will use (mobile especially).

3. Test Edge Cases — Try things that might break (very long text, special characters, declined cards).

4. Test Multiple Times — Each test run should work identically. If results are inconsistent, there's a problem.

5. Document Results — Keep notes on what you tested and results. This helps when troubleshooting issues later.

6. Review Stripe Settings — Make sure your Stripe account is fully configured (payout details, tax settings, etc.).

7. Have a Backup — Before going fully live, have a testing period where you monitor closely for issues.

Next Steps

• Overview — Component overview
• Form Mode — How form mode works
• Direct Checkout — Direct payment flow
• Property Reference — All properties available