Customize Checkout Payment Fields

You can customize the Bolt checkout widget to fit the look and feel of your existing checkout flow. You can customize the following aspects of the Bolt checkout widget:

  • Checkout fields
  • Error handing
  • Card expiration date format

Before You Start

The example below assumes you have installed the Bolt script and authorized your site with your publishable key.

Customize Checkout

  1. Insert the following script to your frontend into the </head> or at the end of the closing </body> tag.

    <script>
        const styles = {
            "version": 2, // required 
            "fontFamily": "Helvetica Neue,Helvetica,Arial,sans-serif",
            "labelTextColor": "#767676",
            "focus": {
                "borderColor": "#3b5998",
                "labelTextColor": "#767676"
                },
            "hover": {
                "borderColor": "#3b5998"
                },
            "borderRadius": "3px",
            "labelFontStyle": "italic",
            "labelFontWeightSmall": "400"
            }
    
    
        const field = bolt.create("credit_card_input", {
            styles: styles,
            listeners: listeners,
            expiryType: "separated-dropdown",  // "separated-dropdown", "separated-text", "combined"
            labelStyle: "floating",            // "floating", "in-field", "outside-field"
            showBillingZIPField: false,        // true, false
            cardIconAlignment: "right"         // "left", "right"
        });
        field.on("focus", () => {
            console.log("focused");
        });
        field.on("blur", () => {
            console.log("blurred");
        });
        field.mount("#credit-card-input-target"); // change to match your store's input
    </script>
    
You may need to change the credit card input field within the field.mount function to match your frontend.

This code performs the following:

  • Creates a styles object that you can configure to change the appearance of the checkout fields.
  • Creates a field object containing the bolt.create function, which creates the checkout fields. This function takes the the configuration for the checkout fields as arguments.
  • Creates a field.on function as optional that takes blur or focused as arguments. Use these functions to blur and focus fields as users click through them.
  • Contains the field.mount function, which takes the div where you want to embed the Bolt checkout modal as an argument.

Reference

Arguments

The following table represents arguments you can pass to the bolt.create function to customize the checkout fields.

Argument Description Accepted Values
expiryType Combines or separates credit card month/year input fields. separated-dropdown, separated-text, combined
labelStyle Controls where the label belonging to a checkout field will appear. floating, in-field, outside-field
showBillingZIPField Shows or hides billing zip field. Boolean
cardIconAlignment Moves credit card provider icon to the left or right of the card number field. left,right

CSS Properties

The following is a list of all configurable CSS properties for the styles parameter:

  • fontFamily
  • inputTextSize
  • inputTextColor
  • labelTextSize
  • labelFontStyle
  • labelFontWeight
  • placeholderTextColor
  • errorTextColor
  • errorFontWeight
  • errorFontSize
  • warningTextColor
  • warningFontWeight
  • warningFontSize
  • borderSize

For the hover, focus, filled, disabled, filledDisabled, error, and warning selectors, the following properties are available:

  • backgroundColor
  • borderColor
  • labelTextColor

Examples

The following assets show how checkout field properties will appear and where, based on the type of field.


In-Field Label



Floating Label



Outside Label



Error Handling



Expiration Date


📖On This Page