Build a custom checkout on BigCommerce using the Checkout SDK

Steps

1. Install the Checkout SDK: npm install @bigcommerce/checkout-sdk, or reference the script-based distribution from the BigCommerce CDN for browser environments
2. Initialize the SDK with createCheckoutService() and call checkoutService.loadCheckout(checkoutId) where checkoutId comes from the storefront cart cookie or the Cart REST API response
3. Call checkoutService.loadShippingOptions() to fetch available shipping methods; call checkoutService.selectShippingOption({ shippingOptionId }) to select one
4. Collect billing/shipping addresses with checkoutService.updateBillingAddress(address) and checkoutService.updateShippingAddress(address); both accept an address object with firstName, lastName, address1, city, stateOrProvinceCode, postalCode, countryCode
5. Initialize a payment method with checkoutService.initializePayment({ methodId: 'METHOD_ID' }) and submit with checkoutService.submitOrder({ payment: { methodId, paymentData } })
6. Handle checkout state changes by subscribing to checkoutService.subscribe(state => ...) which fires on every state mutation