redirectToCheckout()

type RedirectToCheckoutInput =
  | string
  | { sessionUrl?: string; sessionId?: string }

redirectToCheckout(input: RedirectToCheckoutInput): Promise<
  { error: any } | undefined
>

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

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

  const handleCheckout = async () => {
    if (cartCount === 0) return

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

    const { sessionUrl } = await response.json()

    // 2. Redirect to Stripe checkout
    const result = await redirectToCheckout(sessionUrl)

    if (result?.error) {
      console.error('Redirect failed:', result.error)
    }
  }

  return (
    <button onClick={handleCheckout} disabled={cartCount === 0}>
      Proceed to Checkout
    </button>
  )
}

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

function CheckoutButton() {
  const { redirectToCheckout, cartDetails, cartCount } = useShoppingCart()
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState<string | null>(null)

  const handleCheckout = async () => {
    if (cartCount === 0) return

    setIsLoading(true)
    setError(null)

    try {
      const response = await fetch('/api/checkout', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ cartDetails })
      })

      if (!response.ok) {
        throw new Error('Failed to create checkout session')
      }

      const { sessionUrl } = await response.json()
      const result = await redirectToCheckout(sessionUrl)

      if (result?.error) {
        setError('Unable to redirect to checkout')
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Checkout failed')
    } finally {
      setIsLoading(false)
    }
  }

  return (
    <div>
      <button onClick={handleCheckout} disabled={cartCount === 0 || isLoading}>
        {isLoading ? 'Redirecting...' : 'Checkout'}
      </button>

      {error && <p className="error">{error}</p>}
    </div>
  )
}

// app/api/checkout/route.ts (Next.js App Router)
import { NextRequest, NextResponse } from 'next/server'
import Stripe from 'stripe'

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!)

export async function POST(req: NextRequest) {
  try {
    const { cartDetails } = await req.json()

    // Convert cart to line items
    const line_items = Object.values(cartDetails).map((item: any) => ({
      price_data: {
        currency: item.currency.toLowerCase(),
        product_data: {
          name: item.name,
          description: item.description,
          images: item.image ? [item.image] : []
        },
        unit_amount: item.price
      },
      quantity: item.quantity
    }))

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

    return NextResponse.json({ sessionUrl: session.url })
  } catch (error) {
    console.error('Checkout error:', error)
    return NextResponse.json(
      { error: 'Failed to create checkout session' },
      { status: 500 }
    )
  }
}