From bigcommerce-commerce
Customizes BigCommerce checkout using JavaScript SDK for native UI, embedded iframe, and server APIs for headless or fully custom flows.
How this skill is triggered — by the user, by Claude, or both
Slash command
/bigcommerce-commerce:bc-checkoutThis skill is limited to the following tools:
The summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Fetch live docs**:
Fetch live docs:
https://developer.bigcommerce.com/docs/storefront/cart-checkout/checkout-sdk for Checkout SDKsite:developer.bigcommerce.com checkout api for Checkout API referencebigcommerce embedded checkout headless for embedded checkout patterns| 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 |
A JavaScript SDK for customizing the native BigCommerce checkout:
@bigcommerce/checkout-sdk npm packagenpm install @bigcommerce/checkout-sdk
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);
The state object provides selectors:
getCheckout() — full checkout datagetCart() — cart items and totalsgetCustomer() — customer infogetShippingAddress() — shipping addressgetBillingAddress() — billing addressgetShippingOptions() — available shipping methodsgetPaymentMethods() — available payment methodsgetOrder() — completed orderSubscribe to state changes:
service.subscribe(state => {
const checkout = state.data.getCheckout();
// React to checkout state changes
});
Embed BigCommerce's checkout in an external site via iframe:
redirect_urls.checkout_url)postMessage events from the iframeInclude the Embedded Checkout script:
import { embedCheckout } from '@bigcommerce/checkout-sdk';
embedCheckout({
url: checkoutUrl,
containerId: 'checkout-container',
onComplete: () => { /* order placed */ },
onError: (error) => { /* handle error */ },
onFrameLoad: () => { /* checkout loaded */ },
});
X-Frame-Options and CSP headers to allow embeddingPOST /v3/carts with line itemsPOST /v3/checkouts/{id}/billing-addressPOST /v3/checkouts/{id}/consignmentsPUT /v3/checkouts/{id}/consignments/{consignmentId}POST /v3/checkouts/{id}/ordersPOST /v3/payments (via Payments API)| Endpoint | Method | Purpose |
|---|---|---|
/v3/carts | POST | Create cart |
/v3/carts/{id}/items | POST, PUT, DELETE | Manage cart items |
/v3/carts/{id}/redirect_urls | POST | Get checkout URL |
/v3/checkouts/{id} | GET | Get checkout state |
/v3/checkouts/{id}/billing-address | POST, PUT | Set billing address |
/v3/checkouts/{id}/consignments | POST | Add shipping info |
/v3/checkouts/{id}/coupons | POST, DELETE | Apply/remove coupons |
/v3/checkouts/{id}/orders | POST | Create order from checkout |
Checkout uses templates/pages/checkout.html with special handling:
empty layout (minimal wrapper)Override checkout JavaScript for UI modifications:
github.com/bigcommerce/checkout-jsFetch the Checkout SDK docs and BigCommerce Checkout API reference for exact method signatures, state structure, and configuration options before implementing.
npx claudepluginhub orcaqubits/agentic-commerce-skills-plugins --plugin bigcommerce-commerceBuild headless BigCommerce storefronts using Catalyst Next.js template, GraphQL Storefront API, REST APIs, embedded checkout, and decoupled architecture patterns.
Builds Shopify checkout UI extensions with Preact/Remote DOM rendering, UI primitives, extension targets, checkout APIs, metafield access, post-purchase extensions, and thank-you page customization. Use for customizing Shopify checkout.
Builds Shopify Checkout UI Extensions with Polaris for custom merchant functionality at checkout points like product info, shipping, payment, order summary, Shop Pay. Includes CLI scaffolding.