Adding a Popup Storefront to Your Website
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.
- List your subdomains.
- Add products to your popup storefront.
- Test the storefront from the app.
- Place the storefront on your website.
- Test orders from your website.
In order to process live transactions, your storefront must be online. See Managing Your 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.
- Navigate to Storefronts > Popup Storefronts.
- 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.
- 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, list 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.
You can list each subdomain under multiple storefronts. To make future changes, click the green whitelist badge.
Add Products to Your Popup Storefront
- Navigate to Storefronts > Popup Storefronts. On the applicable storefront, click Products. The Homepage Products dialog appears.
- 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
- In the FastSpring App, navigate to Storefronts > Popup Storefronts. Select Preview. The Popup Storefront appears.
- 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.
- 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 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.
- 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.
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.
- 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.
- 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.