use-shopping-cart

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.

 Bananas
Bananas

$4.00

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>
)
}
Edit this page on GitHub