$4.00
use-shopping-cart
checkoutSingleItem()
checkoutSingleItem()
Differing from redirectToCheckout()
, this method allows you to add an item to the cart and go directly to Stripe's checkout experience all in one go. With this method, you need to specify the SKU (or priceId) of your product and you can specify a quantity
for the item or it will default to a quantity of one.
import React from 'react'import { useShoppingCart, formatCurrencyString } from 'use-shopping-cart'export function Product({ product }) { const { checkoutSingleItem } = useShoppingCart() /* Go to checkout with one of the `product` */ function buyNow() { checkoutSingleItem({ sku: product.sku }) } /* Go to checkout with ten of the `product` */ function buyTenNow() { checkoutSingleItem({ sku: product.sku, quantity: 10 }) } /* A helper function that turns the price into a readable format */ const price = formatCurrencyString({ value: product.price, currency: product.currency, language: 'en-US' }) return ( <article style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', width: '50%' }} > <figure style={{ textAlign: 'center' }}> <img style={{ height: 200, width: 250 }} src={product.image} alt={` ${product.name}`} /> <figcaption>{product.name}</figcaption> </figure> <p>{price}</p> <section style={{ display: 'flex', justifyContent: 'space-evenly', width: '100%' }} > <button onClick={buyNow} aria-label={`Buy a ${product.name}`} style={{ height: 50, width: 100, marginBottom: 30 }} > Buy Now </button> <button onClick={buyTenNow} aria-label={`Buy ten ${product.name}`} style={{ height: 50, width: 100, marginBottom: 30 }} > Buy 10 Now </button> </section> </article> )}