Skip to content

Latest commit

 

History

History
113 lines (91 loc) · 3.53 KB

CartProvider.mdx

File metadata and controls

113 lines (91 loc) · 3.53 KB
Raw
title id
CartProvider
cart-provider

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 { 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
    cartMode="checkout-session"
    stripe={stripeKey}
    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 product 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 { 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
    // Mode configuration for Stripe: payment or subscription
    mode="payment"
    // The mode for how you want to use the hooks. 'client-only' and 'checkout-session' are the options
    cartMode="client-only"
    stripe={stripeKey}
    // 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'
  }
]