📍 Bolt / Developers / Developer Guides / Checkout Setup / Embedded Checkout Setup / Guest Checkout for Embedded

Guest Checkout for Embedded

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="{CDN_URL}/embed.js"
></script>

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 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: Exp. String value in the format YYYY-MM Billing postal code. String value of zip code.
options.disabled boolean Default is false
options.zip_code boolean Default is false. Show and require billing zip code field.

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

Please note that if you are making a call from an embedded Bolt payment field, the header parameter X-is-Embedded-Checkout must be set to true.

You are now ready to begin post checkout setup.

👎

How did we do?

📖On This Page