commerce-js-integration

Install @chec/commerce.js, initialize one module-level Commerce client with your public key, and use commerce.cart.retrieve(), add(), update(), and remove() to manage cart state. Share the cart across components with a React Context provider and a useCart hook.

Generate a checkout token from the cart with commerce.checkout.generateToken(cartId, {type: 'cart'}), fetch live shipping options with getLive(), then call commerce.checkout.capture() with customer, shipping, fulfillment, and a Stripe payment_method_id from Stripe.js.

The public key is safe for browser code and can read products and manage carts. The secret key can also manage orders and must only be used server-side, such as in Next.js API routes or build-time data fetching.

Commerce.js stores the cart ID in localStorage under chec_cart_id. If localStorage is unavailable or blocked, the cart will not persist. Also ensure you create a single Commerce client instance rather than a new one per render.

Commerce.js fits small catalogs under roughly 1,000 products without custom fulfillment logic. For larger catalogs, complex fulfillment, or enterprise requirements, a full platform like Shopify or commercetools is a better fit.