FastSpring AppAPI ReferenceWebhooksJavaScript LibraryChangelogFastSpring.com
FastSpring App
Sign In

Adding a Popup Storefront to Your Website

Suggest Edits

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

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

List Your 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. It also prevents the storefront from loading on external, untrusted domains. 

  1. Navigate to Storefronts > Popup Storefronts.
  2. On the applicable storefront, 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 storefront 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 Storefront.

You can list each subdomain 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 send API calls to the associated products, and access products from HTML and JavaScript. 

  1. Navigate to Storefronts > Popup Storefronts. On the applicable storefront, 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 Storefront from the App

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

  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 Storefronts. On the same 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 you list your subdomains, use the SBL to place the popup storefront 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 Storefront on a customer-facing page.

  1. Navigate to Storefronts > Popup Storefronts. On the applicable storefront, 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 Storefront.
  3. After you have added the snippet to the of the webpage, you can open the Popup Storefront 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 storefront to your website, you can place test orders from your website. However, we only recommend using test 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://sbl.onfastspring.com/sbl/0.9.2/fastspring-builder.min.js"
    type="text/javascript"
    data-storefront="yourexamplestore.test.onfastspring.com/popup">;
</script>
  1. 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.
  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 Storefront on a customer-facing subdomain. Then, customers can start making purchases.

Updated about 1 year ago