bc-checkout

BigCommerce Checkout Customization

Before writing code

Fetch live docs:

1. Fetch https://docs.bigcommerce.com/developer/docs/admin/checkout-and-cart/checkout-sdk/overview for Checkout SDK
2. Web-search site:developer.bigcommerce.com checkout api for Checkout API reference
3. Web-search bigcommerce embedded checkout headless for embedded checkout patterns

Checkout Architecture

Three Approaches

Approach	Where	Use Case
Native Checkout	BigCommerce storefront	Default — customize via SDK or theme
Embedded Checkout	External site (iframe)	Headless with BigCommerce-hosted checkout
Custom Checkout	Your own frontend	Fully custom using Checkout/Payments API

Checkout SDK

What It Is

A JavaScript SDK for customizing the native BigCommerce checkout:

• Renders checkout UI in a target DOM element
• Provides methods to interact with checkout state
• Fires events for checkout lifecycle
• Available as @bigcommerce/checkout-sdk npm package

Installation

npm install @bigcommerce/checkout-sdk

Core Methods

import { createCheckoutService } from '@bigcommerce/checkout-sdk';

const service = createCheckoutService();

// Load checkout
await service.loadCheckout(checkoutId);

// Get current state
const state = service.getState();
const checkout = state.data.getCheckout();

// Update shipping address
await service.updateShippingAddress(address);

// Select shipping option
await service.selectShippingOption(optionId);

// Apply coupon
await service.applyCoupon(code);

// Submit order
await service.submitOrder(orderPayload);

State Selectors

The state object provides selectors:

• getCheckout() — full checkout data
• getCart() — cart items and totals
• getCustomer() — customer info
• getShippingAddress() — shipping address
• getBillingAddress() — billing address
• getShippingOptions() — available shipping methods
• getPaymentMethods() — available payment methods
• getOrder() — completed order