# BigCommerce Quickstart

> Accept a sandbox payment from the cart page of your existing BigCommerce store.

- **Bolt handles** the checkout interface and payment collection.
- **Your store owns** the cart, product catalog, shipping settings, and order records.

Source: https://help.boltapp.com/platforms/bigcommerce

<aside className="bolt-quickstart-summary not-prose" aria-labelledby="quickstart-outcome">
  <div className="bolt-quickstart-summary__header">
    <h2 id="quickstart-outcome">
      What you'll build
    </h2>

    <span className="bolt-quickstart-summary__time">
      <Icon name="clock" size="14" aria-hidden="true" />

       Est. 45–60 min
    </span>
  </div>

  <ul className="bolt-quickstart-summary__results">
    <li>
      <Icon name="circle-check" aria-hidden="true" />

      <span>Connected sandbox store</span>
    </li>

    <li>
      <Icon name="circle-check" aria-hidden="true" />

      <span>Bolt checkout on your cart</span>
    </li>

    <li>
      <Icon name="circle-check" aria-hidden="true" />

      <span>Verified BigCommerce order</span>
    </li>
  </ul>
</aside>

## Your integration steps [#your-integration-steps]

<nav className="bolt-quickstart-steps not-prose" aria-label="Quickstart steps">
  <ol>
    <li>
      <a href="#1-install-app"><span className="bolt-quickstart-steps__number">1</span><span className="bolt-quickstart-steps__label">Install app</span></a>
    </li>

    <li>
      <a href="#2-connect-bolt"><span className="bolt-quickstart-steps__number">2</span><span className="bolt-quickstart-steps__label">Connect Bolt</span></a>
    </li>

    <li>
      <a href="#3-add-checkout"><span className="bolt-quickstart-steps__number">3</span><span className="bolt-quickstart-steps__label">Add checkout</span></a>
    </li>

    <li>
      <a href="#4-refresh-cart"><span className="bolt-quickstart-steps__number">4</span><span className="bolt-quickstart-steps__label">Refresh cart</span></a>
    </li>

    <li>
      <a href="#5-verify-order"><span className="bolt-quickstart-steps__number">5</span><span className="bolt-quickstart-steps__label">Verify order</span></a>
    </li>
  </ol>
</nav>

**This flow:** a BigCommerce sandbox store using a copied Cornerstone theme, Full Bolt Checkout with Fraud Protection, and Bolt Payments sandbox.

## Before you begin [#before-you-begin]

Have these ready before the estimated integration time begins. Store enablement and account provisioning are separate; this estimate has not been measured in a live walkthrough.

| Requirement  | What you need                                                                                                             |
| ------------ | ------------------------------------------------------------------------------------------------------------------------- |
| Test store   | BigCommerce sandbox admin access to apps, users, payments, and theme files. Bolt Checkout enabled by BigCommerce Support. |
| Bolt sandbox | An approved merchant division with Bolt Payments sandbox configured for Immediate Capture.                                |
| Test cart    | One in-stock physical product, a supported shipping address, and a copy of your Cornerstone theme.                        |

**Platform support**

This guide is for BigCommerce. Supporting guides for this platform: [fraud protection only](/platforms/bigcommerce/bigcommerce-setup-guide/fraud-only/), [checkout links](/products/checkout-everywhere), [theme configuration](/platforms/bigcommerce-full), and [production installation](/platforms/bigcommerce-full#install-for-production). Other platforms and custom web apps have their own quickstarts.

<IntegrationTable>
  <CommercePlatforms current="bigcommerce" />
</IntegrationTable>

## 1. Install app [#1-install-app]

1. On your test store, install the [Bolt sandbox app](https://apps.bigcommerce.com/details/22164). Select **Get This App > Install > Confirm**.
2. In **Settings > Users**, create the Bolt support user `dev@boltapp.com` with **Active** status and the **Sales Manager** role, as required by the plugin setup.
3. Grant **Manage Settings**, **Manage Payments**, **Store Design**, **Design Mode**, **Store Logs**, and **Use Script Manager**. Enable **Bolt Checkout** under **Single Click Apps** and enable **WebDav**. Save the user.

### Validate installation [#validate-installation]

Confirm **Bolt** appears under **Store Setup > Payments > Online Payment Methods** and the support user has the listed permissions for this test store. Do not install the production app for this walkthrough.

## 2. Connect Bolt [#2-connect-bolt]

1. Open [sandbox API keys](https://merchant-sandbox.boltapp.com/administration/api-keys#apiKeys). Copy the **API Key**, **Signing Secret**, and **Publishable Key** for your test division.
2. In BigCommerce, open **Store Setup > Payments > Online Payment Methods > Bolt > Setup**. Enter the corresponding keys and save. Keep the API key and signing secret out of theme code.
3. Open **Bolt Settings**. Set **Configuration Mode** to **Full Bolt Checkout with Fraud Protection** and save.
4. Open [sandbox Webhooks](https://merchant-sandbox.boltapp.com/administration/webhooks). Under **Endpoints**, confirm the app populated `https://api.bigcommerce.com/stores/{store_hash}/v2/` for your store.

<img alt="The merchant dashboard API keys panel shows the publishable key to copy into BigCommerce." src="__img0" />

### Validate connection [#validate-connection]

Check that the store hash is your test store and the keys belong to the same sandbox division. If the webhook URL is absent, reinstall the sandbox app; contact Bolt if it remains missing. Do not continue with a manually guessed endpoint.

## 3. Add checkout [#3-add-checkout]

In **Store Front > My Themes > Advanced > Edit Theme Files**, edit your copied theme's `templates/pages/cart.html`. Add this script above the cart's first `div`, replacing `YOUR_SANDBOX_PUBLISHABLE_KEY` with your publishable key:

```html title="cart.html"
<script
  id="bolt-connect"
  src="https://connect-sandbox.boltapp.com/connect-bigcommerce.js"
  data-publishable-key="YOUR_SANDBOX_PUBLISHABLE_KEY"
  data-storefront-api-token="{{settings.storefront_api.token}}">
</script>
```

Add the Bolt button beside the cart's checkout action:

```html title="cart.html"
<div data-tid="instant-bolt-checkout-button">
  <object data="https://connect-sandbox.boltapp.com/v1/checkout_button?publishable_key=YOUR_SANDBOX_PUBLISHABLE_KEY"></object>
</div>
```

Add tracking in BigCommerce's **Footer Scripts**, using the same publishable key:

```html title="Footer scripts"
<script
  id="bolt-track"
  src="https://connect-sandbox.boltapp.com/track.js"
  data-publishable-key="YOUR_SANDBOX_PUBLISHABLE_KEY"
  data-shopping-cart-id="BigCommerce">
</script>
```

Save and apply the copied theme to your sandbox store. Open its cart page with your test product.

### Validate checkout [#validate-checkout]

Select the Bolt button. Confirm checkout opens with the correct item, quantity and currency, then close it without paying. Keep the original checkout action available until the Bolt button works. This walkthrough validates the cart page; fast cart and mini cart use the [additional template instructions](/platforms/bigcommerce-full#step-6-add-scripts--buttons) before launch.

## 4. Refresh cart [#4-refresh-cart]

Add this observer to `templates/pages/cart.html`. Cornerstone uses `cart-total-value` for the total; confirm that class exists in your copied theme.

```html title="cart.html"
<script>
  var lastBoltTotal = "";
  var boltCartObserver = new MutationObserver(function () {
    var total = document.querySelector(".cart-total-value");
    if (!total || total.textContent === lastBoltTotal) return;
    if (!window.BoltCheckout || !window.BoltCheckout.reloadBigCommerceCart) return;
    lastBoltTotal = total.textContent;
    window.BoltCheckout.reloadBigCommerceCart();
  });
  boltCartObserver.observe(document.body, { childList: true, subtree: true });
</script>
```

Save the theme. Change the quantity on the cart page, then reopen Bolt checkout.

### Validate refresh [#validate-refresh]

The updated quantity and total must appear in checkout. Restore the quantity for your first test purchase. If totals are stale, check the theme's total selector and the connect script before continuing; do not test a payment against the wrong cart.

## 5. Verify order [#5-verify-order]

1. Record the cart's product, quantity, currency and expected shipping/tax for your test address.
2. Open Bolt checkout from the cart page, enter the test shopper details, and compare the final total.
3. Pay once with the [Bolt Payments approved test card](/getting-started/test-cards#bolt-payments): `4111 1111 1111 1111`, expiration `03/30`, CVV `737`.
4. Open [sandbox Transactions](https://merchant-sandbox.boltapp.com/transactions). Find the completed payment and record its order number, amount and currency.
5. Open **Orders** in BigCommerce. Find the matching order and compare product, quantity, shopper and total.

### Validate purchase [#validate-purchase]

You are done when one matching store order and completed Bolt payment agree. If payment exists but the store order is missing, investigate the transaction and webhook delivery before retrying. Browser confirmation alone is not authoritative payment proof.

## Test before launch [#test-before-launch]

Run the [BigCommerce test plan](/platforms/bigcommerce-test-plan). Cart-page acceptance is separate from testing every storefront checkout entry, capture/refund operations and fulfillment.

Use [Install for production](/platforms/bigcommerce-full#install-for-production) for the live-store handoff and the [configuration reference](/platforms/bigcommerce-full) for fast/mini cart and re-platforming. Complete [production readiness](https://help.boltapp.com/developers/production-readiness-guides/). Configure production independently; do not copy sandbox keys or script hosts into a live theme.