Getting Started

npm install use-shopping-cart

# or
yarn add use-shopping-cart

# or
pnpm add use-shopping-cart

import { CartProvider } from 'use-shopping-cart'

function App() {
  return (
    <CartProvider
      stripe={process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY}
      currency="USD"
    >
      <YourApp />
    </CartProvider>
  )
}

import { useShoppingCart } from 'use-shopping-cart'

function ProductCard() {
  const { addItem } = useShoppingCart()

  const product = {
    id: 'banana_001',
    name: 'Bananas',
    price: 400, // $4.00 in cents
    currency: 'USD',
    image:
      'https://images.unsplash.com/photo-1571771894821-ce9b6c11b08e?w=400&h=400&fit=crop&q=80'
  }

  return (
    <div>
      <h3>{product.name}</h3>
      <p>${product.price / 100}</p>
      <button onClick={() => addItem(product)}>Add to Cart</button>
    </div>
  )
}

import { useShoppingCart } from 'use-shopping-cart'

function Cart() {
  const {
    cartCount,
    formattedTotalPrice,
    cartDetails,
    incrementItem,
    decrementItem,
    removeItem
  } = useShoppingCart()

  if (cartCount === 0) {
    return <p>Your cart is empty</p>
  }

  return (
    <div>
      <h2>Cart ({cartCount} items)</h2>

      {Object.entries(cartDetails).map(([id, item]) => (
        <div key={id}>
          <h4>{item.name}</h4>
          <p>
            {item.formattedPrice} × {item.quantity}
          </p>

          <button onClick={() => decrementItem(id)}>-</button>
          <span>{item.quantity}</span>
          <button onClick={() => incrementItem(id)}>+</button>

          <button onClick={() => removeItem(id)}>Remove</button>
        </div>
      ))}

      <h3>Total: {formattedTotalPrice}</h3>
    </div>
  )
}

// pages/api/create-checkout-session.js (Next.js)
import Stripe from 'stripe'
const stripe = new Stripe(process.env.STRIPE_SECRET_KEY)

export default async function handler(req, res) {
  try {
    const { cartDetails } = req.body

    const line_items = Object.values(cartDetails).map((item) => ({
      price_data: {
        currency: 'usd',
        product_data: {
          name: item.name,
          images: [item.image]
        },
        unit_amount: item.price
      },
      quantity: item.quantity
    }))

    const session = await stripe.checkout.sessions.create({
      mode: 'payment',
      line_items,
      success_url: `${req.headers.origin}/success`,
      cancel_url: req.headers.origin
    })

    res.json({ sessionUrl: session.url })
  } catch (error) {
    res.status(500).json({ error: error.message })
  }
}

import { useShoppingCart } from 'use-shopping-cart'

function CheckoutButton() {
  const { cartDetails, redirectToCheckout } = useShoppingCart()

  const handleCheckout = async () => {
    // Call your server to create a session
    const response = await fetch('/api/create-checkout-session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ cartDetails })
    })

    const { sessionUrl } = await response.json()

    // Redirect to Stripe checkout
    await redirectToCheckout(sessionUrl)
  }

  return <button onClick={handleCheckout}>Checkout</button>
}