Set up Component Checkouts
Embed secure, customizable payment components directly into your page — no redirects required.
Checkout Components is not enabled by default. To request access, contact your Customer Success Manager or FastSpring Support.
Use Component Checkouts to embed FastSpring's payment UI directly into your own page. Instead of redirecting buyers to a hosted checkout, you mount individual components — a card form, a pay button, and a disclosures block — wherever you want them in your layout.
You control the styling. FastSpring handles card tokenization, validation, compliance, and payment processing.
Create a Component Checkout
In the FastSpring app, go to Checkouts → Component Checkouts and click + Create.
Enter a Checkout ID — a short, lowercase identifier for this checkout (e.g., my-checkout).
The Checkout ID becomes part of your checkout URL and cannot be changed after creation. Choose something that reflects the context, such as a product line or integration name.
Your checkout URL will follow this pattern:
https://{your-store}.onfastspring.com/components-{checkout-id}You will pass this URL to the SDK as checkoutUrl during initialization.
Click Create. Your checkout appears on the Component Checkouts list.
From the list, you can also override the store's default currencies for this checkout — click ... on the checkout card and select Currencies. Enable Override Store Currencies, select the currencies you want to support, and click Save. If left unchanged, the checkout uses your store's default currency settings.
Configure your checkout
Click into your checkout to open the detail page, which has two tabs: Implementation and Settings.
Add allowed domains
List every domain where you plan to embed the checkout components. In the Implementation tab, find Step 1. Add your domains to the allow list and enter each origin one per line, including the scheme:
https://yoursite.com
https://app.yoursite.comClick Save.
For local development, add your local origin here too (e.g.,
http://localhost:3000). Without it, the browser's CSP policy will block the components from rendering and you will see aframe-ancestorserror in the console.
Configure payment method saving
In the Settings tab, under Save Payment Method at Checkout, choose how payment methods are saved for your customers.
View option details
| Option | Behavior |
|---|---|
| Always save | For subscriptions: checkbox hidden, payment method always saved. For one-time products: checkbox shown, pre-checked. Recommended default for stores that sell subscriptions. |
| Let customers choose to save | Checkbox always shown, unchecked by default. Customers opt in explicitly. |
| Save unless customer declines | Checkbox always shown, pre-checked. Customers must uncheck to opt out. |
Click Save.
Integrate the SDK
Your checkout is configured. The next step is adding the SDK to your codebase, initializing it, and mounting the components on your page.
For a complete walkthrough — including code snippets, component options, styling, and a full working example — see the Vanilla JS Integration Guide on GitHub.
For the full list of style properties available on each component, see the Style Properties Reference.
Updated 3 months ago