Embedded Storefronts are an embedded same-page checkout experience that enables your customers to purchase products without leaving your website.

When a customer clicks “Buy Now,” your website prepares the order contents from our Store Builder Library This creates the session, loading an embedded checkout to display on your chosen page and location on your website. You can customize the styling and localization of each embedded storefront. After your customer enters their payment information, FastSpring processes the payment and delivers their fulfillment.

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

When using an Embedded 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 an Embedded Storefront

Navigate to Storefronts > Embedded Storefronts. Click Create Embedded Storefront.
Below Company Sub-Directory Storefront ID, enter an ID for the storefront. This becomes part of the storefront’s URL.
Click Create. Your new inline storefront appears on the Embedded Storefronts page.

After you create the Embedded Storefront, you can click the Settings button to customize the styling, products, payment methods, and localization.

Configure a Checkout Experience

Click the Settings button on your Embedded Storefront. This directs you to the checkout configuration page where you can customize the customer experience. Click on a subpage to customize the associated settings.

Checkout Experience

Configure the information that you would like FastSpring to display to your customers at checkout, and their customization options:

Country and Language selector: Select whether the country and language selector is visible and adjustable to customers at checkout. This localizes the language and currency displayed to the customer based on a customer’s locale and browser settings. Customers can override the country and language selection with this enabled. Be aware that this will only update the language and currency on the checkout and not the rest of your website.
Tax Exemption: If enabled, a tax exemption link displays (e.g. ‘Enter VAT ID’ in the EU) to customers with applicable taxes at checkout. They can click this link to enter a tax exemption ID. FastSpring will remove taxes from their total.
Open Footer Links in Overlays: If enabled, the Privacy Policy and Terms of Sale links will open in overlays in the same viewport instead of opening in a new browser window. This is recommended for in-app implementations.
Allow Customers to Generate Quotes: If enabled, customers will be able to generate a quote from checkout.

Purchaser Settings

FastSpring can send fulfillments to recipients who did not purchase the product.

Allow Separate Billing Contact: Allow the billing information to differ from the fulfillment information.
Enable Gift Purchases: Allow customers to make purchases for someone else. Gift purchases do not support subscriptions. This does not apply if you enable Allow Separate Billing Contact.

Promotion

Enable customers to enter coupon codes at checkout to receive discounts. To configure a coupon or coupon code, see Coupons.

‘Promotional Code’ field: If enabled, a field displays in which customers can enter valid coupon codes to receive the configured discount.
Automatically expand ‘Promotional Code’: Select the behavior for the promotional code field:
- Yes: The promotional code field appears in the checkout.
- No: Customers click a link to expose the coupon field.

Customer Information

Configure the information that you would like to collect from customers at checkout.

Display Newsletter Subscription Checkbox: Displays a checkbox labeled “Get free updates about our products and offerings” below the email field. If the customer selects this checkbox, FastSpring sends mailing list webhooks.
‘Company’ field: Displays a field in which customers can enter the name of their associated company at checkout.
Collect physical address: Requires customers to enter their billing address when they place an order.
Collect phone number: Requires customers to enter their phone number when they place an order.
Auto/Manual subscription renewal: Control whether customers can opt out of automatic renewals. This converts their subscription to a manual renewal subscriptions
- Do not allow customers to opt out from saving payment details: FastSpring saves the payment details and automatically processes applicable rebills.
- Allow, Opt-Out: Customers can clear the checkbox to opt out of automatic renewals. Otherwise, FastSpring saves the payment details and processes automatic renewals.
- Allow, Opt-In: Customers can select the checkbox to opt in to automatic renewals. Otherwise, FastSpring does not save the payment information. Customers must manually pay for the next billing period in their Account Management portal. This does not apply to managed subscriptions.

Completion Page

After a customer successfully completes their purchase, FastSpring displays a custom completion page.

Display products on completion page: Select this checkbox to display purchased products on the completion page.
Enable licenses on completion page: Select this checkbox to display licenses for the purchased products on the completion page.

Customize the Styling of Your Embedded Checkout

On the embedded storefront, click Settings > Styling. Here, you can adjust the appearance and styling of the storefront to match your website.

General Styling

Background color: Select a color for your checkout’s background.
Font: Select the font to be applied to all the text in your checkout.
Body text color: Select what color to apply to all the text in your checkout, except for links and the pricing text (which have separate settings).
Input field background color: Select the background color for all input fields.
Input field border color: Select the input field border color for all input fields.
Input field border color – on focus: Select the input field border color when clicked.
Payment method logos light/dark mode: Choose whether your payment method logos display in light or dark mode to stand out against your chosen input field background color. The default is set to auto-detect, switching the images from light to dark at a specified threshold.

Link Styling

Link text color: Select the color to apply to all links.
Link text color – on hover: Select the link color when a customer hovers their cursor over it.

Pricing Text

Price text color: Select or enter the color of the subtotal displayed at the top of your checkout.
Price line font size: Select the size (in pixels) to display the pricing text in.
Price line font weight: Optionally, select Bold to bolden your subtotal.

Payment Button

At the bottom of the embedded storefront, FastSpring displays a “Pay” button. After entering their payment information, customers click this button to submit their payment.

Button color: Enter the color of the payment button.
Text color: Enter the color of the text on the payment button.
Button color – on hover: Enter the color that the button changes to when a customer hovers their cursor over it.
Text color – on hover: Enter the color that the text changes to when a customer hovers their cursor over it.

Corner Radius

Customize the roundness of the buttons on your storefront. Selecting 0px results in square corners; higher pixels cause rounded corners.

Call to Action buttons corner radius: Select the corner radius for the buttons in the embedded storefront.

Completion Page

After a customer completes their transaction, FastSpring redirects them to your completion page. You can customize the look and feel of any CTA button that may display on the completion page. CTA buttons include “View Quote”, “View Invoice” and any download links for fulfillments.

CTA button color: Enter the color of the CTA button.
CTA button text color: Enter the color the CTA button text appears in.
CTA button color – on hover: Enter the color that the button changes to when a customer hovers their cursor over it.
CTA button text color – on hover: Enter the color that the CTA button text changes to when a customer hovers their cursor over it.
Color of the successful order check mark on the completion page: Select or enter the color for the check mark that appears at the top of the completion page.

Analytics Integration

Configure optional integrations with Google Analytics and Google Tag Manager on the Analytics Integration subpage. By default, your embedded storefront uses the settings configured in the Developer Tools menu, however you can override these settings on a specific storefront.

Google Analytics Integration Behavior: Select whether you would like to integrate Google Analytics in this storefront. If you select Use custom Google Analytics property ID, enter a custom property ID in the field below.
Google Tag Manager Integration Behavior: Select whether you would like to integrate Google Tag Manager in this storefront. If you select Use custom Google Tag Manager container ID, enter a custom property ID in the field below.

PayPal

Control the logo and store title that displays in the PayPal login window. This only applies if PayPal is enabled in your store and a customer selects PayPal as their payment method.

Checkout Brand Logo: Select an image to appear at the top of the login window.
Checkout Brand Title: Enter the brand title that appears in the ‘Cancel and return’ link on the PayPal login window.

Adding an Embedded Checkout to Your Website

After you customize your embedded 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 inline 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 a Storefront for more information.

List Your Subdomains

In the FastSpring App, list the subdomains where you plan to host the embedded storefront. This allows the domains and subdomains to process live transactions with your storefront. It also prevents the storefront from loading on external, untrusted domains.

Navigate to Storefronts > Embedded 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.
After saving and subdomains, 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 Embedded Storefront

Adding products to an embedded storefront enables you to send API calls to the associated products, and access products from HTML and JavaScript.

Navigate to Storefronts > Embedded 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 Embedded 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.

In the FastSpring App, navigate to Storefronts > Embedded Storefronts. Select Preview. The Embedded Storefront appears in a new tab.
In the FastSpring App, navigate to Storefronts > Embedded 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 Embedded Storefront on your Website

We recommend placing your Embedded Storefront 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 Embedded Storefront on a customer-facing page.

After you list your subdomains, use the Store Builder Library (SBL) to place the Embedded Storefront on your website.

Navigate to Storefronts > Embedded Storefronts. On the applicable storefront, click Place on your Website.
Copy the SBL JavaScript snippet. Add it to the section of pages where you would like to use the Embedded Storefront.
After you have added the snippet to the of the webpage, you can open the Embedded Storefront from that page.
If your page restricts sandboxes through a Content Security Policy header, add allow-top-navigation to the policy.
The Embedded Storefront will be displayed in a div matching ‘fsc-embedded-checkout-container’. This should be displayed in the section of your HTML markup.

You must also add a product to the order for the checkout to load.

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.

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 Embedded Storefront’s URL is yourexamplestore.onfastspring.com/embedded, you would change the URL to be yourexamplestore.test.onfastspring.com/embedded.

Example Code:

<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/embedded">;
</script>

Click a link on your webpage that was configured to invoke an Embedded Storefront. The Embedded Storefront appears on your website.
Use the test order information to complete a test purchase.

You can view test orders for your store at: https://fastspring.com/docs/test-orders/

After you are satisfied with your test orders, repeat the steps under Place your Embedded Storefront on a customer-facing subdomain. Then, customers can start making purchases.

Redirecting to a Custom Page After Checkout

When a customer completes an order in your embedded checkout, you can redirect customers to a different page on your website.

To implement the redirect, create a JavaScript function to handle the redirect. Add a single line to the Store Builder Library code that loads the Embedded Storefront.

More information about how you can redirect your customers after they purchase are available here.

Validate Order Information

If you plan to share access to the product or service immediately after FastSpring processes the transaction, we recommend that you validate the data. To do so, use the associated order ID to make a GET call to the /orders endpoint.

Spinner Placement

While the embedded checkout loads a spinner displays. By default, the spinner will be placed in the middle of the page.

To place the spinner in the middle of the checkout container, add style=”position: relative” to the embedded checkout placeholder “fsc-embedded-checkout-container” as follows:

<div id="fsc-embedded-checkout-container" style="position: relative;">
</div>