How to Install The Legacy Checkout Button

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

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 under Administration > API. The publishable key is a long string of lower and upper case letters and numbers that consists of three sections.
   • Production Dashboard
   • Sandbox Dashboard
6. Set the CDN URL for both, based on your environment:
   • Production: https://connect.bolt.com
   • Sandbox: https://connect-sandbox.bolt.com

2. Display Checkout button

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

<div class="bolt-checkout-button bolt-multi-step-checkout"></div>

3. Call BoltCheckout.configure

Call BoltCheckout.configure on pages where Bolt Checkout is enabled. You must use the Token from order creation.

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.

Example

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)

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 design guidelines when customizing your Checkout button.

Button Width

Customize the Button’s size using these three classes:

• .flexible: Button fills parent container and is fully responsive.
• .large-width: Button fills parent container up to 600px wide; useful for forms.
• .responsive : Button fills page on mobile; stays fixed at 264px for desktop.

Button Color

Customize the Button’s colors using these elements:

• --bolt-primary-action-color: affects CTA buttons and step highlights
• --bolt-primary-action-box-shadow-color: affects shadow of CTA button
• --bolt-button-hover-color: affects button hover color
• --bolt-shipping-selected-color: affects radio button color
• --bolt-control-border-focused-color: affects background color of selected radio items (shipping, checkboxes) and banners

<div
  class="bolt-checkout-button"
  style="--bolt-primary-action-color:#339900;
--bolt-button-hover-color:#1a9900;"
></div>

Credit Card Logos

Use the .with-cards class to show credit card logos below the checkout button. This class is compatible with both the .flexible and .large-width button width classes and center relative to the button’s size.

<div class="bolt-checkout-button with-cards"></div>