Collapse Menu
Docs Home
Developer Tools
Contact Support

Add a Popup Storefront to Your Website

Overview

How to incorporate a Popup Storefront on your website.

Popup Storefronts are powered by FastSpring's Store Builder Library and offer simple and advanced ways to integrate with your website. 

FastSpring designed Popup Storefronts to achieve maximum conversions by minimizing the number of fields consumers must go through after clicking a buy button. Popup Storefronts offer an optional cart that allows consumers to modify the quantity or remove an item from the order. Use the Store Builder Library to provide consumers with these options outside of the Popup Cart.


Whitelist Your Domains for Each Popup Storefront

Webpages residing on any domain that you whitelist will be allowed to process live transactions using your Popup Storefront for products in your Store. An adversary could potentially view the code to invoke your Popup Storefront externally by using browser tools or viewing the source code of your page. Thus you need to prevent the Storefront from being loaded on any page you do not control or trust. Whitelisting your domains with FastSpring enables you to do so. 

To use a Popup Storefront, whitelist the domains where the Popup Storefront is going to appear. This includes the links used for testing and development.

  1. Log on to the FastSpring App and select Storefronts > Popup Storefronts.
  2. On the Popup Storefront where you want to whitelist domains, click the red No whitelisted websites badge. 
    • If you have previously whitelisted any domains for this Storefront, the badge may appear in green and show the number of currently whitelisted domains.
  3. In the Whitelisted Websites dialog, click the text area and enter a single line for each domain to be whitelisted; separate the domains using carriage returns. For each entry, include only the protocol (http:// or https://)  and the domain or subdomain; do not include the full URL of a page on the site.

    For example:
    http://domain.com
    https://domain.com
    https://subdomain.domain.com


     
  4. Allow up to 20 minutes for any domain updates to be fully saved and applied, before consumers can place live transactions from the whitelisted domain URLs.
  5. Click Save. The whitelist badge on the Popup Storefront's tile turns green, indicating the new total number of domain whitelist entries for the Storefront.

If you have additional Popup Storefronts, repeat this process to whitelist the desired domains for each of them. You may choose to whitelist the same domains for all Popup Storefronts or use different domains for different Storefronts. You can make changes at any time by clicking the green whitelist badge.

Place a Popup Storefront On Your Website

After you whitelist your domains, you can place a Popup Storefront on your website.

  1. Navigate to the desired Storefront and click Place on your website
  2. Copy the Javascript snippet and add it to the <head> section of pages where you would like to use the Popup Storefront. The snippet is a part of the Store Builder Library and looks similar to this:
    • <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-yourexamplestore"
      >
      </script>
  3. After you have added the snippet to the <head> of your website, you can open the Popup Storefront on the page.
If your page restricts sandboxes through a Content Security Policy header, add allow-top-navigation to the policy. 
Third-party tools that attempt to compress, concatenate, or defer JavaScript loading may interfere with initializing the Store Builder Library. Such modifications may not work because the Store Builder Library does not support data-rocketsrc at this time. To ensure that the Store Builder Library can load successfully, avoid using these types of tools on pages that load the Library. 

Display Product Details On Your Website

Store Builder Library lets you display product details such as prices, icons, and descriptions on your web pages. If you plan to do this, be sure to add the desired products to your Popup Storefront using the Products command. For more information, see Getting Started with Store Builder Library.

Place Test Orders with a Popup Storefront

If your Popup Storefront is offline, the provided snippet automatically includes the URL for your Test Storefront. If your Storefront is online, you can still choose to place test orders. To do so, add the test string to the URL found in the data-storefront parameter of the snippet. The example above includes the test string. Insert the string between your company name and onfastspring.com.

Example URL:

yourexamplestore.test.onfastspring.com/popup-yourexamplestore 

  • yourexamplestore - Company Name
  • .test - indicates only test orders will be processed
  • .onfastspring.com/popup-yourexamplestore - remainder of the Popup Storefront URL
We recommend only using Test Mode Popup Storefronts on webpages that are not visited by your consumers; this way they cannot place live orders on the test storefronts by accident. 
 

To modify the webpage to call the Live Popup Storefront, remove the ‘test’ string from the URL in the script. The example above would read: yourexamplestore.onfastspring.com/popup-yourexamplestore. Make sure the Storefront is online when you do so. 

 

Trigger the Popup Window

The easiest way to open the Popup Storefront on the page is by using an HTML directive:

 <a href='#' data-fsc-action="Add,Checkout" data-fsc-item-path-value="product-one">Purchase "Product One"</a>

The example directive above adds "Product One" to the cart and opens the Popup Storefront to initiate checkout. This assumes that "product-one" is the Product Path / ID of a product that exists in your Store.

The value that you enter for the data-fsc-item-path-value should be the product path for the product in your Store that you want the link or button to add to the cart.

Find the product path for a product

  1. From the FastSpring App, select the Products menu and then select Products, Bundles, or Subscriptions, depending on the item you want to add to the cart via your Popup Storefront.
  2. Click the the item you want to add to the cart. The item's detail page appears.


     
  3. The product ID/product path can be found at the top left-hand corner of the item's details, as illustrated above. This ID is the value you must enter for the data-fsc-item-path-value in your HTML directive to open a Popup Storefront.

Once you have added the Popup Storefront and made sure it is working, you can implement advanced checkout scenarios by exploring capabilities of the Store Builder Library.

When using a Popup Storefront, we recommend that you deploy a security certificate and use the https: protocol for your website. Otherwise, most web browsers will not display a closed padlock icon, and some may display warning messages about non-secure pages. See Popup Storefronts and Browser Security Features for more information.
 

Library Callbacks for Popups

Use the Store Builder Library to set additional callback functions. The Library will call on specific events that happen inside the Popup for additional tracking and behavior options. See Get Started with Store Builder Library for more information on callbacks and available options.