Use Cases

• You want to display the shopper’s order inside of a desktop-friendly checkout modal.
• You want to reduce checkout friction by pre-filling key details (such as the shopper’s name and address) as hints to the checkout webview.

Approach

Step 1: Install the Bolt Checkout Button

Follow our Step 1 and Step 2 of our Standard Checkout Button setup guide to install all required scripts and HTML elements.

Step 2: Generate an Order Token

Send a POST request to https://api.bolt.com/v1/remote_checkout/orders to create an order token. Order tokens are required to display the Bolt Checkout Modal.

Step 4: Call BoltCheckout.configure()

Initiate the Bolt Checkout modal using the BoltCheckout.configure() call. This call passes along all required merchant and product details, as well as any optional hints for a faster, pre-filled checkout experience.

1. Call BoltCheckout.configure() on pages where Bolt Checkout is enabled.

2. Include all of the following information:

   Field	Description
   order_token	Token created by sending a POST request to /v1/remote_checkout/orders. Bolt recommends refreshing the token on a new session.
   req_id	Unique request ID generated by the publisher.
   merchant_division_id	Bolt’s public ID for the merchant’s division.
   publisher_key	Unique identifier for the publisher.

3. Include any relevant hints.

   Hint	Description
   email	Email of the purchaser.
   phone	Phone of the purchaser.
   firstName	First name of the ship-to address; this can be different from the purchaser.
   lastName	Last name of ship-to address; this can be different from the purchaser.
   addressLine1	Address line 1 for shipping.
   addressLine2	Address line 2 for shipping.
   city	City for shipping.
   state	State for shipping; accepts both abbreviation and long form (e.g. CA, California).
   zip	Zip code for shipping; accepts short and long (5 and 9 digit) for US.

BoltCheckout.configure()

var cart = {
  orderToken: '',
  reqId: '',
  merchantDivisonId: '',
  publisherKey:'',
}
var hints = {
  prefill: {
    firstName: 'Bolt',
    lastName: 'User',
    email: 'email@example.com',
    phone: '1112223333',
    addressLine1: '1235 Howard St',
    addressLine2: 'Unit D',
    city: 'San Francisco',
    state: 'California',
    zip: '94103',
    country: 'US',
    // ISO Alpha-2 format expected
  },
}

Callbacks

onSuccess

Bolt redirects a shopper to the following destination after they have successfully completed checkout in webview. This URL includes a status of success and a way to pass important data.

"<APP_NAME>://boltPaymentResult?status=success&data=<PAYLOAD>"

Payload Example

In this example, we are passing the transaction_reference, merchant_order_number, and any key metadata along as a payload through the URL.

  "transaction_reference": "<< bolt transaction reference of created order >>"
  "merchant_order_number": "<< order reference on merchants side >>"
  "metadata": "<<metadata passed by publisher in webview>>"

Close

Bolt redirects a shopper to the following destination when they decide to exit the checkout webview before completing their purchase.

"<APP_NAME>://boltPaymentResult?status=close"

onNotify

Publishers can capture event logging through the onNotify callback for all of the following event types.

Resources

• Checkout Modal Styling
• Full Publisher API
• Create Order Token Endpoint
• Environment Details
• Error Codes