---
updatedAt: 2026-02-10T21:05:01.000Z
agentTools:
  projectIndex: https://developer.fastspring.com/llms.txt
---

# Store Builder Overview

Add e-commerce features to your website using FastSpring's Store Builder

<div align="center">

## What can you do with Store Builder?

These building blocks help you create a seamless, dynamic e-commerce experience.

</div>

<div class="spacer-md" />

<Cards columns={3}>
  <Card title="Directives" icon="fa-table-cells-large" iconColor="#ff9950" href="/reference/directives">
    Display product and order data using HTML only.
  </Card>

  <Card title="Actions" icon="fa-bolt" iconColor="#3182ce" href="/reference/actions">
    Trigger checkout and cart behavior using HTML attributes.
  </Card>

  <Card title="Methods" icon="fa-code" iconColor="#38a169" href="/reference/methods">
    Control session and checkout logic using JavaScript.
  </Card>

  <Card title="Callbacks" icon="fa-repeat" iconColor="#805ad5" href="/reference/callbacks">
    Run JavaScript after FastSpring events like add to cart or purchase.
  </Card>

  <Card title="Session objects" icon="fa-clipboard" iconColor="#e53e3e" href="/reference/session-objects">
    Prefill customer details and control checkout behavior.
  </Card>

  <Card title="Secure payloads" icon="fa-lock" iconColor="#319795" href="/reference/secure-payloads">
    Encrypt sensitive session data like pricing or tax ID.
  </Card>
</Cards>

<div class="spacer-md" />

## Add Store Builder to your site

Add the following script to any page where you want to use Store Builder:

```html
<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>
```

> **Note:** Replace `your-storefront-URL` in your script with the full path to a **checkout** in your store (e.g., `yourstore.test.onfastspring.com/popup-checkout`).

| Attribute         | Description                                          |
| :---------------- | :--------------------------------------------------- |
| `id`              | Identifies the script block (must be `fsc-api`).     |
| `src`             | The script source and Store Builder version to load. |
| `type`            | Declares the script as JavaScript.                   |
| `data-storefront` | The full URL to your FastSpring checkout.            |

<div class="spacer-sm" />

<Cards columns={1}>
  <Card title="Where do I find my checkout URL?" icon="fa-magnifying-glass" iconColor="#ff9950">
    1. Navigate to **Checkouts** > **Popup Checkouts** in the FastSpring app.
    2. Select a checkout and click **Place on your website**.
    3. Locate the URL in the `data-storefront` line of the generated script snippet.

    This is the value required for your implementation.
  </Card>
</Cards>