Prerequisites

These instructions assume that you:

• Have an active Bolt Merchant Account
• Have reviewed Bolt’s API collection
• Have implemented endpoints on your server for all of the following:
  • tax calculations
  • shipping options
  • order creation

Set Up Account Detection

Step 1: Install Scripts

Add the following scripts to every page where a shopper can check out from your store.

Connect.js

This script enables account validation and launches Bolt’s Checkout Modal.

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

Track.js

This script enables the collection of fraud signals.

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

Embed.js

This script is for hosted payment fields.

<script
    id="bolt-embed" 
    type="module" 
    src="{BASE_URL}/embed.module.js"
    data-publishable-key="{your-bolt-publishable-key}" 
    async
></script>

<script
    id="bolt-embed" 
    type="text/javascript" 
    src="{BASE_URL}/embed.js"
    data-publishable-key="{your-bolt-publishable-key}" 
    async
></script>

<script
    id="bolt-embed" 
    type="text/javascript" 
    src="{BASE_URL}/embed.js"
    data-publishable-key="{your-bolt-publishable-key}" 
></script>

Base URL

The Base URL ({BASE_URL}) should be one of the following, depending on the phase of your implementation process:

• Production: connect.bolt.com
• Sandbox: connect-sandbox.bolt.com

The value should replace {BASE_URL} in the script to create a full file string: connect.bolt.com/embed.module.js.

Publishable Key

Your Bolt Publishable Key ({your-bolt-publishable-key})can be found in the Merchant Dashboard. Go to the Developers tab, then scroll to Keys and find “Publishable Key.”

Step 2: Add an Email or Phone Input Field

Bolt Accounts displays upon recognizing a shopper that already participates in the Bolt Network. To enable this shopper detection, you must prompt the shopper to provide their email address or phone number. This can either be done at the beginning of the checkout process, or beforehand (outside of checkout).

Step 3: Check for a Bolt Account

Send a GET request to https://api.bolt.com/v1/account/exists to check whether a Bolt account exists for a user.

• On Success + True: Open the Bolt Checkout modal using the connect.js script previously installed.
• On Success + False: Send the shopper to your guest checkout experience.
• On Failure: Send the shopper to your guest checkout experience.

Success Response

{
    "has_bolt_account": true,
    ...
}

Error Response

{
    "result": {
        "success": false
    },
    "errors": [{
          "code": 25,
          "message": "The input is missing a required parameter."
    }]
}

Generate an Order Token

This step is done automatically if you use a managed plugin or the BigCommerce platform. Otherwise, send a POST request to Bolt’s Order Token Generation endpoint (https://api.bolt.com/v1/merchant/orders).

Set Up Checkout Modal

Step 1: Initiate Checkout

For shoppers with Bolt Accounts, trigger the Bolt Checkout Modal (via connect.js) and include the following parameters from before:

BoltCheckout.configure({orderToken: token}, null, callbacks, {accountIdentifiers: {phone, email}});

Bolt automatically displays a login prompt, giving shoppers access to their saved shipping and payment information.

• On Success: Open Bolt’s Checkout modal.
• On Failure: Send the shopper to guest checkout.

Step 2: Handle Checkout Steps Using Javascript 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.
  },

  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()
  },
  
  onNotify: function(event: CallbackEvent) {
    if (event.eventName === ‘error_open’) {
      // This function will be called when an error occurs during Logged In Checkout.
      // If you receive this error, proceed to guest flow.
    }
  },

  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)

You are now ready to begin post checkout setup.