Select a New Payment Method for a Shopper's Account
Learn how to enable shoppers to select from saved payment methods or add a new one while managing their account through your storefront.
Bolt’s embedded component library includes a component that enables shoppers to update their payment method from their merchant storefront account.
The component syncs with the shopper’s Bolt account to retrieve previously saved payment methods and addresses, and it can populate a newly added payment method or address back to their Bolt account.
Before You Start
These instructions assume that you:
1. Install Script
Add the following script to the page where a shopper can manage their payment methods:
Embed.js
<script
id="bolt-embed"
type="text/javascript"
src="{BASE_URL}/embed.js"
data-publishable-key="{your-bolt-publishable-key}"
></script>
Base URL Options
The Base URL ({BASE_URL}) should be one of the following, depending on the phase of your implementation process:
- Production:
https://connect.bolt.com
- Sandbox:
https://connect-sandbox.bolt.com
The value should replace {BASE_URL} in the script to create a full file string: connect.bolt.com/embed.js.
Bolt Publishable Key
Your Bolt Publishable Key ({your-bolt-publishable-key})can be found in the Merchant Dashboard. Go to the Developers tab, then scroll to Keys and find “Publishable Key.”
2. Create an Instance of Bolt
const bolt = Bolt("<<my_publishable_key>>");
3. Create Payment Selector Component
const selector = bolt.create("payment_selector");
4. Update Payment Method for User
The appropriate page configuration depends on if you use Bolt SSO.
Merchants Using Bolt SSO
// this will not show anything and can be done at page load if desired
await selector.mount("<<target element id>>");
// when you want to trigger a selection
const result = await selector.selectPayment();
if (!result) {
// Handle issue with the selector (shouldn't happen, but could)
} else if ("error" in result) {
// shopper is not authenticated. If merchant is supporting Bolt SSO, please ask shopper to log in and try again
} else if ("cancelled" in result) {
// user cancelled the selection
} else {
// result should be something like:
// {
// "type": "PaymentSelectionResult",
// "payment_type": "credit_card",
// "credit_card": {
// "id": "...",
// "last4": "...",
// "bin": "...",
// "expiration": 4076006400000,
// "network": "visa",
// "display_network": "Visa"
// }
// }
}
Merchants Without Bolt SSO
// this will not show anything and can be done at page load if desired
await selector.mount("<<target element id>>");
// when you want to trigger a selection
const result = await selector.selectPayment({externalSubscriptionUserID: shopper_external_id});
if (!result) {
// Handle issue with the selector (shouldn't happen, but could)
} else if ("error" in result) {
if (result.error === "no external subscription user id") {
// missing required parameter: externalSubscriptionUserID. Please add the shopper's unique ID in selector.selectPayment(). For example selector.selectPayment({ externalSubscriptionUserID: 123 })
}
} else if ("cancelled" in result) {
// user cancelled the selection
} else {
// result should be something like:
// {
// "type": "PaymentSelectionResult",
// "payment_type": "credit_card",
// "credit_card": {
// "id": "...",
// "last4": "...",
// "bin": "...",
// "expiration": 4076006400000,
// "network": "visa",
// "display_network": "Visa"
// }
// }
}
This component returns tokenized card information. You’ll need to handle how to apply this update to the user’s account.