About

Shopper Experience

The shopper can enter credit card information into Bolt’s payment fields. If the shopper opts into a Bolt Accounts during checkout, the information entered into the fields will be added to their account.

Placement & Styling

Place the credit card component into your payment section where they can securely enter their credit card information.

Bolt offers extensive customization for Payment Fields via our V3 Component Styling options.

Implementation

Step 1: Create and Mount the Payment Fields Component

const paymentComponent = Bolt.create("credit_card_input");
paymentComponent.mount("#payment-section");

Step 2: Style the Payment Fields Component (Optional)

See our style guide

Step 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"
}

Step 5: (Optional) Unmount Payment Fields

To remove the component from the DOM, call the unmount function on the component instance.

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