use-shopping-cart

CartProvider

CheckoutSession mode

Creating a CheckoutSession server-side allows for a more flexible and powerful integration but requires a server component (e.g. a Netlify Function).

At the root level of your app, wrap your Root app in the <CartProvider />

import ReactDOM from 'react-dom'
import { loadStripe } from '@stripe/stripe-js'
import { CartProvider } from 'use-shopping-cart'
import App from './App'
// Remember to add your public Stripe key
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API_PUBLIC)
ReactDOM.render(
<CartProvider mode="checkout-session" stripe={stripePromise} currency="USD">
<App />
</CartProvider>,
document.getElementById('root')
)

When using CheckoutSessions 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 (stock keeping unit)
sku: 'sku_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://my-image.com/image.jpg'
}
]

Additionally, you must verify the cartItems on the server-side before creating the CheckoutSession. For this you can use the validateCartItems() helper.

Client-only Checkout mode

To operate a checkout page without any server component you need to enable client-only checkout mode and insert your porudct information in your Stripe Dashboard:

At the root level of your app, wrap your Root app in the <CartProvider />

import ReactDOM from 'react-dom'
import { loadStripe } from '@stripe/stripe-js'
import { CartProvider } from 'use-shopping-cart'
import App from './App'
// Remember to add your public Stripe key
const stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API_PUBLIC)
ReactDOM.render(
<CartProvider
// The mode for how you want to use the hooks. 'client-only' and 'checkout-session' are the options
mode="client-only"
stripe={stripePromise}
// The URL to which Stripe should send customers when payment is complete.
successUrl="http://localhost:3000/success"
// The URL to which Stripe should send customers when payment is canceled.
cancelUrl="http://localhost:3000"
currency="USD"
// https://stripe.com/docs/payments/checkout/client#collect-shipping-address
allowedCountries={['US', 'GB', 'CA']}
// https://stripe.com/docs/payments/checkout/client#collect-billing-address
billingAddressCollection={true}
>
<App />
</CartProvider>,
document.getElementById('root')
)

When operating in client-only mode you must set the successUrl and cancelUrl props on the CartProvider component, and the product object must adhere to the following shape:

const products = [
{
name: 'Bananas',
// sku ID from your Stripe Dashboard
sku: 'sku_GBJ2Ep8246qeeT',
// 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://my-image.com/image.jpg'
}
]
Edit this page on GitHub