Get and Display Bolt's Checkout Modal for Desktop

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

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.

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.

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