The Bolt Checkout Button initiates the shopper’s checkout experience and can be placed across multiple pages on your store.
The updated checkout button is easier to install and loads faster. Setup steps differ based on the cart platform used. Reach out to your Customer Success Manager for feature enablement before completing the following sections.
There are two javascript tags you must add to your storefront’s header:
track.js: gathers essential fraud signalsconnect.js: displays the checkout button and launch the checkout experiencetrack.js script:<script
async
id="bolt-track"
type="text/javascript"
src="{CDN_URL}/track.js"
data-publishable-key="{PUBLISHABLE_KEY}"
></script>
connect.js script:<script
id="bolt-connect"
type="text/javascript"
src="{CDN_URL}/connect.js"
data-publishable-key="{PUBLISHABLE_KEY}"
></script>
{PUBLISHABLE_KEY} for both with the API Key found in your Merchant Dashboard.
CDN URL for both, based on your environment:
https://connect.bolt.comhttps://connect-sandbox.bolt.comUse the following HTML to display the Bolt Checkout Button element on your pages:
<div class="bolt-checkout-button"></div>
<div data-tid="instant-bolt-checkout-button">
<object data={`${buttonUrlBase}?publishable_key=${props.publishableKey}`} />
</div>
publishableKey value. This is found in your Merchant Dashboard.The buttonUrlBase referenced depends on the environment being used:
https://connect-sandbox.bolt.com/v1/checkout_buttonhttps://connect.bolt.com/v1/checkout_buttonCall BoltCheckout.configure on pages where Bolt Checkout is enabled. You must use the Token from order creation.
success is the only required function; it must invoke callback() after completing custom code.close function, which checks if an order was completed.var cart = {
orderToken: '',
}
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
},
}
var callbacks = {
check: function () {
// This function is called just before the checkout form loads.
// This is a hook to determine whether Bolt can proceed
// with checkout at this point. This function MUST return a boolean.
return true
},
onCheckoutStart: function () {
// This function is called after the checkout form is presented to the user.
},
onEmailEnter: function (email) {
// This function is called after the user enters their email address.
},
onShippingDetailsComplete: function (address) {
// This function is called when the user proceeds to the shipping options page.
// This is applicable only to multi-step checkout.
// When available the first parameter will contain a user's name and address info.
},
onShippingOptionsComplete: function () {
// This function is called when the user proceeds to the payment details page.
// This is applicable only to multi-step checkout.
},
onPaymentSubmit: function () {
// This function is called after the user clicks the pay button.
},
success: function (transaction, callback) {
// This function is called when the Bolt checkout transaction is successful.
// ... Add your code here ...
// **IMPORTANT** callback must be executed at the end of this function
callback()
},
close: function () {
// This function is called when the Bolt checkout modal is closed.
// This will not be called when create_order endpoint returns a valid URL
// and authorization is successful
},
}
BoltCheckout.configure(cart, hints, callbacks)
Bolt also provides javascript callbacks during the checkout process that can be used to trigger any frontend analytics events.
Use the hints object to pre-populate user information when a shopper begins checkout. Hints can also be a Promise; these fields are not required, and any combination may be used.
To avoid a situation where the storefront attempts to call Bolt Checkout before it generates an orderToken, Bolt sometimes recommends passing configure a cart promise.
boltCart = new Promise(function (resolve, reject) {
$.ajax({
url: '/getOrderToken',
type: 'POST',
dataType: 'json',
contentType: 'application/json;charset=utf-8',
success: function (data) {
BoltReturnJSON = JSON.parse(data.d)
if (BoltReturnJSON.token !== 'none') {
resolve({
orderToken: BoltReturnJSON.token,
})
}
},
error: function (e) {
reject(e)
},
})
})
BoltCheckout.configure(boltCart, hints, callback)
After you have completed the previous sections, conduct a quick test to ensure the Bolt Checkout Button has been successfully implemented.
track.js is present across all pages where Bolt Checkout is enabled.Refer to our Checkout Button Style Guide for UX best practices when displaying or customizing the Checkout button for your storefront.