CartProvider
The <CartProvider /> component wraps your app and provides cart state and methods to all child components via the useShoppingCart() hook.
At the root level of your app, wrap your Root app in the <CartProvider />
Basic Example
import ReactDOM from 'react-dom'
import { CartProvider } from 'use-shopping-cart'
import App from './App'
// Remember to add your public Stripe key
const stripeKey = process.env.YOUR_STRIPE_PUBLIC_KEY
ReactDOM.render(
<CartProvider stripe={stripeKey} currency="USD">
<App />
</CartProvider>,
document.getElementById('root')
)With Custom Persistence Settings
import ReactDOM from 'react-dom'
import { CartProvider } from 'use-shopping-cart'
import App from './App'
ReactDOM.render(
<CartProvider
stripe={process.env.STRIPE_PUBLISHABLE_KEY}
currency="USD"
// Optional: Customize cart persistence
shouldPersist={true} // Enable persistence (default: true)
persistKey="my-custom-cart" // Custom localStorage key (default: 'use-shopping-cart')
>
<App />
</CartProvider>,
document.getElementById('root')
)Your product object must adhere to the following shape:
const products = [
{
// Line item name to be shown on the Stripe Checkout page
name: 'Bananas',
// Optional description to be shown on the Stripe Checkout page
description: 'Yummy yellow fruit',
// A unique identifier for this item
id: 'id_banana001',
// price in smallest currency unit (e.g. cent for USD)
price: 400,
currency: 'USD',
// Optional image to be shown on the Stripe Checkout page
image:
'https://images.unsplash.com/photo-1571771894821-ce9b6c11b08e?w=400&h=400&fit=crop&q=80'
}
]Additionally, you must verify the cartItems on the server-side before creating the CheckoutSession. For this you can use the validateCartItems() helper.
Complete Props Reference
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
stripe | string | Yes | - | Stripe publishable key (pk_...) for client-side checkout redirect |
currency | string | No | 'USD' | ISO currency code (e.g., 'USD', 'EUR', 'GBP') |
language | string | No | Browser language | Language for currency formatting (e.g., 'en-US', 'fr-FR') |
shouldPersist | boolean | No | true | Enable cart persistence in localStorage |
persistKey | string | No | 'use-shopping-cart' | localStorage key name for cart data |
storage | StorageAdapter | No | localStorage | Custom storage adapter for persistence |
Configuring Checkout Features
Modern Stripe features (phone collection, promotion codes, automatic tax, custom fields, shipping options, etc.) should be configured server-side when creating the checkout session in your endpoint.
Example:
// In your server endpoint
const session = await stripe.checkout.sessions.create({
mode: 'payment',
line_items,
success_url: `${origin}/success`,
cancel_url: origin,
// Configure all Stripe features here
phone_number_collection: { enabled: true },
allow_promotion_codes: true,
automatic_tax: { enabled: true }
})See Stripe's Checkout Session API for all available options.
Client-only Checkout Mode (Removed)
⚠️ REMOVED: Client-only mode has been removed in v4.0. Please use checkout-session mode.
See the migration guide for help upgrading.