The Bolt Checkout Button initiates the shopper’s checkout experience and can be placed across multiple pages on your store.

How to Set up Bolt’s Checkout Button

The updated checkout button is easier to install and loads faster. Setup steps differ based on the cart platform used. Reach out to your Customer Success Manager for feature enablement before completing the following sections.

Step 1: Update Storefront Header

There are two javascript tags you must add to your storefront’s header:

• track.js: gathers essential fraud signals
• connect.js: displays the checkout button and launch the checkout experience

1. Log in to your Storefront Admin Console.
2. Navigate to your storefront’s header file.
3. Add the following track.js script:

<script
  async
  id="bolt-track"
  type="text/javascript"
  src="{CDN_URL}/track.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
></script>

4. Add the following connect.js script:

<script
  id="bolt-connect"
  type="text/javascript"
  src="{CDN_URL}/connect.js"
  data-publishable-key="{PUBLISHABLE_KEY}"
></script>

5. Replace {PUBLISHABLE_KEY} for both with the API Key found in your Merchant Dashboard.
   • Production Dashboard
   • Sandbox Dashboard
6. Set the CDN URL for both, based on your environment:
   • Production: https://connect.boltapp.com
   • Sandbox: https://connect-sandbox.boltapp.com

Step 2: Add Checkout Button Element to Pages

1. Use the following HTML to display the Bolt Checkout Button element on your pages:

<div data-tid="instant-bolt-checkout-button">
  <object data={`${buttonUrlBase}?publishable_key=${props.publishableKey}`} />
</div>

2. Update the publishableKey value. This is found in your Merchant Dashboard under Administration > API. The publishable key is a long string of lower and upper case letters and numbers that consists of three sections.

ButtonURLBase

The buttonUrlBase referenced depends on the environment being used:

• Sandbox: https://connect-sandbox.boltapp.com/v1/checkout_button
• Production: https://connect.boltapp.com/v1/checkout_button

Step 3: Call BoltCheckout.configure

Call BoltCheckout.configure on pages where Bolt Checkout is enabled. You must use the Token from order creation. To implement product page checkout, BoltCheckout.configureProductCheckout may be called. Learn more about this by reading about how to implement Custom Carts.

About Callbacks

• Callbacks are executed from your storefront domain, not Bolt’s IFrame
• success is the only required function; it must invoke callback() after completing custom code.
• If redirecting to an order confirmation page, consider adding code to the close function, which checks if an order was completed.

The transaction argument

success receives the completed transaction. The fields most integrations need:

The object carries considerably more than this, including nested consumer, credit card, and risk detail. Treat anything not listed above as subject to change, and read the transaction reference from reference rather than from transaction_reference or id.

Example

// Minimal local types. Bolt does not ship frontend type definitions,
// so declare only what your storefront uses.
interface BoltCart {
  orderToken: string;
}

interface BoltTransaction {
  reference: string;
  status?: string;
  cart?: { order_reference?: string };
}

interface BoltCallbacks {
  close?: () => void;
  success: (transaction: BoltTransaction, callback: () => void) => void;
  onCheckoutStart?: () => void;
  onPaymentSubmit?: () => void;
}

declare const BoltCheckout: {
  configure(cart: BoltCart | Promise<BoltCart>, hints: unknown, callbacks: BoltCallbacks): void;
};

const cart: BoltCart = {
  orderToken: "",
};

const callbacks: BoltCallbacks = {
  success: (transaction, callback) => {
    // Store transaction.reference against your order before returning.

    // **IMPORTANT** callback must be executed at the end of this function
    callback();
  },

  close: () => {
    // Not called when your create_order response includes order_received_url
    // and authorization succeeds.
  },
};

BoltCheckout.configure(cart, {}, callbacks);

var cart = {
  orderToken: '',
}
var hints = {
  prefill: {
    firstName: 'Bolt',
    lastName: 'User',
    email: 'email@example.com',
    phone: '1112223333',
    addressLine1: '1235 Howard St',
    addressLine2: 'Unit D',
    city: 'San Francisco',
    state: 'California',
    zip: '94103',
    country: 'US',
    // ISO Alpha-2 format expected
  },
}
var callbacks = {
  check: function () {
    // This function is called just before the checkout form loads.

    // This is a hook to determine whether Bolt can proceed

    // with checkout at this point. This function MUST return a boolean.

    return true
  },

  onCheckoutStart: function () {
    // This function is called after the checkout form is presented to the user.
  },

  onEmailEnter: function (email) {
    // This function is called after the user enters their email address.
  },

  onShippingDetailsComplete: function (address) {
    // This function is called when the user proceeds to the shipping options page.
    // This is applicable only to multi-step checkout.
    // When available the first parameter will contain a user's name and address info.
  },

  onShippingOptionsComplete: function () {
    // This function is called when the user proceeds to the payment details page.
    // This is applicable only to multi-step checkout.
  },

  onPaymentSubmit: function () {
    // This function is called after the user clicks the pay button.
  },

  success: function (transaction, callback) {
    // This function is called when the Bolt checkout transaction is successful.

    // ... Add your code here ...

    // **IMPORTANT** callback must be executed at the end of this function

    callback()
  },

  close: function () {
    // This function is called when the Bolt checkout modal is closed.
    // This will not be called when create_order endpoint returns a valid URL
    // and authorization is successful
  },
}
BoltCheckout.configure(cart, hints, callbacks)

Get Frontend Analytics

Bolt also provides javascript callbacks during the checkout process that can be used to trigger any frontend analytics events.

Passing configure a cart promise

To avoid a situation where the storefront attempts to call Bolt Checkout before it generates an orderToken, Bolt sometimes recommends passing configure a cart promise.

boltCart = new Promise(function (resolve, reject) {
  $.ajax({
    url: '/getOrderToken',
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json;charset=utf-8',
    success: function (data) {
      BoltReturnJSON = JSON.parse(data.d)
      if (BoltReturnJSON.token !== 'none') {
        resolve({
          orderToken: BoltReturnJSON.token,
        })
      }
    },
    error: function (e) {
      reject(e)
    },
  })
})
BoltCheckout.configure(boltCart, hints, callback)

Step 4: Test Checkout

After you have completed the previous sections, conduct a quick test to ensure the Bolt Checkout Button has been successfully implemented.

1. Confirm track.js is present across all pages where Bolt Checkout is enabled.
2. Confirm that the Bolt Checkout button is visible.
3. Confirm the Bolt Checkout modal loads upon selecting checkout.
4. Confirm Total in Bolt Checkout modal matches the actual cart total.

Styling Options

Refer to our Checkout Button Style Guide for UX best practices when displaying or customizing the Checkout button for your storefront.