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

Install Script

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

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

Initialize Hosted Fields

Step 1: Create an Instance of Bolt

let boltEmbedded = Bolt("<<my_publishable_key>>");

Step 2: Create Payment Field

let paymentField = boltEmbedded.create("payment_field");
let el = document.getElementById("div-to-inject-field-into");
paymentField.mount(el);
// or 
paymentField.mount("#div-to-inject-field-into");

Field Options

Step 3: Validate Payment Fields

Bolt hosted fields will include in-line validation that appear as the user types. You also can receive error information via listener when a user blurs from the payment field.

paymentField.on("error", function(e) {
  // e instanceof Error === true
  // e.message === "CC Field incomplete"
});

Step 3: Tokenize Payment Information

// tokenize is tokenization result or error
const tokenize = await paymentField.tokenize();

Authorize Payment

Step 1: Submit a Payment Authorization POST Request

Build a POST request to send to Bolt’s servers at https://api.bolt.com/v1/merchant/transactions/authorize (see Bolt’s Authorize a Card API Reference).

You are now ready to begin post checkout setup.

Error codes

The error codes listed below may be used to affect the behavior of your host page, based on the given state of Bolt’s hosted payment fields. For example, using these error code responses, you may create your own validation errors, disable the pay button, or determine other behaviors.