Embed your checkout

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

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

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

The sections below walk through the complete embedding process. 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

Embed the code

Insert the checkout script and container

Preview and test

Test and validate your setup

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 > Embedded 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 embedded checkout must include at least one product. Adding products links your checkout to specific catalog items, enabling API calls and product references in your HTML or JavaScript implementation.

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 > Embedded 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 language if you want a second product group.
6	Click Save to apply your changes.

Notes:

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

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

Embed the code

After your domains and products are configured, add the checkout script and container element to your website using the Store Builder Library (SBL).

In the FastSpring app, go to Checkouts > Embedded Checkouts, select your checkout, then click Place on your Website to access the script snippet.
Copy the snippet and paste it into the <head> section of your webpage.
Add a container <div> where you want the checkout to appear:
```
<div id="fsc-embedded-checkout-container"></div>
```
If your page uses a Content Security Policy (CSP), add allow-top-navigation to the policy so the checkout can load correctly.

Note: The Store Builder Library does not support data-rocketsrc. Third-party tools that defer or compress JavaScript can prevent SBL from initializing. Avoid applying these optimizations to pages that load your embedded 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 > Embedded 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/embedded
```
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.5/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="yourexamplestore.test.onfastspring.com/embedded">
</script>

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

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

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