Add a Popup Storefront to Your Website
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:
- List your trusted subdomains.
- Add products to your Popup Storefront.
- Test the storefront from the app.
- Place the storefront on your website.
- Test the storefront from your website.
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.
- In the FastSpring App, navigate to Storefronts > Popup Storefronts.
- 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.
- 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.
- 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
- 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.
- In the FastSpring App, navigate to Storefronts > Popup Storefronts. On the applicable popup, select Products. The Homepage Products dialog appears.
- 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.
- In the FastSpring App, navigate to Storefronts > Popup Storefronts. Select Preview. The Popup Storefront appears.
- 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.
- In the Expiration Date field, enter any date in the future.
- 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.
- In the FastSpring App, navigate to Storefronts > Popup Storefronts. On the applicable storefront, click Place on your Website.
- 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.
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.
- 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:
- 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.
- 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.