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.

TIP
Instead of using Bolt’s hosted payment fields, you can tokenize cards directly with Bolt’s Tokenizer
Step 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");
Step 2: Style the Payment Fields Component (Optional)
Component Styling - Version 3 (New!)
Style the Login Status, Payment Fields, and Account Checkbox components.
Get StartedStep 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"
});
Step 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.