When a consumer completes an order using a Popup Storefront, the modal dialog closes, and the window shade disappears. The consumer returns to the page on your website that launched the Popup Storefront. However, you may prefer to redirect consumers to a different page on your site (such as a custom “thank you” page).

To implement this redirect, create a JavaScript function to handle the redirect and add a single line to the Store Builder Library code that loads the Popup Storefront.

Assign a JavaScript Function to the data-popup-closed Event

The data-popup-closed Store Builder Library method can invoke a custom JavaScript function when a consumer exits the Popup Storefront dialog. This can occur when they select X to close the dialog, or Continue. When the transaction is completed, the method delivers an object containing the order reference and the internal order ID to the specified JavaScript function.

For example:

If the purchase is incomplete, these values will be null.

To assign your custom JavaScript function to the data-popup-closed event, add a line to the Store Builder Library code you have copied and pasted from the FastSpring App. For example, if your custom JavaScript function is named “onFSPopupClosed”, you would add this: data-popup-closed=”onFSPopupClosed”

Example of a Popup Storefront with a data-popup-closed function assigned

Example JavaScript Function

This example of a JavaScript function redirects consumers who have purchased successfully to a custom page. You could embed this example in the body of your webpage that loads the Popup Storefront, after the Store Builder Library code.

First, the redirect function checks for an order reference returned via the data-popup-closed event. If an order reference is present, the event logs it to the browser’s console, and the consumer is redirected to a custom page. If no order reference is present when the popup closes, that indicates that the consumer closed the popup before completing the order. In that case, the example above writes a simple message (“no order ID”) to the browser’s console log.

This example is for illustrative purposes only. You must modify it (with at least the Target URL) before deploying the code to your webpage. Knowledge of Javascript is useful in implementing this.

Grant Immediate Access to Fulfillments

If you plan to grant access to a product or service immediately after completion of transaction processing, you should validate order data first. To do this, make a GET call to the /orders endpoint of the FastSpring API using the order ID returned via this event. This allows your to validate the transaction details before granting access to the user.

You can also use the /orders API endpoint to retrieve transaction details and populate your custom landing page with consumer or order-specific information.

Table of Contents

Popup Storefronts provide a same-page checkout experience to your customers, enabling them to complete the checkout process without leaving your website.

When a customer clicks “Buy Now”, your website prepares the order contents from the Store Builder Library. Then, a checkout window appears in a popup directly over the webpage, as seen below. After your customer enters their payment information, FastSpring handles the payment processing and fulfillments.

2021-09-01_10-33-29.png

When using a Popup Storefront, we recommend that you deploy a security certificate and use the https: protocol for your website. This prevents web browsers from displaying warning messages about non-secure pages.

Create a Popup Storefront

  1. In the FastSpring App, navigate to Storefronts > Popup Storefronts. Click Create Popup Storefront.
  2. In the Company Sub-Directory Storefront ID field, enter an ID for your new Popup Storefront. The ID you enter becomes part of the Storefront’s URL.
  3. Click Create. Your new Popup Storefront appears in your Popup Storefronts page.

After you have initially created your Popup Storefront, you can customize it to match your website. From the Popup Storefronts page, click Settings.

When editing your Popup Storefront, select Save and Preview at the top, right corner of the popup configuration page to display the current configurations. This preview uses a sample 14.95 monthly subscription.

Configure your Checkout Experience

Click the Settings button on your Popup Storefront. This directs you to the checkout configuration page.

Checkout Experience

In the Checkout Experience section, configure the information that you would like FastSpring to display to customers at checkout, and their customization capabilities:

Promotion

In the Promotion section, you can enable customers to enter coupon codes (that you configure) at checkout in order to receive discounts.

Customer Information

In the Customer Information section, configure the information that you would like to collect from customers at checkout.

Completion Page

After a customer completes a successful purchase, the Completion Page appears, containing display options that you configure.

Purchaser Settings

If enabled in your Storefront, FastSpring can send fulfillments to recipients who did not purchase the product.

Customize the Styling of your Popup Storefront

In the Styling section of the Popup Storefront Settings page, you can adjust the appearance of the Storefront to match your website.

Checkout Title

The Checkout Title is the heading of the Popup Storefront. You can configure this to include your company’s logo and branding styles.

Checkout Text

Tax Text

Pricing Block

Payment Button

Corner Radius

In the Corner Radius fields, you can customize the roundness of the panels and buttons on your storefront. Selecting 0px results in square corners; higher pixels cause more rounded corners.

Margin + Order Total, Tax and Savings

Specify pixel measurements to customize margin heights in your Popup Storefront. Selecting higher values results in larger margins.

Completion Page: Download Button

Completion Page: Continue Button

Completion Page: Checkmark Color

Analytics Integration

In the Analytics Integration subpage of Popup Storefront Settings, you can configure optional integrations with Google Analytics and Google Tag Manager. By default, your Popup uses the settings configured in the Integrations menu, however you can override these settings for a specific storefront.

PayPal

In the PayPal subpage, you can control the logo and store title displayed in the PayPal login window when a customer completes their purchase with PayPal.

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.
  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. 
  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. 
  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. 
  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.

Table of Contents

You can include a shopping cart inside the Popup Storefront from which customers can see and modify the contents of their order. This shopping cart can also house up to 10 Cross-Sells. If you use the data-continuous markup directive, this enables the cart session to persist after the customer closes the Popup Storefront.

Customer Experience

When it is enabled, the shopping cart icon appears at the top, left corner of the popup storefront. The Store Builder Library displays the total number of all products in the cart; customers can click on the cart to adjust quantities of their products and view subscription terms.

2021-09-02_08-47-11.png

When the customer clicks Continue Checkout, the checkout dialog displays. Launching the cart directly bypasses the checkout dialog, and removes the back arrow from the cart page.

The color of the quantity indicator is the Price Line Color, which you can configure under Styling > Pricing Block.

Enable the Popup Storefront Cart

  1. In the FastSpring App, go to Storefronts > Popup Storefronts.
  2. Click Settings on the specific Popup Storefront where you want to enable the cart.
  3. On the Checkout page, select the True checkbox under the Show Shopping Cart field.
  4. Click Save.

Directly Launch the Popup Cart

With Version 0.8.1 or later of the Store Builder Library, you can launch the Popup Cart rather than the Popup Storefront at checkout. You can do this with fastspring.builder.viewCart(), or data-fsc-action=”ViewCart”. Data-fsc-action=”ViewCart” may be stacked with additional actions, such as “Add”.

To control the Store Builder Library version that your page loads, update the URL in the src directive of the script, such as https://d1f8f9xcsvx3ha.cloudfront.net/sbl/0.8.3/fastspring-builder.min.js

Keep Cart Items for Future Sessions

To ensure selected products remain in the customer’s cart when they close the Popup Storefront, include the data-continuous =”true” callback in your Store Builder Library (SBL) script.

When data-continuous is enabled, the customer can close the popup dialog and make changes to the cart contents with your page’s SBL functions. If they re-open the Popup Storefront during the same browser session, the selected contents from the SBL session automatically appear in the cart.