Implement Payment Fields

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.


What is Tokenization?


1. Create and Mount the Payment Fields Component

Bolt embedded payment fields.

Mount the payment fields component to attach the iframe to your site’s DOM.

let paymentComponent = boltEmbedded.create("payment_component");
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)

The following customization options are available with the payment fields component:

Parameter name Type Description
options object Set of options to create the Bolt payment fields.
options.styles partial A set of CSS properties to style the input fields. (fontSize, fontFamily, fontColor, fontWeight, borderColor, borderWidth, borderRadius, backgroundColor, borderColorOnError, fontColorOnError, borderColorOnFocus, fontColorOnFocus)
options.value object Values to prefill. Prefill supported for: card expiration string value in the format YYYY-MM, billing postal code, and string value of ZIP code.
options.disabled boolean Default is false.
options.showBillingZIPField boolean Default is false. Show and require billing zip code field.
options.showErrors boolean Default is false. Display errors and error codes.
options.renderSeparateFields boolean Default is false.
Example
let authorizationComponent = boltEmbedded.create("payment_component",  {disabled: false} );

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.

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

4. Tokenize Payment Information

Call paymentField.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 paymentField.tokenize();
Success
{ 
	"token": "a1B2c3D4e5F6G7H8i9J0k1L2m3N4o5P6Q7r8S9t0", // token from Bolt tokenizer. Used in authorization or createExternalToken call. 
	... 
}
Errors
{ 
	"type": "tokenization_error", 
	"message": "Tokenizer could not save credit card" 
} 

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

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