๐Ÿ“ Bolt Help / Developers / Developer Guides / Checkout Setup / Embedded Checkout Setup / Embedded Accounts / Add a Payment Method to a Shopper's Account

Add a Payment Method to a Shopper's Account

To perform account actions, you need the following two private keys:


Important: Only use these private keys from your back-end. Never use them from front-end javascript or mobile apps.


You may need to create a proxy back-end API that accepts shopper input, looks up your credentials, and integrates with the Bolt API.

Add a Payment Method

Prerequisites

  1. Install embed.js:
    • Include the following script at the bottom of your target HTML page:
    <script
         id="bolt-embedded"
         type="text/javascript"
         src="https://connect-sandbox.bolt.com/embed-accounts.js"></script>
    
  2. Create an instance of Bolt

Create and Mount a Payment Component

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

Tokenize Payment Information

Refer to Guest Checkout for Embedded for additional details on payment tokenization.

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

Add Billing Address

Via Shopper Account ID:

// choose address ID from shopperโ€™s account. This field is a string
result.billing_address_id = some_address_id

Via Direct Input:

result.billing_address = {"street_address1":"124 N Main St",\
"locality":"Houston","region":"Texas","postal_code":"77002",\
"country_code":"US","country":"United States","name":"Test User",\
"first_name":"Test","last_name":"User","phone_number":"8325555554",\
"email_address":"sampleuser@example.com"}

Set Payment Method Type

Supported payment method types:

Type Value
Credit card card
result.type = "card"

Add a Payment Method

curl -X POST -H "X-Api-Key: $APIKEY" -H \
"Authorization: bearer $requestToken" -H \
"Content-Type: application/json" \
https://api-sandbox.bolt.com/v1/account/payment_methods -d \
<<resultObjectAsJson>>
๐Ÿ“–On This Page