use-shopping-cart
Getting started
Getting started
Installation
npm install --save @stripe/stripe-js use-shopping-cartoryarn add @stripe/stripe-js use-shopping-cart
The package needs to be configured with your account's secret key, which is available in the Stripe Dashboard. Require it with the key's value.
At the root level of your app, wrap your root component 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 keyconst stripePromise = loadStripe(process.env.REACT_APP_STRIPE_API_PUBLIC)ReactDOM.render( <CartProvider mode="client-only" stripe={stripePromise} successUrl="stripe.com" cancelUrl="twitter.com/dayhaysoos" currency="USD" allowedCountries={['US', 'GB', 'CA']} billingAddressCollection={true} > <App /> </CartProvider>, document.getElementById('root'))
Using the hook
The hook useShoppingCart()
provides several utilities and pieces of data for you to use in your application. The examples below won't cover every part of the useShoppingCart()
API but you can look at the API below.
Products Created on Stripe's Dashboard
This is for products you created on the Stripe Dashboard. Stripe provides you with a Price ID String. You don't need a server(less) set up to use this library this way unless you want more control over how the payments are handled.
import { useShoppingCart } from 'use-shopping-cart'import { Product } from './Product'import { CartItems } from './CartItems'const productData = [ { name: 'Bananas', price_id: 'price_GBJ2Ep8246qeeT', price: 400, image: 'https://www.fillmurray.com/300/300', currency: 'USD' }, { name: 'Tangerines', price_id: 'price_GBJ2WWfMaGNC2Z', price: 100, image: 'https://www.fillmurray.com/300/300', currency: 'USD' }]export function App() { /* Gets the totalPrice and a method for redirecting to stripe */ const { totalPrice, redirectToCheckout, cartCount } = useShoppingCart() return ( <div> {/* Renders the products */} {productData.map((product) => ( <Product product={product} /> ))} {/* This is where we'll render our cart */} <p>Number of Items: {cartCount}</p> <p>Total: {totalPrice}</p> <CartItems /> {/* Redirects the user to Stripe */} <button onClick={() => redirectToCheckout()}>Checkout</button> </div> )}
Server(less) implementation
If you're data source isn't coming from Stripe's dashboard, you can still make products and make payments happen from them.
You're product data should look like this:
const productData = [ { name: 'Bananas', id: 'some_unique_id_1', price: 400, image: 'https://www.fillmurray.com/300/300', currency: 'USD' product_data: { metadata: { type: 'fruit' } }, price_data: { recurring: { interval: 'week' } } }, { name: 'Tangerines', id: 'some_unique_id_2', price: 100, image: 'https://www.fillmurray.com/300/300', currency: 'USD', product_data: { metadata: { type: 'fruit' } }, price_data: { recurring: { interval: 'week' } } }]
NOTE: price_data
and product_data
are not required for use-shopping-cart to work, but they are required for creating Sessions with Stripe.
This library manages price_data
and product_data
for you, but if you need to pass extra data to your Sessions, you can add them directly to your
product objects.
Also keep in mind that product_data
is a child of price_data
when being sent to Stripe, but you don't need to nest for use-shopping-cart. Learn more about
creating Sessions here: https://stripe.com/docs/api/checkout/sessions/create
Once you have successfully installed stripe
, use-shopping-cart
, and wrapped your root component with <CartProvider>
, you are ready to go! 🚀