Add checkout to your site

Once you have created and styled your popup checkout, the next step is to add it to your website using the Store Builder Library (SBL). Follow these steps to authorize your domains, link products, and place your popup checkout on a live or test page.

Tip: Start on a non-public test page to validate your setup. Once you are satisfied, repeat the steps on a customer-facing page.

In the FastSpring app, go to Checkouts > Popup Checkouts, then select the checkout you want to work with. Use No whitelisted websites, Products, Place on your Website, or Preview to complete the steps described below.

The sections below walk through the full popup checkout setup. Select a section or use the TOC on the right to jump ahead.

Whitelist your domains

Authorize sites that can load your checkout

Add products

Link your products to the checkout

Add the script

Insert the Store Builder Library snippet

Add a checkout button

Create the action that opens your popup checkout

Preview and test

Validate your checkout before going live

Whitelist your domains

To process live transactions, your checkout must be hosted on an approved domain or subdomain. Whitelisting ensures that FastSpring processes orders only from trusted URLs.

Step	Description
1	In the FastSpring app, go to Checkouts > Popup Checkouts.
2	Click the No whitelisted websites badge on your checkout. If domains are already listed, this badge appears green with the number of approved sites.
3	Enter each domain or subdomain where the checkout will appear, including both `http://` and `https://` versions if applicable. Add each entry on a new line. Example entries: https://mydomain.com https://www.mydomain.com http://mydomain.com http://www.mydomain.com
4	Click Save. Allow up to 20 minutes for domain updates to apply. If the checkout does not load afterward, verify that all domain variants are listed exactly, including protocol and subdomain.

Tips:

You can whitelist the same domain across multiple checkouts.

To make future changes, click the green Whitelisted websites badge.

Add products

Each popup checkout must include at least one product. Adding products links your checkout to specific catalog items, enabling API calls, HTML triggers, and JavaScript actions.

Use the Homepage Products dialog to add products by name or ID and (optionally) define headings for main and secondary product lists.

Step	Description
1	In the FastSpring app, go to Checkouts > Popup Checkouts.
2	Select your checkout, then click Products to open the Homepage Products dialog.
3	In Main Products, start typing a product name or ID in the field labeled `Start typing product name or id`, then choose the matching result to add it. Repeat to add multiple products. Added items display with their ID and name, and include a Remove link.
4	(Optional) Define a Main Heading for the main product list. Choose a language from the dropdown, then enter the heading text. The heading is optional and language-scoped.
5	(Optional) Add Secondary Products the same way (type product name or ID and select), and set a Secondary Heading with a language if you want a second product group.
6	Click Save to apply your changes.

Notes:

At least one product is required for the popup checkout to load.

Use Remove next to a product to delete it from the list.

Add a checkout button

Add a button or link that opens your popup checkout. You can use HTML only actions or JavaScript.

HTML only

Use SBL actions to open the checkout without custom scripting.

<button data-fsc-action="Checkout">
  Buy Now
</button>

JavaScript

Call the builder directly from your own UI logic.

<button onclick="fastspring.builder.checkout();">
  Buy Now
</button>

Add these buttons anywhere on your page where customers should open the checkout.

Preview and test

Before going live, preview and test your checkout to confirm product linking, appearance, and payment flow.

Step 1: Preview inside the FastSpring app

Use the built-in Preview feature to verify the layout, styling, and product details of your checkout.

In the FastSpring app, go to Checkouts > Popup Checkouts.
Select your checkout and click Preview to open a test version in a new tab.
Verify that your layout and product details display correctly.

Step 2: Test orders on your website

Run a complete checkout test on your own whitelisted site to ensure the integration works end-to-end.

Add .test. between your store name and domain in the script’s data-storefront value to use the test environment.
For example:
```
yourexamplestore.test.onfastspring.com/popup
```
Use the provided test payment details to simulate transactions.
Confirm the checkout loads and processes orders successfully on your site.
When testing is complete, remove .test. to switch to live mode.

Example test environment script:

<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.6/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="yourexamplestore.test.onfastspring.com/popup">
</script>

After confirming functionality, update the script to your live environment:

data-storefront="yourexamplestore.onfastspring.com/popup"

Go live: When testing is complete, remove .test. from your script and place your checkout on a customer-facing page.