BigCommerce Checkout JavaScript SDK
The "@bigcommerce/checkout-sdk" is an essential npm package designed specifically for developers looking to craft a customized checkout experience on the BigCommerce platform. This SDK streamlines the integration process, making it simpler to implement complex checkout functionalities without having to manage the intricate details of the underlying commerce infrastructure. It supports a wide variety of payment methods and gateways, ensuring that businesses can offer a seamless transaction experience. Additionally, the SDK is updated regularly to comply with the latest commerce features and security standards, offering peace of mind and reliability.
To get started with enhancing your BigCommerce store’s checkout process, you can simply run "npm install @bigcommerce/checkout-sdk". This command installs the SDK into your project, setting up a robust foundation for building a checkout interface that can handle custom workflows, multiple shipping options, and dynamic pricing models. The module also provides extensive documentation and sample codes to help developers integrate the checkout system quickly and effectively. Not only does this reduce development time, but it also ensures that the implementation is optimized for performance and security, crucial for maintaining consumer trust and satisfaction in ecommerce transactions.
By utilizing the "@bigcommerce/checkout-sdk", developers can take full control over the checkout experience, enhancing it with custom logic and tailored features that cater to the specific needs of their audience. This personalization capability not only helps in improving the user experience but also assists in increasing conversion rates, as a streamlined and user-friendly checkout process directly influences purchasing decisions.
Core dependencies of this npm package and its dev dependencies.
@bigcommerce/bigpay-client, @bigcommerce/data-store, @bigcommerce/form-poster, @bigcommerce/memoize, @bigcommerce/request-sender, @bigcommerce/script-loader, @braintree/browser-detection, @types/card-validator, @types/iframe-resizer, @types/reselect, @types/shallowequal, card-validator, core-js, current-script-polyfill, iframe-resizer, local-storage-fallback, lodash, messageformat, query-string, reselect, rxjs, shallowequal, tslib, yup, @babel/core, @babel/preset-env, @bigcommerce/eslint-config, @microsoft/api-extractor, @nrwl/cli, @nrwl/devkit, @nrwl/eslint-plugin-nx, @nrwl/jest, @nrwl/nx-plugin, @nrwl/workspace, @square/web-payments-sdk-types, @types/applepayjs, @types/glob, @types/grecaptcha, @types/jest, @types/lodash, @types/node, @typescript-eslint/eslint-plugin, @typescript-eslint/eslint-plugin-tslint, @typescript-eslint/parser, babel-loader, check-node-version, conventional-recommended-bump, eslint, eslint-config-prettier, eslint-plugin-import, eslint-plugin-prettier, eslint-plugin-react, eslint-plugin-react-hooks, jest, jest-junit, nx, prettier, regenerator-runtime, request, semver, source-map-loader, standard-version, ts-jest, ts-loader, typedoc, typedoc-plugin-markdown, typescript, webpack, webpack-assets-manifest, webpack-bundle-analyzer, webpack-cli, webpack-node-externals
A README file for the @bigcommerce/checkout-sdk code repository. View Code
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:
The library also provides integrations with all the payment methods supported by Optimized One Page Checkout, such as:
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.
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:
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 change, you should present the latest information to the customer. You can do that by subscribing to the checkout state.
The subscriber gets triggered every time there is a change in the state. If the change affects your view, you should re-render it in order to reflect the latest update. The subscriber provides a state object which you can use to get specific checkout information. It also provides meta information such as loading statuses, error details etc...
service.subscribe(state => {
// Return the current checkout
console.log(state.data.getCheckout());
// Return an error object if unable to load checkout
console.log(state.errors.getLoadCheckoutError());
// Return `true` if in the process of loading checkout
console.log(state.statuses.isLoadingCheckout());
});
If you are only interested in certain parts of the state, you can filter out irrelevant changes by providing a filter function to the subscriber.
const filter = state => state.data.getCart();
service.subscribe(state => {
console.log(state.data.getCart())
}, filter);
You can retrieve the same state object outside of a subscriber if there is a need for it.
const state = service.getState();
console.log(state);
If you need to cancel a request before it is complete, you can provide a Timeout object when making the request. An example use case might be to implement a UI that updates the shipping address whenever there is a change - so you want to abort any pending requests and only take the latest one.
import { createTimeout } from '@bigcommerce/checkout-js-sdk';
const address = { countryCode: 'US' };
const timeout = createTimeout();
service.updateShippingAddress(address, { timeout });
timeout.complete(); // Aborts the update
We provide an extensive API reference.
The functions provided by the SDK are:
We actively maintain and add new features to the library in order to support our official checkout (Optimized Checkout). But we also accept contributions from the community.
If you want to contribute, please refer to the contribution guide.
MIT