BigCommerce Quickstart

Your integration steps

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

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.

Platform support

This guide is for BigCommerce. Supporting guides for this platform: fraud protection only, checkout links, theme configuration, and production installation. Other platforms and custom web apps have their own quickstarts.

1. Install app

1. On your test store, install the Bolt sandbox app. 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

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

1. Open sandbox API keys. 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. Under Endpoints, confirm the app populated https://api.bigcommerce.com/stores/{store_hash}/v2/ for your store.

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

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:

<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:

<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:

<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

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 before launch.

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.

<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

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

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: 4111 1111 1111 1111, expiration 03/30, CVV 737.
4. Open sandbox 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

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

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

Use Install for production for the live-store handoff and the configuration reference for fast/mini cart and re-platforming. Complete production readiness. Configure production independently; do not copy sandbox keys or script hosts into a live theme.