FastSpring AppAPI ReferenceWebhooksJavaScript LibraryChangelogFastSpring.com
FastSpring App
Sign In

Adding a Popup Checkout to Your Website

Suggest Edits

After you customize your popup checkout, use FastSpring’s Store Builder Library (SBL) to add it to your website. Follow the steps below to add the checkout to your website. 

In order to process live transactions, your checkout must be online. See Managing a Checkout for more information.

List Your Subdomains

In the FastSpring App, list the subdomains where you plan to host the popup checkout. This allows the subdomains to process live transactions with your checkout. It also prevents the checkout from loading on external, untrusted domains. 

  1. Navigate to Checkouts > Popup Checkouts.
  2. On the applicable checkout, click the No whitelisted websites badge. A popup appears.
    • If you have previously listed subdomains, this badge appears green with the number of whitelisted subdomains.
  3. In the text area, enter http:// or https:// and the subdomain of your website. In a new line, repeat this step until all subdomains are added.
  4. Allow up to 20 minutes for any domain updates to be fully applied. If the checkout does not respond, list additional domains, such as: http://mydomain.com, https://mydomain.com, http://www.mydomain.com, and https://www.mydomain.com
  5. Click Save. Customers can now process transactions on your Checkout.

You can list each subdomain under multiple checkouts. To make future changes, click the green whitelist badge. 

Add Products to Your Popup Checkout

Adding products to a popup checkout enables you to send API calls to the associated products, and access products from HTML and JavaScript. 

  1. Navigate to Checkouts > Popup Checkouts. On the applicable checkout, click Products. The Homepage Products dialog appears.
  2. In the Main Products field, select the product you want to add. Repeat this step for each product.

Test Your Popup Checkout from the App

We recommend placing test orders while your checkout is offline , or through the app. This way, customers do not accidentally make test purchases on a live checkout. 

  1. In the FastSpring App, navigate to Checkouts > Popup Checkouts. Select Preview. The Popup Checkout appears.
  2. In a separate tab, navigate to Checkouts > Popup Checkouts. On the same checkout, click Test. Input this credit card information in the test checkout.
    • Test a successful purchase: copy and paste the Card Number and CVV Code shown in the Success row.
    • Test a declined transaction: copy and paste the Card Number and CVV Code shown in the Failure row.
  3. In the Expiration Date field, enter any date in the future.
  4. In all other fields, enter the information desired. When finished, click Pay.

Place your Popup Checkout on your Website

After you list your subdomains, use the SBL to place the popup checkout on your website.

We recommend placing them on a page that is not accessible to your customers to test the user experience. When you are satisfied, repeat the process to place the Popup Checkout on a customer-facing page.

  1. Navigate to Checkouts > Popup Checkouts. On the applicable checkout, click Place on your Website.
  2. Copy the SBL JavaScript snippet. Add it to the section of pages where you would like to use the Popup Checkout.
  3. After you have added the snippet to the of the webpage, you can open the Popup Checkout from that page.
  4. If your page restricts sandboxes through a Content Security Policy header, add allow-top-navigation to the policy.

The Store Builder Library does not support data-rocketsrc at this time. Because of this, third-party tools that attempt to compress or defer JavaScript loading may interfere with initializing the SBL. To ensure that the SBL loads successfully, avoid using these tools on pages that load the SBL. 

Test Orders from your Website

After you add the checkout to your website, you can place test orders from your website. However, we only recommend using test checkouts that are not accessible to your customers; this will prevent them from accidentally placing live orders on the test checkout.

  1. In the JavaScript library on your page, adjust the checkout’s URL by inserting .test. between the checkout name and onfastspring.com.
    • For example, if your Popup Checkout’s URL is yourexamplestore.onfastspring.com/popup, you would change the URL to be yourexamplestore.test.onfastspring.com/popup.

Example Code:

<script
    id="fsc-api"
    src="https://sbl.onfastspring.com/sbl/0.9.2/fastspring-builder.min.js"
    type="text/javascript"
    data-checkout="yourexamplestore.test.onfastspring.com/popup">;
</script>
  1. Click a link on your webpage that was configured to invoke a Popup Checkout. The Popup Checkout appears on your website. For more information, see our Sample Popup code.
  2. Use the test order information to complete a test purchase.

After you are satisfied with your test orders, repeat the steps under Place your Popup Checkout on a customer-facing subdomain. Then, customers can start making purchases.

Updated about 1 month ago