📍 Bolt Help / Developers / Developer Guides / Checkout Setup / Embedded Checkout Setup / Embedded One-Click Checkout Setup / Guest Checkout for Embedded One-Click

Guest Checkout for Embedded One-Click

Prerequisites

These instructions assume that you:

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

Parameter name Type Description
options object Set of options to create the Bolt payment fields.
options.styles partial A set of CSS properties to style the input fields. (fontSize, fontFamily, fontColor, fontWeight, borderColor, borderWidth, borderRadius, backgroundColor, borderColorOnError, fontColorOnError, borderColorOnFocus, fontColorOnFocus)
options.value object Values to prefill. Prefill supported for: card expiration string value in the format YYYY-MM, billing postal code, and string value of ZIP code.
options.disabled boolean Default is false.
options.showBillingZIPField boolean Default is false. Show and require billing zip code field.
options.showErrors boolean Default is false. Display errors and error codes.
options.renderSeparateFields boolean Default is false.

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.

Code number Cause Description
1000 Credit card number is missing “Card number required”
2000 Invalid credit card number “Invalid card number”
3000 Credit card network is not supported “Unsupported card network”
1001 Card’s expiration date is missing “Expiration required”
2001 Card’s expiration date is invalid “Invalid expiration”
3001 Card’s expiration date is past “Card expired”
1002 CVV is missing “CVV required”
2002 CVV is invalid “Invalid CVV”
1003 Billing ZIP is missing “Billing ZIP required”
2003 Billing ZIP is invalid “Invalid billing ZIP”
# checkout # setup # embedded # one-click
← Embedded One-Click Implementation Overview
Logged-in Checkout for Embedded One-Click →
📖On This Page