Collapse Menu
Documentation
FastSpring App
Contact Support

Add a Popup Storefront to Your Website

Overview

How to incorporate a Popup Storefront on your website.

After you have customized your Popup Storefront, you can use FastSpring’s Store Builder Library to add it to your website. To do so, follow these steps:

  1. List your trusted subdomains.
  2. Add products to your Popup Storefront.
  3. Test the storefront from the app.
  4. Place the storefront on your website.
  5. Test the storefront from your website.
In order to process live transactions, your storefront must be set to Online. See Managing your Storefront to make your storefront online. 

List your Trusted Subdomains

In the FastSpring app, list the subdomains where you plan to host the Popup Storefront. This allows the subdomains to process live transactions with your storefront, and prevents the storefront from being loaded on external domains that you do not trust.  

  1. In the FastSpring App, navigate to Storefronts > Popup Storefronts
  2. On the applicable storefront, click the No whitelisted websites badge. A popup appears.
    • If you have previously whitelisted 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 storefront does not respond, whitelist 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 Storefront. 

Subdomains may be whitelisted under multiple Storefronts. To make future changes, click the green whitelist badge. 

Add Products to your Popup Storefront

Adding products to a Popup Storefront enables you to display product information, including name, image, description, and pricing on the checkout page. You can add a product to multiple popup storefronts. 

  1. In the FastSpring App, navigate to Storefronts > Popup Storefronts. On the applicable popup, select Products. The Homepage Products dialog appears. 
    • Popup Storefronts do not support product catalogs or home pages, however adding the products in this dialog makes them available in the SBL. This allows you to reference products when accessing the SBL from HTML or JavaScript.
  2. In the Main Products field, type the name of the product you wish to add to select it from the drop-down. Repeat this process for each product. 

Test your Popup Storefront from within the App

We recommend placing test orders while your Popup Storefront is Offline, or through the App. This way, customers do not accidentally complete test purchases on a live Storefront. For more information, see Test Orders on your Storefronts. 

  1. In the FastSpring App, navigate to Storefronts > Popup Storefronts. Select Preview. The Popup Storefront appears. 
  2. In a separate tab, navigate to Storefronts > Popup. On the applicable storefront, click Test. Input this credit card information in the test storefront. 
    • 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 Storefront on your Website

After the subdomains are whitelisted, you can place the Popup Storefront on your website using the Store Builder Library.

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 Storefront on a customer-facing page.
  1. In the FastSpring App, navigate to Storefronts > Popup Storefronts. On the applicable storefront, click Place on your Website. 
  2. Copy the SBL JavaScript snippet. Add it to the <head> section of pages where you would like to use the Popup Storefront. 
  3. After you have added the snippet to the <head> of the webpage, you can open the Popup Storefront from that page. 

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. 

Placing Test Orders from your Website

After you have configured and whitelisted your Popup Storefront, you can place test orders from your website. However, we only recommend using Test Mode storefronts that are not accessible to your customers; this will prevent them from accidentally placing live orders on the Test Storefront.

  1. In the JavaScript library on your page, adjust the storefront’s URL by inserting .test. between the storefront name and onfastspring.com. 
    • For example, if your Popup Storefront'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://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.3/fastspring-builder.min.js"
          type="text/javascript"
          data-storefront="yourexamplestore.test.onfastspring.com/popup">;
      </script>   
  2. Click a link on your webpage that was configured to invoke a Popup Storefront. The Popup Storefront appears on your website. For more information, see our Sample Popup code.
  3. 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 Storefront on a customer-facing subdomain. Then, customers can start making purchases.