Install Bolt on BigCommerce

Complete these steps in order. Steps 1 through 5 happen in BigCommerce and the Merchant Dashboard; Step 6 edits your theme files.

Prerequisites

• An approved Bolt merchant account. Sign up if you do not have one.
• Bolt Checkout enabled on your store. Contact BigCommerce Support to request it.
• If you are migrating from a different cart platform or Bolt account, read Re-platforming first.

Step 1: Install plugin

1. Install the Bolt App (production) on a production store. To test on a BigCommerce sandbox store, install the Bolt App (sandbox) instead.
2. Select Get This App.
3. Select Install > Confirm.

Expected result: Bolt appears under Store Setup > Payments > Online Payment Methods.

Step 2: Add a Bolt user to BigCommerce

1. Log in to BigCommerce.
2. Go to Settings or Account Settings > Users.
3. Select Create a User Account.
4. Add dev@boltapp.com with these settings:
   • Email: dev@boltapp.com
   • Status: Active
   • User Role: Sales Manager
   • System Admin Permissions: Manage Settings, Manage Payments, Store Design, Design Mode, Store Logs, Use Script Manager
   • Single Click Apps: enable Bolt Checkout
   • Enable WebDav: Yes
5. Select Save.

Step 3: Verify webhook endpoints in Merchant Dashboard

1. Log in to the production Merchant Dashboard or the sandbox Merchant Dashboard, matching the app you installed.
2. Go to Administration > Webhooks.
3. Scroll to Endpoints.
4. Confirm the webhook URL populated automatically as https://api.bigcommerce.com/stores/{store_hash}/v2/.

Step 4: Add Bolt as payment method in BigCommerce

1. In the Merchant Dashboard, go to Administration > API.
2. Copy the API Key, Signing Secret, and Publishable Key. The publishable key is a long string of letters and numbers in three sections.
3. In a new tab, log in to BigCommerce and go to Store Setup > Payments.
4. Under Online Payment Methods > Bolt, select Setup.
5. Paste your keys into the required fields and select Save.

Step 5: Choose a Bolt product

The app supports two modes: Full Bolt Checkout with Fraud Protection and Bolt Fraud Protection.

1. In BigCommerce, go to Store Setup > Payments.
2. Under Online Payment Methods > Bolt, select Bolt Settings.
3. Set Configuration Mode to your product choice.
4. Select Save.

For manual captures, set Manual Orders Transaction Type to Authorize Only.

Step 6: Add scripts & buttons

Bolt delivers checkout and SSO Commerce through two scripts, connect-bigcommerce.js and track.js. Add the scripts and the Bolt button to every template that shows the cart. In the Cornerstone theme these are:

• Cart page: templates/pages/cart.html or templates/components/cart/totals.html
• Fast cart: templates/components/cart/preview.html
• Mini cart: templates/components/common/cart-preview.html

To edit them, go to Store Front > My Themes > Advanced > Edit Theme Files. Copy your theme before making changes.

Add scripts

Add the following scripts above the first div tag in each template. The examples use production hosts; on a sandbox store, use https://connect-sandbox.boltapp.com/connect-bigcommerce.js and https://connect-sandbox.boltapp.com/track.js instead.

Load the connect script. Replace {PUBLISHABLE_KEY} with your publishable key. Replace {ROUTE_PUBLIC_TOKEN} if you use Route shipping insurance, or remove that attribute.

<script
  id="bolt-connect"
  type="text/javascript"
  src="https://connect.boltapp.com/connect-bigcommerce.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
  data-storefront-api-token="{{settings.storefront_api.token}}"
  route-public-token="{ROUTE_PUBLIC_TOKEN}">
</script>

On the cart page, refresh the Bolt cart when the total changes. Set totalClassName to the class your theme uses for the cart total; the integration does not work if it targets the wrong element.

<script>
  var config = { childList: true, subtree: true };
  var totalClassName = "cart-total-value"; // Replace with your theme's cart total class.
  var totalPrice = "";
  var callback = function(mutationsList) {
      var elms = document.getElementsByClassName(totalClassName);
      if (elms.length == 0) {
          return;
      }
      var newPrice = elms[0].innerHTML;
      if (newPrice !== totalPrice && window.BoltCheckout && window.BoltCheckout.reloadBigCommerceCart ) {
          window.BoltCheckout.reloadBigCommerceCart();
      }
      totalPrice = newPrice;
  };
  new MutationObserver(callback).observe(document.body, config);
</script>

On the fast cart and mini cart templates, refresh the Bolt cart when the template renders.

<script>
  if (window.BoltCheckout && window.BoltCheckout.reloadBigCommerceCart) {
      window.BoltCheckout.reloadBigCommerceCart();
  } else {
      console.log("window.BoltCheckout.reloadBigCommerceCart is not defined");
  }
</script>

Include the tracking script on every page. BigCommerce's Footer Scripts section is a convenient place for it.

<script
  id="bolt-track"
  type="text/javascript"
  src="https://connect.boltapp.com/track.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
  data-shopping-cart-id="BigCommerce">
</script>

Add buttons

1. In the same templates, add the Bolt button where your original checkout button appears. Replace PUBLISHABLE_KEY with your publishable key, and use the connect-sandbox.boltapp.com host on a sandbox store.

<div data-tid="instant-bolt-checkout-button">
<object data="https://connect.boltapp.com/v1/checkout_button?publishable_key=PUBLISHABLE_KEY">
</object>
</div>

2. Hide the original checkout button. Update the querySelector to match your theme's checkout button.

<script>
  var originalCheckoutButton = document.querySelector(".cart-actions .button--primary");
  var boltButtons = document.getElementsByClassName("bolt-button-wrapper");

  for (var i = 0; i < boltButtons.length; i++) {
    boltButtons[i].style.display = 'block';
    }

  originalCheckoutButton.style.display = 'none';
</script>

Expected result: The Bolt button appears in place of the original checkout button on the cart, fast cart, and mini cart, and changing the cart total updates the Bolt cart.

Optional configuration

Embeddable account editing

Let shoppers edit their Bolt account details on your site with the component setup guides.

Set up Google Analytics

1. Link your Google Analytics account under Settings > Data Solutions > Web Analytics in the BigCommerce dashboard.
2. Use Script Manager to add the GA4 tag. Replace <Measurement ID> with your GA4 measurement ID.

<script async src="https://www.googletagmanager.com/gtag/js?id=<Measurement ID>"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '<Measurement ID>');
</script>

Re-platforming

When you move to BigCommerce from another platform or Bolt account division:

• Issue refunds from the Merchant Dashboard. Do not use a platform back-office flow connected to the deprecated account division.
• Disable the old webhooks for the deprecated account division.

Update plugin

Update the Bolt app when BigCommerce prompts you in the control panel so checkout keeps working as intended.