Initialize Bolt

On each page, the Bolt client must be initialized before using any components.

if (Bolt != null) {
  initBolt()
} else {
  // Use `document.head` if the Bolt script is located in the document <head></head>
  // make sure you add the id "bolt-embed" to your Bolt script tag.
  document.body.querySelector("#bolt-embed")
    .addEventListener("load", initBolt, { once: true });
}

function initBolt() {
  const boltPublishableKey = YOUR_KEY;
  Bolt.initialize(boltPublishableKey);

  // start using Bolt
}

You can wrap this in a promise for ease of use if you want to easily reuse this logic across pages.

const boltReadyPromise = new Promise((resolve) => {
  if (Bolt == null) {
    resolve();
    return;
  }

  document.body.querySelector("#bolt-embed")
    .addEventListener("load", resolve, { once: true });
}).then(() => {
  const boltPublishableKey = YOUR_KEY;
  Bolt.initialize(boltPublishableKey);
});

async function initBolt() {
  await boltReadyPromise;

  // start using Bolt
}

Localization

You can also localize the Bolt modal by adding the language parameter when instantiating the Bolt modal. The value of this parameter must be in ISO format.

Bolt.initialize(boltPublishableKey, {
  language: "fr-CA",
});

Components

Account Creation Checkbox

Allow shoppers to opt out of Bolt Account creation.

Enable Bolt Shoppers to login to their Bolt Accounts on your store frontend.

Allow shoppers to authenticate their session as a Bolt user to accelerate login and checkout.

Payment Fields

Add Bolt's payment fields component to leverage the Bolt Tokenizer.

Signed In Button

Allow shoppers to confirm that they are signed into their Bolt Account.