The Checkout button loads the Bolt Checkout modal when selected. Shoppers can manage their credentials, payment methods, and shipping options from the modal.
Merchants can either use Bolt’s default styling for greater cross-network shopper recognition or customize the Checkout button to fit their own brand requirements using the guidelines in this article.
There are four acceptable placements for displaying the Checkout button. Each is listed in the following sections.
The Bolt Checkout button’s dimensions must be consistent with all other payment buttons displayed. If displayed alone, the Checkout button’s width must fill its container.
Vertical layouts are the most friendly across all devices. The Bolt Checkout button should be displayed first (on top). Bolt recommends displaying no more than 3 alternative payment options to your shoppers.
Horizontal layouts should display the Bolt Checkout button on the far-right as the last payment option. Bolt recommends displaying no more than 3 alternative payment options to your shoppers.
Merchants can customize the following aspects of the Bolt Checkout button:
Merchants can display alternative payment methods as badges beneath the Checkout button.
Merchants can choose to either hide the default Bolt icon or display a lock icon instead.
The Checkout button displays
Checkout by default. Ensure any custom CTA clearly indicates to shoppers that the Checkout button initiates the checkout process.
The Checkout button’s border-radius is
4px by default. Merchants can adjust this to match their storefront’s styling.
The Checkout button’s font-family is
SF Pro Text by default. Merchants can update the font-family to match their storefront’s styling.
The Checkout button’s background-color is Bolt blue (#006CFF) by default. Merchants can update the background-color to be consistent with their brand. Bolt recommends verifying that your color choice passes accessibility requirements by visiting https://accessible-colors.com.
|background||String; accepts hex, rgba||
|background-hover||String; accepts hex, rgba|
|letter-spacing||em or px||
|font-color||String; accepts hex, rgba|
|font-family||String; accepts list of fonts||
|height||String; can be pixels or percentage for dynamic||
|width||String; can be pixels or percentage for dynamic||
|border-color||String; accepts hex, rgba||
|border-color-hover||String; accepts hex, rgba||