Embedded Checkouts 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 checkout. After your customer enters their payment information, FastSpring processes the payment and delivers their fulfillment. 

When editing your Embedded Checkout, 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 Checkout, 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 Checkout

1. Navigate to Checkouts > Embedded Checkouts. Click Create Embedded Checkout.
2. Below Company Sub-Directory Checkout ID, enter an ID for the checkout. This becomes part of the checkout’s URL.
3. Click Create. Your new inline checkout appears on the Embedded Checkouts page.

After you create the Embedded Checkout, 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 Checkout. 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.

Caching

The Allow Browser Caching feature is an optional setting that, when enabled, stores checkout data from the Store Builder Library in the customer's browser for up to 10 minutes. This local storage reduces the number of server calls, speeding up the checkout process.

🚧

Cache Impact on Price Updates

Sellers who update their catalog prices frequently should avoid enabling this feature because the cached data may delay the display of updated prices for up to 10 minutes.

Customize the Styling of Your Embedded Checkout

On the embedded checkout, click Settings > Styling. Here, you can adjust the appearance and styling of the checkout 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 checkout, 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 checkout. 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 checkout.

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 checkout uses the settings configured in the Developer Tools menu, however you can override these settings on a specific checkout.

• Google Analytics Integration Behavior: Select whether you would like to integrate Google Analytics in this checkout. 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 checkout. 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 checkout, use FastSpring’s Store Builder Library (SBL) to add it to your website. Follow the steps below to add the checkout to your website.

1. List your subdomains.
2. Add products to your inline checkout.
3. Test the checkout from the app.
4. Place the checkout on your website.
5. Test orders from your website.

In order to process live transactions, your checkout must be online. See Managing a Checkout for more information.

List Your Subdomains

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

1. Navigate to Checkouts > Embedded Checkouts.
2. On the applicable checkout, 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.
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. After saving and subdomains, allow up to 20 minutes for any domain updates to be fully applied. If the checkout does not respond, list 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 Checkout.

You can list each subdomain under multiple checkouts. To make future changes, click the green whitelist badge.

Add Products to Your Embedded Checkout

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

1. Navigate to Checkouts > Embedded Checkouts. On the applicable checkout, click Products. The Homepage Products dialog appears.
2. In the Main Products field, select the product you want to add. Repeat this step for each product.

Test Your Embedded Checkout from the App

We recommend placing test orders while your checkout is offline, or through the app. This way, customers do not accidentally make test purchases on a live checkout.

1. In the FastSpring App, navigate to Checkouts > Embedded Checkouts. Select Preview. The Embedded Checkout appears in a new tab.
2. In the FastSpring App, navigate to Checkouts > Embedded Checkouts. On the same checkout, click Test. Input this credit card information in the test checkout.
   • 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.
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 Embedded Checkout on your Website

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

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

1. Navigate to Checkouts > Embedded Checkouts. On the applicable checkout, click Place on your Website.
2. Copy the SBL JavaScript snippet. Add it to the section of pages where you would like to use the Embedded Checkout.
3. After you have added the snippet to the of the webpage, you can open the Embedded Checkout from that page.
4. If your page restricts sandboxes through a Content Security Policy header, add allow-top-navigation to the policy.
5. The Embedded Checkout will be displayed in a div matching ‘fsc-embedded-storefront-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 checkout to your website, you can place test orders from your website. However, we only recommend using test checkouts that are not accessible to your customers; this will prevent them from accidentally placing live orders on the test checkout.

1. In the JavaScript library on your page, adjust the checkout’s URL by inserting .test. between the checkout name and onfastspring.com.
2. For example, if your Embedded Checkout’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> 

3. Click a link on your webpage that was configured to invoke an Embedded Checkout. The Embedded Checkout appears on your website.
4. 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 Checkout 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 Checkout.

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-storefront-container” as follows:

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