Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example usage of use-shopping-cart for README
// Front-End: Let's pick our product, ask for a Session ID, and redirect to the checkout page.
import { useShoppingCart, formatCurrencyString } 'use-shopping-cart'
function Product({ product }) {
const { redirectToCheckout } = useShoppingCart()
const { name, image, description, currency } = product
const price = formatCurrencyString({ value: product.price, currency, language: 'en-US' })
async function buyNow() {
const response = await fetch("/.netlify/functions/create-session", {
method: "post",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ [product.id]: { ...product, quantity: 1 } }),
}).then(res => res.json())
.catch(error => {/* Error handling */})
redirectToCheckout({ sessionId: response.sessionId })
}
return (
<article>
<figure>
<img src={image} alt={description} width="100" />
<figcaption>
{price} {name}
</figcaption>
</figure>
<button onClick={buyNow}>Buy now</button>
</article>
)
}
// These are your products, you can retrieve them however you'd like (CMS, Stripe, JSON)
[
{
"name": "Bananas",
"description": "Yummy yellow fruit",
"id": "id_banana001",
"price": 400,
"currency": "USD",
"image": "https://cdn.mos.cms.futurecdn.net/42E9as7NaTaAi4A6JcuFwG-1200-80.jpg"
}
]
// Serverless Function: Let's validate the product the user wants and create a Stripe Session.
const stripe = require('stripe')(process.env.REACT_APP_STRIPE_API_SECRET)
const { validateCartItems } = require('use-shopping-cart/src/serverUtil')
const inventory = require('./data/products.json')
exports.handler = async (event) => {
try {
const productJSON = JSON.parse(event.body)
const line_items = validateCartItems(inventory, productJSON)
const session = await stripe.checkout.sessions.create({
payment_method_types: ['card'],
billing_address_collection: 'auto',
shipping_address_collection: {
allowed_countries: ['US', 'CA']
},
success_url: `${process.env.URL}/success.html`,
cancel_url: process.env.URL,
line_items
})
return {
statusCode: 200,
body: JSON.stringify({ sessionId: session.id })
}
} catch (error) {/* Error handling */}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment