📍 Bolt Help / Developers / Developer Guides / Checkout Setup / Checkout Everywhere Setup / Get and Display Bolt's Checkout Modal for Desktop

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.

For mobile implementations, use Bolt’s Checkout Webview URL method.

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.

CallbackEventNameType Description
“error_invalid_name” Name input by shopper was invalid.
“error_invalid_email” Email address input by shopper was invalid.
“error_invalid_address” Shopper’s address input by shopper was invalid.
“error_giftcard_unsuccessful” Giftcard was not successfully added to the cart.
“error_invalid_giftcertificate” Gift certificate was not successfully added to the cart.
“error_invalid_payment” Payment method input was not valid.
“error_discount_unsuccessful” Discount code was not successfully added to the cart.
“error_remove_discount_unsuccessful” Discount was not successfully removed from the cart.
“error_remove_giftcard_unsuccessful” Gift card was not successfully removed from the cart.
“error_shipping” Shipping methods weren’t found or available for the input shipping address.
“error_tax” Tax could not be calculated for items in cart.
“warn_invalid_address” Shipping address input is not valid.
“info_discount_successful” Discount code was successfully added to the cart.
“info_giftcard_successful” Giftcard was successfully added to the cart.
“info_giftcertificate_successful” Gift certificate was successfully added to the cart.
“info_address_added” Shipping address was successfully added.
“info_address_edited” Shipping address was successfully updated.

Resources

📖On This Page