Embed a fully styleable, PCI-compliant checkout directly into your site or app.
Checkout Components is not enabled by default. To request access, contact your Customer Success Manager or FastSpring Support.
FastSpring Checkout Components is a JavaScript library for embedding a fully styleable, PCI-compliant checkout directly into your site or app. You add a few elements to your page (a card form, a pay button, and a disclosures block, plus optional email, coupon, and Apple Pay components), and FastSpring handles payment capture, tax, fraud screening, and order completion.
Before you start, you need two things: a component checkout created in the FastSpring app (see Set up Component Checkouts), and a server endpoint that creates sessions via the FastSpring Sessions API. The endpoint can be your own backend, a serverless function, or a teammate's responsibility. You will need a session ID before the checkout can activate.
If you are embedding checkout UI into a site or app, Checkout Components is the right tool. If you need to drive FastSpring from a backend (creating orders, syncing accounts, pulling reports), use the FastSpring REST API. A typical setup uses both: the REST API on your server to create the session, and Checkout Components on the frontend to render the checkout.
The components
Collects the buyer's email address, with editable, read-only, or hidden modes. Optional.
Renders the Apple Pay button in supported browsers when Apple Pay is enabled for your store. Optional.
Renders card number, expiry, and CVV inputs inside a secure iframe. Required.
Lets the buyer apply or remove a coupon code, inline or behind a "Have a coupon code?" link. Totals refresh automatically. Optional.
Submits the payment and shows a spinner while processing. Required.
Displays the FastSpring reseller disclosure plus Privacy Policy and Terms of Sale links. Required.
More components are planned. New additions will appear here as they are released.
How it works
Include the SDK
Install via npm or add a CDN script tag to your HTML.
npm install @fastspring/checkout-sdk<script src="https://cdn.onfastspring.com/checkout-sdk/latest/fastspring-sdk.js"></script>Initialize the SDK
Call FastSpring.init({ checkoutUrl, ... }). This returns an sdk instance used in all subsequent steps. Find your checkoutUrl in the FastSpring app under Checkouts → Component Checkouts → [your checkout] → Implementation, and add your site's origin (including http://localhost origins for local development) to the checkout's allow list there. Otherwise, components will not render.
Create and mount components
Create each component with sdk.components.create() and mount it to a <div> on your page. Card, Pay Button, and Disclosures are required; Email, Coupon, and Apple Pay are optional.
Create a session and start the checkout
Create a session server-side via the FastSpring Sessions API, then call sdk.checkout(sessionId) from the frontend to load it and activate the checkout.
Handle the result
FastSpring processes the payment and fires your onOrderCompleted callback on success, or onPaymentFailed if the attempt is rejected. The same callbacks fire for card and Apple Pay payments. Redirect or update your UI accordingly.
Each component renders inside its own iframe served from FastSpring's domain. Card data never touches your origin, which keeps you out of PCI scope.
Get started
Step-by-step walkthrough that gets a working checkout on a plain HTML page, covering each component, a complete example, and troubleshooting tips.
Create and configure your checkout in the FastSpring app — allowed domains, currencies, and payment settings.
Full reference for the email field, including visibility modes, label modes, and style categories.
Full reference for eligibility, button variants, the checkout overlay, and styling.
Full reference for the payment form, including all states and style categories.
Full reference for presentation modes, the applied-code chip, and style categories.
Full reference for the button, spinner, IOF disclaimer, and GDPR notice.
Full reference for the reseller disclosure component.