๐Ÿ“ Bolt Help / Core Products / Accounts / Direct API / Implement Payment Fields

Implement Payment Fields

Add Bolt's payment fields component to leverage the Bolt Tokenizer.

Add payment fields to your store’s front end to leverage Boltโ€™s out-of-the-box credit card tokenization and enable Bolt account creation.

Payment Fields Component

What is Tokenization?


TIP

Instead of using Bolt’s hosted payment fields, you can tokenize cards directly with Bolt’s Tokenizer

1. Create and Mount the Payment Fields Component

Mount the payment fields component to attach the iframe to your siteโ€™s DOM.

let paymentComponent = boltEmbedded.create("credit_card_input");
let el = document.getElementById("div-to-inject-field-into");
paymentComponent.mount(el);
// or 
paymentComponent.mount("#div-to-inject-field-into");

2. Style the Payment Fields Component (Optional)

  1. Insert the following script to your frontend into the </head> or at the end of the closing </body> tag.
  2. 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



`style` Properties


Examples

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


In-Field Label



Floating Label



Outside Label



Error Handling



Expiration Date


3. Validate Payment Fields (Optional)

Bolt-hosted fields include in-line validation that appear as the user types. You can receive error information via listener when a user blurs from the payment field if you want to render your own credit card error UI.

paymentComponent.on("error", function(e) {
  // e instanceof Error === true
  // e.message === "CC Field incomplete"
});

4. Tokenize Payment Information

Call paymentComponent.tokenize() when you are ready to retrieve a token for the entered payment information. It contains all information necessary to call the Authorize Payment API as its parameter.

// tokenize is tokenization result or error
const tokenize = await paymentComponent.tokenize();

Success

{ 
	"token": "a1B2c3D4e5F6G7H8i9J0k1L2m3N4o5P6Q7r8S9t0", // token created by Bolt tokenizer. Used in a card authorization request. 
	"bin": "411111",
	"last4": "1111",
	"expiration": "2023-12",
	"network": "visa",
	"postal_code": "94105" // this will be undefined when billing zip is not being collected
}

Errors

{ 
	"type": "tokenization_error", 
	"message": "Tokenizer could not save credit card" 
} 

WARNING

If you do not authorize payment within 15 minutes of retrieving the token, you must call paymentComponent.tokenize() again.

(Optional) Unmount Payment Fields

To remove the component from the DOM, call the unmount function on the component instance. It is not required to remove this component before mounting the next component.

paymentFields.unmount(); // Promise<void>

Next Step

After you implement Payment Fields, you can implement the Account Checkbox, which allows shoppers to create a Bolt account and store information via the Bolt Accounts API.

๐Ÿ“–On This Page
Filter by Section
Filter by Topic