The Bolt Checkout Button initiates the shopper’s checkout experience and can be placed across multiple pages on your store.
This version of the Checkout Button will eventually be deprecated. Bolt recommends using the updated Checkout Button (v2).
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 bolt-multi-step-checkout"></div>
Call 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 design guidelines when customizing your Checkout button.
Reach out to your Customer Success Manager to make advanced customizations, such as changing the border radius of the checkout modal.
Customize the Button’s size using these three classes:
.flexible: Button fills parent container and is fully responsive..large-width: Button fills parent container up to 600px wide; useful for forms..responsive : Button fills page on mobile; stays fixed at 264px for desktop.Customize the Button’s colors using these elements:
--bolt-primary-action-color: affects CTA buttons and step highlights--bolt-primary-action-box-shadow-color: affects shadow of CTA button--bolt-button-hover-color: affects button hover color--bolt-shipping-selected-color: affects radio button color--bolt-control-border-focused-color: affects background color of selected radio items (shipping, checkboxes) and banners<div
class="bolt-checkout-button"
style="--bolt-primary-action-color:#339900;
--bolt-button-hover-color:#1a9900;"
></div>
Use the .with-cards class to show credit card logos below the checkout button. This class is compatible with both the .flexible and .large-width button width classes and center relative to the button’s size.
<div class="bolt-checkout-button with-cards"></div>