📍 Bolt Help / Core Products / Managed Checkout / Manage Bolt for BigCommerce / Set Up Bolt for BigCommerce

Set Up Bolt for BigCommerce

Bolt has launched a new Merchant Dashboard experience, which is currently in Beta. See this page for help documentation that reflects the new dashboard.


This guide is for Managed Checkout on BigCommerce. If you need to install Bolt One-Click Checkout for BigCommerce, see Bolt One-Click For BigCommerce for setup instructions.

Prerequisites

  • You must have an approved Bolt account before installing Bolt Checkout to your store. Sign up for a free account.
  • Contact BigCommerce Support so their team can enable Bolt CheckoutOS (Managed Checkout) on your store.
  • If you are migrating from a different cart platform, see the Re-platforming section.

1. Install Plugin

  1. To use Bolt in a BigCommerce production store, install the Bolt App (production). To use Bolt with a BigCommerce Sandbox Store, install the Bolt App (sandbox).
  2. Select Get This App
  3. Select Install > Confirm.

2. Add a Bolt User to BigCommerce

  1. Log in to BigCommerce.
  2. Navigate to Settings or Account Settings > Users.
  3. Select Create a User Account.
  4. Add dev@bolt.com as a user by completing the following fields:
  • Email: dev@bolt.com
  • Status: Active
  • User Role: Sales Manager
  • System Admin Permissions: (enable the following)
    • Manage Settings
    • Manage Payments
    • Store Design
    • Design Mode
    • Store Logs
    • Use Script Manager
  • Single Click Apps: Enable “Bolt Checkout”
  • Enable WebDav: Yes
  1. Save.

3. Verify Webhook Endpoints in Merchant Dashboard

  1. Log in to the Bolt Production Merchant Dashboard and Sandbox Merchant Dashboard.
  2. Navigate to Developer > API.
  3. Scroll to Merchant API.
  4. Verify the Webhook URL has populated automatically:

https://api.bigcommerce.com/stores/{{store-hash}}/v2/

Don’t see a Webhook URL? Try to re-install the plugin — if that doesn’t work, please contact Bolt for assistance.

4. Add Bolt as Payment Method in BigCommerce

  1. Log in to the Bolt Merchant Dashboard.
  2. Navigate to Developer > API > Keys.
  3. Copy the following keys:
    • API Key
    • Signing Secret
    • Publishable Key The publishable key is a long string of lower and upper case letters and numbers that consists of three sections. publishable key
  4. In a new tab, Log in to BigCommerce.
  5. Navigate to Store Setup > Payments.
  6. Scroll to Online Payment Methods > Bolt.
  7. Select Setup.
  8. Paste your keys into the required fields.
  9. Save.

For Legacy Migrations: Remember to check your theme files and remove/update any references to your previous API keys. For assistance with this step, reach out to your Customer Success Manager.

5. Choose a Bolt Product

There are two main product options available for merchant using Bolt’s BigCommerce plugin: Full Bolt Checkout with Fraud Protection and Bolt Fraud Protection.

  1. Log in to BigCommerce.
  2. Navigate to Store Setup > Payments.
  3. Scroll to Online Payment Methods > Bolt.
  4. Select Bolt Settings.
  5. Update Configuration Mode to your-product-choice.
  6. Save.

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

6. Add Scripts & Buttons

Bolt relies on a few scripts to deliver its checkout and SSO Commerce experience to your shoppers: connect.js, and track.js. For this step, you must add Bolt’s scripts and buttons to every page where the cart is displayed in your storefront. This requires a few theme updates. Typically, these updates happen to the following files:

Cart Page (Usually one of the following locations:)

  • templates > pages > cart.html
  • templates > components > cart > totals.html

Fast Cart Page

  • templates > components > cart > preview.html

Mini Cart Page

  • templates > components > common > cart-preview.html

Navigate to Store Front > My Themes > Advanced > Edit Theme Files to view these files. We recommend copying your theme before making any changes.

Add Scripts

  1. Log in to BigCommerce.
  2. Navigate to your theme files.
  3. Add the following scripts to both your sandbox and production environments (above the first div tag):

insert scripts here

The value of var totalClassName in both Production and Sandbox scripts will vary based on the merchant’s theme. You must verify the script is targeting the correct class for the Bolt integration to work.

Production Scripts

<!--Get your PUBLISHABLE_KEY from the Bolt Merchant Dashboard.-->
<script
  id="bolt-connect"
  type="text/javascript"
  src="https://connect.bolt.com/connect-bigcommerce.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
  data-storefront-api-token="{{settings.storefront_api.token}}"
  route-public-token="{ROUTE_PUBLIC_TOKEN}">
</script>
<!-- This script automatically updates the Bolt cart when an item is updated. Only needs to be added on the cart page. -->
<script>
  var config = { childList: true, subtree: true };
  var totalClassName = "cart-total-value"; // Replace cart-total-value with your BigCommerce theme. 
  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>
<!-- This script automatically updates the Bolt cart when an item is updated. Use this script on the fast cart/ mini cart pages. -->
<script>
  if (window.BoltCheckout && window.BoltCheckout.reloadBigCommerceCart) {
      window.BoltCheckout.reloadBigCommerceCart();
  } else {
      console.log("window.BoltCheckout.reloadBigCommerceCart is not defined");
  }
</script>
<!-- Include on all webpages in production. An easy way to accomplish this is via BigCommerce's Footer Scripts section. -->
<script
  id="bolt-track"
  type="text/javascript"
  src="https://connect.bolt.com/track.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
  data-shopping-cart-id="BigCommerce">
</script>

Sandbox Scripts

<!--Get your PUBLISHABLE_KEY from the Bolt Merchant Dashboard.-->
<script
  id="bolt-connect"
  type="text/javascript"
  src="https://connect-sandbox.bolt.com/connect-bigcommerce.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
  data-storefront-api-token="{{settings.storefront_api.token}}"
  route-public-token="{ROUTE_PUBLIC_TOKEN}">
</script>
<!-- This script automatically updates the Bolt cart when an item is added in the cart page.-->
<script>
  var config = { childList: true, subtree: true };
  var totalClassName = "previewCartCheckout-price";
  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();
      }
      totalPrice = newPrice;
  };
  new MutationObserver(callback).observe(document.body, config);
</script>
  1. Replace the PUBLISHABLE_KEY.
  2. Replace the ROUTE_PUBLIC_TOKEN if you are using Route shipping insurance or remove the line from the script.

Add Buttons

  1. Log in to BigCommerce.
  2. Navigate to your theme files.
  3. Add the following to both your production and sandbox environments in the same places where your original checkout button can be found.

Production

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

Sandbox

<div data-tid="instant-bolt-checkout-button">
<object data="https://connect-sandbox.bolt.com/v1/checkout_button?publishable_key=PUBLISHABLE_KEY">
</object>
</div>
  1. Replace PUBLISHABLE_KEY with your publishable key found in the Bolt Merchant Dashboard.
  2. Add the following script to hide the original checkout button to prevent it from displaying.

The original checkout button’s name may vary depending on your existing theme. Make sure the correct button is named in the querySelector to properly hide it.

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

Optional Configuration

Embeddable Account Editing

Embeddable Account Editing is currently available to participating Beta merchants. Contact your Bolt CSM for more information.

Take the following steps to setup Embeddable Account Editing on your storefront.

  1. Navigate to Storefront and open your theme files.
  2. Add the following scripts to the Head of All Pages in your store using Scripts Manager, ensuring the targets of the address_component.mount and payment_component.mount functions are the correct <div> elements in steps 3. and 4.
<script 
  id="bolt-embed" 
  type="text/javascript" 
  src="https://connect-{env}.bolt.com/embed.js" // connect-sandbox.bolt.com or connect.bolt.com 
  data-publishable-key=${MERCHANT_PUBLISHABLE_KEY} 
  async></script>

<script>
  var embedScript = document.querySelector('#bolt-embed');
  embedScript.addEventListener('load', function() {  
    var BoltEmbedded = window.Bolt(${MERCHANT_PUBLISHABLE_KEY});
    var address_component = BoltEmbedded.create("shopper_address");
    var payment_component = BoltEmbedded.create("shopper_payment");
    address_component.mount("#addresses_list");
    payment_component.mount("#payments_list"); 
  });        
</script>
  1. Create a <div> somewhere in your theme files where you want to render the customer’s account information.

Example

<div id="addresses_list" />

addresses embedded edit

You may choose to remove the existing code from the customer payment method file and render the Bolt component here. This file will vary in location and name depending on your BigCommerce Storefront theme.

  1. Create a <div> somewhere in your theme files where you want to render the customer’s payment method information.

Example

<div id="payments_list" />

payment embedded edit

You may choose to remove the existing code from the customer payment method file and render the Bolt component here. This file will vary in location and name depending on your BigCommerce Storefront theme.

Re-platforming

When re-platforming, you must keep in mind all of the following:

  • Use the Merchant Dashboard for order refunds. Do not use a platform-specific backoffice flow that’s connected to a deprecated account division.
  • Disable all of your old webhooks for the deprecated account division.
📖On This Page
Filter by Section
Filter by Topic