Skip to main content
The FunnelFox Payments Web SDK connects your paywall page to FunnelFox Payments Subscription Billing. It renders the checkout through Primer’s Headless Checkout or through Stripe directly, and creates the subscription when the payment succeeds.

​
Key features

  • Type-safe: Complete TypeScript definitions ship with the package.
  • Dynamic pricing: Switch the price point without reloading the page.
  • Event-driven: Handle success, errors, and state changes with events or callbacks.
  • Taxes: Get the total with tax as the buyer’s location changes.
  • Decline codes: Tell an insufficient-funds decline apart from other failures.
  • On-demand loading: The SDK loads Primer and Stripe only when a checkout needs them.
  • Browser support: Chrome 60+, Firefox 55+, Safari 12+, Edge 79+. Internet Explorer is not supported.
Check out complete integration examples to see the SDK in action.

​
Choose your integration

The SDK offers three ways to build a checkout:

Drop-in checkout

createCheckout() renders every available payment method in one container. Runs on Primer.

Individual methods

Billing.initMethod() renders the card form and each payment button into your own layout. Runs on Primer.

Stripe

Billing.stripe renders a Stripe card form and opens Apple Pay or Google Pay. Runs on Stripe directly.
The steps below use the drop-in checkout.

​
Get started

​
1. Install

Install the SDK from a CDN or from npm.
Include the SDK script. It adds a global Billing object to the page:
You don’t need to add Primer’s scripts to the page. The SDK loads Primer v2.57.3 from sdk.primer.io when a checkout needs it.
To use a different Primer version, load Primer’s script and styles on the page before you create a checkout. The SDK uses the copy that is already there.

​
2. Create your first checkout

Create a checkout for a price point and a customer, and render it on your page:
Required parameters:
​
string
required
Your organization’s ID.
​
string
required
The price point identifier.
​
object
required
Customer information (requires externalId and email).
​
string
required
A CSS selector for the DOM element where the checkout form will be mounted.
After you call createCheckout(), the checkout form appears in the container, ready for the buyer to pay.
If FunnelFox Payments Taxes is on for your organization, the checkout doesn’t show tax. Update your prices from onTaxChange. Learn more about taxes in the Web SDK.
Your checkout is live, and buyers can now pay on your page.
Learn about all available createCheckout parameters, including optional callbacks and customization options.