📍 Bolt Help / Products / Ignite 🔥 / API Implementation / Styling / Payment Component Styling - Version 2

Payment Component Styling - Version 2

Style Bolt's payment fields to match your branding.

Page Contents

Click to expand.

WARNING

Bolt has released a new version of our styling methodology, found in our [Component Styling]({{ ref “style-components-v3” }}) guide.

This version of Component Styling will only affect the components listed in our Payment Fields guide.

Implementation

Insert the following script to your frontend into the </head> or at the end of the closing </body> tag.
Edit the default values, or add more arguments and properties as desired.

Script

This script contains four components you can customize to fit your styling needs:

Component	Description
`styles`	An object that you can configure to change the appearance of the checkout fields.
`field`	An object containing `bolt.create()`, which creates the checkout fields. This function enables configuration of payment fields as arguments.
`field.on()`	An optional function that takes `blur` or `focused` as arguments. Use these functions to blur and focus fields as users click on them.
`field.mount()`	Takes the `div` where you want to embed the Bolt checkout modal as an argument.

<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 #credit-card-input-target to match the id of your store's frontend input field
</script>

`bolt.create` Arguments

Click to expand.

Argument	Description	Accepted Values
`expiryType`	Combines or separates credit card month/year input fields.	`separated-dropdown` `separated-text` `separated-dropdown-numerical` `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`
`showFieldMissingErrors`	Displays error messages when a selected field is left empty after the shopper clicks off the field.	Boolean.

`style` Properties

Click to expand.

Property	Example
`fontFamily`	`Helvetica Neue,Helvetica,Arial,sans-serif`
`inputTextSize`	`12px`
`inputTextColor`	`#000000`
`inputPaddingSize`	`12px 0`
`labelTextSize`	`9px`
`labelFontStyle`	`italic`
`labelFontWeight`	`300`
`placeholderTextColor`	`#808080`
`errorTextColor`	`#FF0000`
`errorFontWeight`	`600`
`errorFontSize`	`11px`
`warningTextColor`	`#FFA500`
`warningFontWeight`	`600`
`warningFontSize`	`11px`
`borderSize`	`3px`
`borderStyle`	`none none solid none`
`borderRadius`	`0`