Guest Checkout for Embedded One-Click

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-embedded" 
    type="text/javascript" 
    src="{BASE_URL}/embed.js"/>

Base URL Options:

• Production: connect.bolt.com/embed.js
• Sandbox: connect-sandbox.bolt.com/embed.js

Initialize Hosted Fields

1. Create an Instance of Bolt

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

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

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"
});

3. Tokenize Payment Information

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

Authorize Payment

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.