Checkout JS SDK provides you with the tools you need to build your own checkout solution for a BigCommerce store.
The SDK has a convenient application interface for starting and completing a checkout flow. Behind the interface, it handles all the necessary interactions with our Storefront APIs and other payment SDKs. So you can focus on creating a checkout experience that is unique to your business.
The Checkout JS SDK is a client-side JavaScript library for our Storefront Checkout API. It provides all the methods that are required to complete a checkout process, for example: * Sign in a customer and begin the checkout process * Set shipping, billing and other required information * Pay for the order and complete the checkout process
The library also provides integrations with all the payment methods supported by Optimized One Page Checkout, such as: * PayPal Express * Braintree * Square * Amazon * Klarna * AfterPay
Using this library in conjunction with your favorite UI framework, it is possible to build a bespoke checkout UI for a store, that can be augmented with additional features. With Bigcommerce's Open Checkout, we provide Checkout JS as our reference implementation of a checkout written in React to get you started.
The Checkout JS SDK is the easiest way to build a bespoke checkout into your store’s theme. We have created the following tutorials to help you get started. * Open Checkout Quick Start - In this quick start tutorial, we’ll configure our development environment and make a code change to a fork of BigCommerce’s Open Checkout. * Installing Custom Checkouts - This article will outline how to package a custom checkout file, and install a custom checkout via the control panel.
You can install this library using npm.
npm install --save @bigcommerce/checkout-sdk
You can also use this library by referencing a CDN URL.
https://checkout-sdk.bigcommerce.com/v1/loader.js
The main benefit of using the script URL above is that your application can automatically receive backward compatible updates and bug fixes from us, without having to manually perform an upgrade.
Once the above script is loaded, checkoutKitLoader instance will be available in the window and you can use it to load the module that you need for your application. i.e.:
const module = await checkoutKitLoader.load('checkout-sdk');
const service = module.createCheckoutService();
Currently, there are three modules available for public use: * checkout-sdk: This is the main module that contains all the public exports of the package. * checkout-button: This sub-module can be used to initialize checkout buttons in the storefront once a cart is created (i.e.: cart page). * embedded-checkout: This sub-module can be used to embed our Optimized One-Page Checkout in non-native storefronts (i.e.: Wordpress).
Please refer to the usage guide below for more information on each of them.
We release the library in ES5 so you don't have to do additional transpilation in order to use it. However, you do require the Promise polyfill if you need to support older browsers, such as IE11.
On the other hand, the CDN version already contains the necessary polyfill for it to work in IE11.
The library is framework agnostic. In other words, you can use it with any UI framework or library you want.
As our Storefront Web APIs currently don't support CORS, you will not be able to use the library outside of a BigCommerce store.
Below is a guide on how to use this library.
First, you have to create a CheckoutService instance.
import { createCheckoutService } from '@bigcommerce/checkout-sdk';
const service = createCheckoutService();
Once you have the instance, you should load the current checkout and present the information to the customer.
const checkoutId = '0cfd6c06-57c3-4e29-8d7a-de55cc8a9052';
const state = await service.loadCheckout(checkoutId);
console.log(state.data.getCheckout());
The checkout object contains various information about the checkout process, such as the cart, the grand total etc... Once the data is loaded, you can retrieve it by calling the getters provided by the state object.
console.log(state.data.getCart());
console.log(state.data.getBillingAddress());
console.log(state.data.getShippingAddress());
In addition, you can also access the store's checkout configuration. The configuration object contains information about various settings related to checkout, such as the default currency of the store etc...
console.log(state.data.getConfig());
Before you can collect other checkout information from the customer, you should first ask them to sign in. Once they are signed in, the checkout state will be populated with their personal details, such as their addresses.
const state = await service.signInCustomer({ email: 'foo@bar.com', password: 'password123' });
console.log(state.data.getCustomer());
Alternatively, you can ask the customer to continue as a guest. Note that in this scenario, the email is stored as part of the billing address, but is also accessible via the cart object.
const state = await service.continueAsGuest({ email: 'foo@bar.com' });
console.log(state.data.getCart().email);
console.log(state.data.getBillingAddress().email);
Customers could sign in using a single-use link sent to their email address. Once they click on the link, they will be redirected back to the store as a signed-in user.
Learn more about it at CheckoutService#sendSignInEmail
If your checkout settings allow it, your customers could continue the checkout as guests (without signing in).
const state = await service.continueAsGuest({ email: 'foo@bar.com' });
console.log(state.data.getBillingAddress());
console.log(state.data.getCustomer());
Learn more about it at CheckoutService#continueAsGuest
To set a shipping destination for the checkout, you should ask the customer to provide an address. To do that, you need to render a set of form fields for collecting their details. The set of fields also includes all the custom fields configured by the merchant.
const fields = state.data.getShippingAddressFields();
fields.forEach(field => {
console.log(field);
});
To set the shipping address, you can collate all the address fields and construct a request payload.
const address = {
firstName: 'Test',
lastName: 'Tester',
address1: '12345 Testing Way',
city: 'Some City',
stateOrProvinceCode: 'CA',
postalCode: '95555',
countryCode: 'US',
phone: '555-555-5555',
email: 'test.tester@test.com'
};
const state = await service.updateShippingAddress(address);
console.log(state.data.getShippingAddress());
console.log(state.data.getShippingOptions());
Once the address is provided, you can get a list of shipping options available for the address and the cost for each option.
Then, you can ask the customer to select a shipping option from the list.
const address = state.data.getShippingAddress();
const options = state.data.getShippingOptions();
const state = await service.selectShippingOption(options[address.id].id);
console.log(state.data.getSelectedShippingOption());
In order to complete the checkout process, you also need to collect a billing address from the customer.
const state = await service.updateBillingAddress(address);
console.log(state.data.getBillingAddress());
You may also want to accept any coupon code or gift certificate provided by the customer.
const state = await service.applyCoupon('COUPON');
console.log(state.data.getOrder().coupon);
const state = await service.applyGiftCertificate('GIFT');
console.log(state.data.getOrder().giftCertificate);
You can also allow the customer to remove any coupon code or gift certificate previously applied.
await service.removeCoupon('COUPON');
await service.removeGiftCertificate('GIFT');
You can also enable bot protection to prevent bots and other types of automated abuse from creating orders. Note that enabling this feature increases checkout friction, which may affect conversions. As such, we recommend leaving this feature out if your store is not encountering bots.
await service.executeSpamCheck();
Learn more about it at CheckoutService#executeSpamCheck.
Before you can place the order, you need to collect payment details from the customer. In order to do that, you must first load and present a list of available payment methods to the customer.
const state = await service.loadPaymentMethods();
console.log(state.data.getPaymentMethods());
After that, you should initialize the payment method so they are ready to accept payment details.
await service.initializePayment({ methodId: 'braintree' });
Some payment methods require you to provide additional initialization options. For example, Amazon requires a container ID in order to initialize their payment widget. Otherwise, they will not work properly.
await service.initializePayment({
methodId: 'amazon',
amazon: {
container: 'walletWidget',
},
});
And then, you can ask the customer to provide payment details required by their chosen payment method. If the method is executed successfully, you will create an order and thereby complete the checkout process.
We may require human verification to be completed before payment can be processed, which will be handled during this step.
const payment = {
methodId: 'braintree',
paymentData: {
ccExpiry: { month: 10, year: 20 },
ccName: 'BigCommerce',
ccNumber: '4111111111111111',
ccType: 'visa',
ccCvv: 123,
},
};
const state = await service.submitOrder({ payment });
console.log(state.getOrder());
window.location.assign('/order-confirmation');
If the submission is successful, you should redirect the customer to the order confirmation page.
Also, for some payment methods, the customer may be asked to enter their payment details on an external website. For these methods, you must finalize the order when the customer is redirected back to the checkout page in order to complete the checkout flow. This should be done in the background before you present any checkout information to the customer.
await service.loadCheckout();
try {
await service.finalizeOrderIfNeeded();
window.location.assign('/order-confirmation');
} catch (error) {
if (error.type !== 'order_finalization_not_required') {
throw error;
}
}
// Render the checkout view
Similarly, if the order finalization is successful, you should redirect the customer to the order confirmation page.
Once the order is created, you can make a call to retrieve it. This should be done on the order confirmation page so that you can present the final order to the customer.
const orderId = 123;
const state = await service.loadOrder(orderId);
console.log(state.data.getOrder());
Your UI should react to changes to the checkout state. When there is a ch
$ claude mcp add checkout-sdk-js \
-- python -m otcore.mcp_server <graph>