Using actions in Store Builder

Use actions to trigger FastSpring cart or checkout events directly in your HTML. By adding a data-fsc-action attribute to buttons, links, or inputs, you can add or remove products, update quantities, launch checkout, or apply promo codes.

Why use actions?

Trigger FastSpring cart and checkout behavior directly in your HTML:

No custom JavaScript required: Execute FastSpring actions using data-fsc-action
Real-time cart updates: Modify contents instantly without API calls
Chained actions: Combine multiple actions in one button for smoother UX

What this guide covers

This guide explains how to:

Use cart actions to add, update, remove, and replace products
Use checkout actions to trigger checkout flows
Use promo and tax actions to apply promo codes and VAT exemptions

Requirements

Before using actions, 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

Quick start

Follow these steps to enable actions in your FastSpring 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">
</script>

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

Add an action element

Here’s how to add a product to the cart using a data-fsc-action button:
```
<button data-fsc-item-path-value="your-product-path" data-fsc-action="Add">
  Add to Cart
</button>
```
What it does: Adds a product to the cart by setting its selected state to true.
What to update: Replace your-product-path with the path of a product from your store.

Actions summary

The table below provides an overview of available actions, what they do, and examples of how they can be used to modify cart contents, apply discounts, and trigger checkout flows.

Action	Description	Example
`data-fsc-action="Add"`	Adds a product to the cart. The default quantity is one unless changed separately. Requires the product path.	View Code
`data-fsc-action="Update"`	Updates the quantity of a product in the cart. Requires a select input with `data-fsc-item-quantity-value`.	View Code
`data-fsc-action="Remove"`	Removes a product from the cart by deselecting it and resetting its quantity to 1.	View Code
`data-fsc-action="Replace"`	Replaces one product in the cart with another. Often used to support upsell offers. Requires both product paths.	View Code
`data-fsc-action="Reset"`	Clears all products from the cart. No additional attributes required.	View Code
`data-fsc-action="Checkout"`	Launches the FastSpring popup checkout for the current session.	View Code
`data-fsc-action="PaypalCheckout"`	Opens the checkout window with PayPal selected as the payment method.	View Code
`data-fsc-action="Promocode"`	Applies a promo code entered by the buyer. Requires a nearby input with `data-fsc-promocode-value`.	View Code
`data-fsc-action="TaxId"`	Applies a VAT ID for tax exemption. Requires a nearby input with `data-fsc-taxid-value`.	View Code
`data-fsc-action="ViewCart"`	Opens the FastSpring cart popup so buyers can view their selected products.	View Code
`data-fsc-action="Reset, Add, Checkout"`	Chains multiple actions into one click. In this example: clears the cart, adds a product, then opens checkout.	View Code

Detailed action examples

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

data-fsc-action="Add"