The Checkout element is the most sophisticated component in FunnelFox, designed to minimize payment friction and maximize conversion rates. It handles the entire payment flow from card collection to subscription creation.
Checkout element configuration

​
When to Use

Use the Checkout element for:
  • First-time purchases - Initial subscription or one-time payment
  • Trial starts - Free or paid trial activation
  • Immediate payment collection - When you need payment on the current page
For upsells and additional purchases after initial payment, use the Purchase action on buttons instead.

​
Configuration

​
Payment Provider Setup

The Checkout element requires at least one configured payment provider in Project Settings:
1

Configure Provider

Go to Project Settings → Payment Providers and connect:
  • Stripe
  • PayPal
  • Paddle
  • Braintree
  • And others…
2

Add Checkout Element

Drag the Checkout element onto your funnel page
3

Select Payment Methods

Toggle which payment methods to show (based on your provider)

​
Payment Methods

Different providers support different payment methods:
ProviderCardPayPalApple PayGoogle Pay
Stripe✓✓✓✓
PayPal✓✓--
Paddle✓✓✓✓
Braintree✓✓✓✓
Multiple payment methods display as an accordion - users click to expand their preferred method, keeping the interface clean.

​
Product Selection

​
Single Product

For simple funnels with one product:
  1. Leave “Product from replies” unchecked
  2. Select your product from the dropdown
  3. The checkout will process this product for all users

​
Dynamic Product Selection

For funnels with multiple products (e.g., after a quiz):
  1. Check “Product from replies”
  2. Use Options or Plan Picker earlier in the funnel
  3. Checkout automatically uses the selected product
Dynamic products require a stateful element (Options, Plan Picker, etc.) earlier in the funnel to capture the user’s selection.

​
Form Fields

​
Required Fields

These fields are always collected:
  • Email - For receipts and account creation
  • Card details - Handled securely by the payment provider

​
Optional Fields

Toggle additional fields based on your needs:
FieldPurposeIncreases Conversion
NamePersonalization, receiptsSlightly decreases
PhoneSupport, SMS marketingDecreases
AddressBilling verification, taxesSignificantly decreases
CompanyB2B sales, invoicingDepends on audience
VATEU tax complianceRequired for EU B2B
Start with minimal fields (just email). Add more only if absolutely necessary - each field reduces conversion by 3-7%.

​
Advanced Features

​
Coupons

Enable discount codes:
  1. Toggle “Allow coupons”
  2. Configure codes in your payment provider
  3. Users can enter codes before payment
Showing a coupon field can reduce conversion as users search for codes. Consider using automatic discounts via URL parameters instead.

​
Email Validation

When “Forbid temporary emails” is enabled:
  • Blocks disposable email services
  • Prevents common typos
  • Ensures deliverability for receipts

​
Tax Handling

The checkout automatically handles:
  • VAT/GST calculation based on location
  • US sales tax via Stripe Tax or TaxJar
  • Tax exemption for valid VAT numbers
Configure tax settings in your payment provider dashboard.

​
Mobile Optimization

The Checkout element is optimized for mobile:
  • Large touch targets - All inputs are finger-friendly
  • Native keyboards - Numeric for cards, email for addresses
  • Autofill support - Works with password managers and browsers
  • Apple Pay/Google Pay - One-tap checkout on supported devices
On mobile, payment methods stack vertically with clear separation. The active method expands to full width for easy input.

​
Triggers & Analytics

​
Available Triggers

Configure actions for payment events:
TriggerWhen It FiresCommon Use
Payment SuccessPayment completedNavigate to success page
Payment FailedCard declined/errorShow error message
Payment CancelledUser closes paymentTrack abandonment

​
Automatic Analytics Events

The Checkout element automatically tracks:
  • checkout_init - Checkout becomes visible
  • checkout_impression - User views checkout
  • purchase_attempted - Payment submission
  • purchase_completed_success - Successful payment
  • purchase_completed_failure - Failed payment
These events flow to all configured analytics integrations.

​
Subscription Management

For recurring products, the Checkout element:
  1. Creates customer profile in payment provider
  2. Starts subscription with configured billing period
  3. Syncs with Adapty, RevenueCat, or Qonversion
  4. Handles trial periods automatically

​
Testing

​
Preview Mode

In preview mode, checkouts automatically use test mode:
  • Use test cards (4242 4242 4242 4242)
  • No real charges occur
  • Subscriptions are created in sandbox
See Testing Payments for test card numbers.

​
Sandbox Testing

For production testing:
  1. Add ?sandbox=true to your funnel URL
  2. Checkout switches to test mode
  3. Safe for real user testing

​
Conversion Best Practices

​
Reduce Friction

  • Minimize fields - Only ask for essentials
  • Show security badges - Build trust
  • Clear pricing - No surprises at checkout
  • Progress indicators - Show users they’re almost done

​
Build Trust

  • Money-back guarantee - Display prominently
  • Security messaging - “Secure checkout”, “SSL encrypted”
  • Social proof - “Join 10,000+ customers”
  • Support options - Live chat or phone number

​
Optimize for Mobile

  • Single column layout - No side-by-side fields
  • Large buttons - 44px minimum height
  • Autofocus first field - Start typing immediately
  • Show payment methods - Icons build confidence

​
Common Issues

​
Multi-Step Checkouts

For complex purchases, split the checkout process:
  1. Page 1: Collect email with Text Input
  2. Page 2: Show product selection with Plan Picker
  3. Page 3: Process payment with Checkout element
This approach:
  • Increases perceived progress
  • Captures emails for abandonment recovery
  • Allows personalization before payment

​
Next Steps