Using methods in Store Builder

Use methods to control FastSpring order behavior using JavaScript. Calling a fastspring.builder method allows you to add or remove products, update quantities, set localization preferences, trigger checkout, or pass full session data using code alone.

Why use methods?

Control FastSpring session behavior using JavaScript:

Full control via code: Add, remove, or update products programmatically
React to user behavior: Trigger checkout or cart logic at any point in your app
Advanced integration: Pass full session objects and manage localization

What this guide covers

This guide explains how to:

Use cart methods to add, update, remove, and reset products
Use checkout methods to launch checkout and clean up sessions
Use localization methods to set country, language, and postal code
Use advanced methods to push full session data and authenticate users

Requirements

Before using methods, make sure you:

Include the FastSpring Store Builder script

Click to view script

<script 
    id="fsc-api"
    src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
    type="text/javascript"
    data-storefront="your-storefront-URL">
</script>

Replace your-storefront-URL with the full path to a checkout in your store.

Attribute	Description
`id`	Identifies the script block (must be set to `fsc-api`)
`src`	Specifies the version of the Store Builder
`type`	Declares the script as JavaScript
`data-storefront`	The storefront URL this script will connect to

Call each method from a valid script context
Most methods must be called after the Store Builder script is loaded and may require a valid product path or session object.

Quick start

Follow these steps to start using methods in your Store Builder integration:

Add the Store Builder script

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL"
  data-after-markup-callback="dataAfterMarkupCallback">
</script>

Replace your-storefront-URL with the full path to a checkout in your store.

Call a method in JavaScript

Here’s how to add a product to the cart:
```
fastspring.builder.add("your-product-path");
```
What it does: Adds the specified product to the cart.
What to update: Replace "your-product-path" with the path of a product from your store.

Here’s how to launch the checkout window:
```
fastspring.builder.checkout();
```
What it does: Opens the FastSpring popup checkout.
Tip: You can preload products before calling this method using add().

Methods summary

The table below provides an overview of available methods, their functions, and examples of how they can be used.

Method	Description	Example
`fastspring.builder.add(product)`	Adds a product to the cart without modifying its quantity.	View Code
`fastspring.builder.authenticate(securePayload, secureKey)`	Authenticates a secure payload using a provided key before processing.	View Code
`fastspring.builder.checkout()`	Opens the FastSpring checkout window.	View Code
`fastspring.builder.clean()`	Resets the cart after a purchase is completed.	View Code
`fastspring.builder.country(countryCode)`	Sets the country for the order (ISO 3166-1 alpha-2).	View Code
`fastspring.builder.language(languageCode)`	Sets the language for the order (ISO 639-1).	View Code
`fastspring.builder.payment("paypal")`	Sets PayPal as the payment method and redirects the buyer.	View Code
`fastspring.builder.postalCode()`	Retrieves the postal code used in tax calculations.	View Code
`fastspring.builder.promo(code)`	Applies a promo code to the order.	View Code
`fastspring.builder.push(object)`	Pushes order session data to FastSpring with a JSON object.	View Code
`fastspring.builder.recognize(securePayload, secureKey)`	Prefills unauthenticated customer information in the session.	View Code
`fastspring.builder.recognizeRecipients(object)`	Prefills unauthenticated gift recipient information.	View Code
`fastspring.builder.remove(product)`	Removes a specific product from the cart.	View Code
`fastspring.builder.reset()`	Clears all products from the cart.	View Code
`fastspring.builder.secure(securePayload, secureKey)`	Passes sensitive data securely, such as contact or payment details.	View Code
`fastspring.builder.tag({'key1':'value1'})`	Attaches custom order-level tags as key-value pairs.	View Code
`fastspring.builder.taxId(vatExclusionCode)`	Applies a VAT exemption Tax ID to the order.	View Code
`fastspring.builder.update(product, quantity)`	Updates the quantity of a product in the cart.	View Code
`fastspring.builder.viewCart()`	Opens the FastSpring cart popup.	View Code
Public Methods Callback Function	Enables callback execution after a method completes, allowing further actions based on the response.	View Code

Detailed method examples

Below are detailed examples for each method. Click each section to see the code snippet, what it does, and how to use it.

fastspring.builder.add(product)

HTML markup + FastSpring script setup:

<!-- Optional: Element used to show cart status -->
<div>
  In cart: <span data-fsc-item-path="your-product-path" data-fsc-item-selected></span>
</div>

<!-- Button to trigger the Add method -->
<button onclick="addProductToCart()">
  Add to Cart
</button>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL"
  data-continuous="true">
</script>

JavaScript method function:

function addProductToCart() {
  fastspring.builder.add("your-product-path");
}

What it does:
Adds a product to the cart by setting its selected state to true. It does not change the quantity of the item.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store
Rename addProductToCart if you're using a different function name

fastspring.builder.authenticate(securePayload, secureKey)

HTML markup + FastSpring script setup:

<!-- Button to trigger authentication and redirect to the account portal -->
<button onclick="pushToFastSpring()">
  Recognize Buyer and Checkout
</button>

<!-- Load the FastSpring Store Builder with access key support -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL"
  data-access-key="your-access-key">
</script>

JavaScript method function:

function pushToFastSpring() {
  fastspring.builder.authenticate({
    account: "your-account-id",
    timestamp: Date.now() // Use Date.now() for a current timestamp in milliseconds
  });
}

What it does:
Authenticates a buyer using a secure payload and redirects them to the FastSpring account portal.

What to update:

Replace your-account-id with the FastSpring account ID for the buyer
Replace your-access-key with the secure access key for your storefront
Replace your-storefront-URL with the full path to a checkout in your store
Rename pushToFastSpring if you're using a different function name

fastspring.builder.checkout()

HTML markup + FastSpring script setup:

<!-- Optional: Element used to show cart status -->
<div>
  In cart: <span data-fsc-item-path="your-product-path" data-fsc-item-selected></span>
</div>

<!-- Button to launch the FastSpring popup checkout -->
<button onclick="fastspring.builder.checkout();">
  Checkout
</button>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL"
  data-continuous="true">
</script>

<!-- Preload a product into the cart -->
<script>
  fastspring.builder.add("your-product-path");
</script>

What it does:
Opens the FastSpring popup checkout using the current session. You can preload items into the cart before calling this method.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store (e.g., yourstore.test.onfastspring.com/popup-checkout)

fastspring.builder.clean()

HTML markup + FastSpring script setup:

<!-- Optional: Element used to show the current order total -->
<div>
  Order Total: <span data-fsc-order-total></span>
</div>

<!-- Button to launch checkout after calling clean() -->
<button data-fsc-action="Checkout">
  Checkout
</button>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL"
  data-continuous="true">
</script>

JavaScript method function:

// Clean the session and add a product before checkout
fastspring.builder.clean();
fastspring.builder.add("your-product-path");

What it does:
Clears the session when using data-continuous="true" so buyers return to an empty cart after checking out or exiting. This helps reset the storefront between sessions.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store (e.g., yourstore.test.onfastspring.com/popup-checkout)

fastspring.builder.country(countryCode)

HTML markup + FastSpring script setup:

<!-- Button to change the order's country -->
<button onclick="fastspring.builder.country('de')">
  Switch to Germany
</button>

<!-- Optional: Element used to show the selected order country -->
<div>
  Order Country: <span data-fsc-order-country></span>
</div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

What it does:
Overrides the default geo-located country for the order session. This also localizes pricing, formatting, and tax behavior.

What to update:

Replace 'de' with the ISO 3166-1 alpha-2 country code you want to test
Replace your-storefront-URL with the full path to a checkout in your store (e.g., yourstore.test.onfastspring.com/popup-checkout)

fastspring.builder.language(languageCode)

HTML markup + FastSpring script setup:

<!-- Button to change the language of the checkout experience -->
<button onclick="fastspring.builder.language('de')">
  Switch to German
</button>

<!-- Optional: Element used to show the selected language -->
<div>
  Order Language: <span data-fsc-order-language></span>
</div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

What it does:
Sets the session’s language using a two-letter ISO 639-1 code. This affects price formatting, translations (if available), and buyer-facing labels.

What to update:

Replace 'de' with the two-letter language code you want to use
Replace your-storefront-URL with the full path to a checkout in your store (e.g., yourstore.test.onfastspring.com/popup-checkout)

fastspring.builder.payment("paypal")

HTML markup + FastSpring script setup:

<!-- Button to preselect PayPal as the payment method -->
<button onclick="fastspring.builder.payment('paypal')">
  Pay with PayPal
</button>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL"
  data-continuous="true">
</script>

<!-- Preload a product into the cart -->
<script>
  fastspring.builder.add("your-product-path");
</script>

What it does:
Preselects PayPal as the buyer's payment method. This method can be called before checkout to streamline the flow.

What to update:

Replace 'paypal' with a different supported method if needed
Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store (e.g., yourstore.test.onfastspring.com/popup-checkout)

fastspring.builder.postalCode(postalCode)

HTML markup + FastSpring script setup:

<!-- Input to collect the buyer's postal code -->
<input type="text" name="postalcode" id="postal-code" placeholder="Enter postal code" />

<!-- Button to apply the postal code -->
<button onclick="applyPostalCode()">
  Apply Postal Code
</button>

<!-- Optional: Display the applied postal code from the order -->
<div>
  Postal Code on order: <span data-fsc-order-postalCode></span>
</div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

JavaScript method function:

function applyPostalCode() {
  const postalCode = document.getElementById("postal-code").value;
  fastspring.builder.postalCode(postalCode);
}

What it does:
Applies a postal code to the order, which may affect tax calculation, localization, and region-specific logic.

What to update:

Replace 'postal-code' with your input field's ID if needed
Customize the placeholder text if you want to change what the shopper sees inside the field (e.g., "Enter postal code")
Replace your-storefront-URL with the full path to a checkout in your store
Rename applyPostalCode if you're using a different function name

fastspring.builder.promo(code)

HTML markup + FastSpring script setup:

<!-- Input field to collect a promo code -->
<input type="text" name="Coupon" id="coupon-code" placeholder="Enter coupon code" />

<!-- Button to apply the entered promo code -->
<button onclick="applyPromoCode()">
  Apply Coupon
</button>

<!-- Optional: Display the updated order total after applying the promo code -->
<div>
  Order Total: <span data-fsc-order-total></span>
</div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

<!-- Preload a product into the cart -->
<script>
  fastspring.builder.add("your-product-path");
</script>

JavaScript method function:

function applyPromoCode() {
  const code = document.getElementById("coupon-code").value;
  fastspring.builder.promo(code);
}

What it does:
Applies a promotional code to the current order. If the code is valid, FastSpring will automatically update the cart totals.

What to update:

Replace 'coupon-code' with your input field's ID if needed
Customize the placeholder text if you want to change what the shopper sees inside the field (e.g., "Enter coupon code")
Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store
Rename applyPromoCode if you're using a different function name

fastspring.builder.push(object)

HTML markup + FastSpring script setup:

<!-- Button to push a custom session object to FastSpring -->
<button onclick="pushToFastSpring()">
  Update Session
</button>

<!-- Optional: Display updated cart info -->
<div>Order Total: <span data-fsc-order-total></span></div>
<div>Quantity: <span data-fsc-item-path="your-product-path" data-fsc-item-quantity></span></div>

<!-- Button to open the checkout popup -->
<button onclick="fastspring.builder.checkout()">
  Checkout
</button>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

JavaScript method function:

function pushToFastSpring() {
  const session = {
    reset: true,
    products: [
      {
        path: "your-product-path",
        quantity: 3
      }
    ],
    paymentContact: {
      email: "[email protected]",
      firstName: "Jane",
      lastName: "Doe"
    },
    language: "en"
  };

  fastspring.builder.push(session);
}

What it does:
Sends a full session object to FastSpring, including cart contents, contact details, and localization settings. Often used when you want full control over the order flow.

What to update:

Replace your-product-path with the path of a product from your store
Replace the paymentContact values with your buyer’s information
Replace en with a two-letter ISO language code if needed
Replace your-storefront-URL with the full path to a checkout in your store
Rename pushToFastSpring if you're using a different function name

fastspring.builder.recognize(securePayload, secureKey)

HTML markup + FastSpring script setup:

<!-- Button to prefill buyer info and launch checkout -->
<button onclick="pushToFastSpring();">
 Recognize Buyer and Checkout
</button>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

<!-- Preload product into the cart -->
<script>
  fastspring.builder.add("your-product-path");
</script>

JavaScript method function:

function pushToFastSpring() {
  fastspring.builder.recognize({
    email: "[email protected]",
    firstName: "myFirstName",
    lastName: "myLastName"
  });
  fastspring.builder.checkout();
}

recognize() stores data in the browser session. The values won’t appear in the builder object, but they will prefill the checkout form.

What it does:
Prefills buyer contact information like email, first name, and last name into the current session. This lets you personalize the checkout experience using info from your app or login flow.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store
Replace the values in the recognize() object with the buyer’s actual info
Rename pushToFastSpring if you're using a different function name

fastspring.builder.recognizeRecipients(object)

HTML markup + FastSpring script setup:

<!-- Button to prefill gift recipient info and launch checkout -->
<button onclick="pushToFastSpring();">
 Send a Gift
</button>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

<!-- Preload product into the cart -->
<script>
  fastspring.builder.add("your-product-path");
</script>

JavaScript method function:

function pushToFastSpring() {
  fastspring.builder.recognizeRecipients({
    email: "[email protected]",
    firstName: "myFirstName",
    lastName: "myLastName",
    address: {
      addressLine1: "Address Line 1",
      city: "City",
      region: "California",
      postalCode: "93101",
      country: "US"
    },
    memo: "Happy Birthday!"
  });
  fastspring.builder.checkout();
}

recognizeRecipients() adds recipient info to the browser session and enables the gift purchase flow at checkout.

What it does:
Prefills recipient contact and address fields in the checkout form, automatically selecting the "gift" option for the order. Use this when the buyer is purchasing for someone else.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store
Replace the values in the recognizeRecipients() object with the recipient's actual info
Customize or remove the memo line based on your gift message setup
Rename pushToFastSpring if you're using a different function name

fastspring.builder.remove(product)

HTML markup + FastSpring script setup:

<!-- Button to remove a product from the cart -->
<button onclick="fastspring.builder.remove('your-product-path');">
 Remove
</button>

<!-- Optional: Display whether the product is in the cart -->
<div>
 Product in cart:
 <span data-fsc-item-path="your-product-path" data-fsc-item-selected></span>
</div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

<!-- Preload product into the cart -->
<script>
  fastspring.builder.add("your-product-path");
</script>

remove() deselects the specified product and resets its quantity to 1, but does not affect other products in the cart.

What it does:
Removes a single product from the cart by changing its selected state to false. It leaves other items untouched and resets the product's quantity to its default value.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store

fastspring.builder.reset()

HTML markup + FastSpring script setup:

<!-- Button to empty the cart -->
<button onclick="fastspring.builder.reset();">
 Empty Cart
</button>

<!-- Optional: Show if a product is still in the cart -->
<div>
 Product in cart:
 <span data-fsc-item-path="your-product-path" data-fsc-item-selected></span>
</div>

<!-- Optional: Show the current order total -->
<div>
 Order Total:
 <span data-fsc-order-total></span>
</div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

<!-- Preload a product into the cart -->
<script>
  fastspring.builder.add("your-product-path");
</script>

reset() removes all products from the cart. It’s helpful for starting a fresh session on page load or in response to a buyer action.

What it does:
Clears the cart entirely and resets the current session. It is ideal for custom flows that begin with an empty cart or for giving buyers a clean slate.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store

fastspring.builder.secure(securePayload, secureKey)

HTML markup + FastSpring script setup:

<!-- Button to pass a secure payload and launch checkout -->
<button onclick="pushToFastSpring();">
 Secure Checkout
</button>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL"
  data-access-key="your-access-key">
</script>

JavaScript method function:

function pushToFastSpring() {
  fastspring.builder.secure({
    contact: {
      email: "[email protected]",
      firstName: "John",
      lastName: "Doe"
    },
    items: [
      {
        product: "your-product-path",
        quantity: 1,
        pricing: {
          price: {
            USD: 19.00
          }
        }
      }
    ]
  });

  fastspring.builder.checkout();
}

secure() passes encrypted customer and product details to FastSpring. Values in the secure payload are locked and cannot be edited at checkout.

What it does:
Prefills checkout with secure, validated customer and product data like name, email, and custom pricing. Fields passed using secure() are hidden from the buyer and can't be changed during checkout.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store
Replace your-access-key with the access key found in your FastSpring app > Developer Tools > Store Builder Library
Replace the contact info and pricing with the values you want to securely pass to checkout
Rename pushToFastSpring if you're using a different function name

fastspring.builder.tag({'key':'value'})

HTML markup + FastSpring script setup:

<!-- Button to add a tag to the order session -->
<button onclick="fastspring.builder.tag({ 'myKey': 'myValue' });">
 Add Tag
</button>

<!-- Optional: Display the added tag -->
<div>
 Order Level Tags: <span id="key"></span>
</div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL"
  data-data-callback="dataCallbackFunction">
</script>

JavaScript method function:

function dataCallbackFunction(fsdata) {
  if (fsdata.tags) {
    document.getElementById("key").append(JSON.stringify(fsdata.tags));
  }
}

Use tag() to pass metadata like campaign IDs, referral info, or internal IDs to the order. Tags are stored with the session and appear in webhooks and backend events.

What it does:
Adds custom key-value pairs to the current order session. These tags persist through checkout and are included in webhook payloads and backend order records.

What to update:

Replace myKey and myValue with your own tag name and value
Replace your-storefront-URL with the full path to a checkout in your store
Update the logic inside dataCallbackFunction() if you're parsing additional tag data

fastspring.builder.taxId(vatId)

HTML markup + FastSpring script setup:

<!-- Input field for VAT ID -->
<input type="text" name="Tax ID" id="taxId0" placeholder="Enter VAT ID" />

<!-- Button to apply the VAT ID -->
<button onclick="fastspring.builder.taxId(document.getElementById('taxId0').value);">
 Apply Tax ID
</button>

<!-- Optional: Display order totals for reference -->
<div style="margin-top: 1rem;">
  Order Total: <span data-fsc-order-total></span><br />
  Order Tax: <span data-fsc-order-tax></span>
</div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

<!-- Preload a product and set buyer’s country to trigger VAT -->
<script>
  fastspring.builder.add("your-product-path");
  fastspring.builder.country("de");
</script>

Tip: Use a valid EU VAT number like DE257486969 to test this flow. The tax field will update automatically if the ID is valid.

What it does:
Applies a VAT ID to the current session. If the ID is valid for the buyer's country, FastSpring will automatically remove tax from the order and mark the session as tax-exempt.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store
Adjust the input field ID (taxId0) if needed to match your form naming
Replace the country() call with the buyer’s actual location or logic

fastspring.builder.update(product, quantity)

HTML markup + FastSpring script setup:

<!-- Quantity selector -->
<select id="quantity">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>

<!-- Button to apply the selected quantity -->
<button onclick="fastspring.builder.update('your-product-path', document.getElementById('quantity').value);">
 Update Quantity
</button>

<!-- Optional: Display current quantity and total -->
<div style="margin-top: 1rem;">
  Quantity: <span data-fsc-item-path="your-product-path" data-fsc-item-quantity></span><br />
  Order Total: <span data-fsc-order-total></span>
</div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

<!-- Preload a product into the cart -->
<script>
  fastspring.builder.add("your-product-path");
</script>

What it does:
Updates the quantity of a product in the cart. This call overrides any existing quantity value and reflects the change instantly in the order totals and UI.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store
Adjust the <select> options or ID if your quantity limits are different

fastspring.builder.viewCart()

HTML markup + FastSpring script setup:

<!-- Button to open the FastSpring cart popup -->
<button onclick="fastspring.builder.viewCart();">
 View Cart
</button>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL"
  data-continuous="true">
</script>

<!-- Preload a product into the cart -->
<script>
  fastspring.builder.add("your-product-path");
</script>

What it does:
Opens the FastSpring cart popup with the current session contents. Unlike checkout(), this view shows the cart before completing a purchase, allowing buyers to review and update their selections.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store

Public method callback function

HTML markup + FastSpring script setup:

<!-- Button to add a product to the cart and run a callback -->
<button onclick="myCallback();">
 Add to cart and callback
</button>

<!-- Optional: Element used to display callback output -->
<div id="log"></div>

<!-- Load the FastSpring Store Builder script -->
<script
  id="fsc-api"
  src="https://sbl.onfastspring.com/sbl/1.0.3/fastspring-builder.min.js"
  type="text/javascript"
  data-storefront="your-storefront-URL">
</script>

JavaScript method function:

function myCallback() {
  fastspring.builder.add("your-product-path", function(data) {
    document.getElementById("log").innerHTML = "Product was added to the cart!";
  });
}

Unlike data-data-callback, this function only runs when that specific method finishes. It’s great for tracking individual interactions.

What it does:
Calls a FastSpring method (add, remove, etc.) and immediately runs a callback function once that request completes. The callback receives the updated order object.

What to update:

Replace your-product-path with the path of a product from your store
Replace your-storefront-URL with the full path to a checkout in your store
Update the callback logic to do whatever you need (track analytics, show a confirmation, etc.)