How to Install The Legacy Checkout Button
The Bolt Checkout Button initiates the shopper’s checkout experience and can be placed across multiple pages on your store.
How to Set up Bolt’s Checkout Button
WARNING
This version of the Checkout Button will eventually be deprecated. Bolt recommends using the updated Checkout Button (v2).
1. Update Storefront Header
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 experience
- Log in to your Storefront Admin Console.
- Navigate to your storefront’s header file.
- Add the following
track.js
script:
<script
async
id="bolt-track"
type="text/javascript"
src="{CDN_URL}/track.js"
data-publishable-key="{PUBLISHABLE_KEY}"
></script>
- Add the following
connect.js
script:
<script
id="bolt-connect"
type="text/javascript"
src="{CDN_URL}/connect.js"
data-publishable-key="{PUBLISHABLE_KEY}"
></script>
- Replace
{PUBLISHABLE_KEY}
for both with the API Key found in your Merchant Dashboard under Administration > API. The publishable key is a long string of lower and upper case letters and numbers that consists of three sections. - Set the
CDN URL
for both, based on your environment:- Production:
https://connect.bolt.com
- Sandbox:
https://connect-sandbox.bolt.com
- Production:
2. Display Checkout button
Use the following HTML to display the Bolt Checkout Button element on your pages:
<div class="bolt-checkout-button bolt-multi-step-checkout"></div>
3. Call BoltCheckout.configure
Call BoltCheckout.configure
on pages where Bolt Checkout is enabled. You must use the Token
from order creation.
About Callbacks
- Callbacks are executed from your storefront domain, not Bolt’s IFrame
success
is the only required function; it must invokecallback()
after completing custom code.- If redirecting to an order confirmation page, consider adding code to the
close
function, which checks if an order was completed.
Example
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)
Get Frontend Analytics
Bolt also provides javascript callbacks during the checkout process that can be used to trigger any frontend analytics events.
TIP
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.
Passing configure a cart promise
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)
4. Test Checkout
After you have completed the previous sections, conduct a quick test to ensure the Bolt Checkout Button has been successfully implemented.
- Confirm
track.js
is present across all pages where Bolt Checkout is enabled. - Confirm that the Bolt Checkout button is visible.
- Confirm the Bolt Checkout modal loads upon selecting checkout.
- Confirm Total in Bolt Checkout modal matches the actual cart total.
Styling Options
Refer to our design guidelines when customizing your Checkout button.
NOTE
Reach out to your Customer Success Manager to make advanced customizations, such as changing the border radius of the checkout modal.
Button Width
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.
Button Color
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>
Credit Card Logos
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>