useCheckout()

import { CheckoutProvider } from '@clerk/clerk-react/experimental'
import { ClerkLoaded } from '@clerk/clerk-react'
import { CheckoutFlow } from './CheckoutFlow'

export default function SubscriptionPage() {
  // `<CheckoutProvider />` sets the context for the checkout flow.
  // Any child component can now call `useCheckout()` to access this context.
  return (
    <CheckoutProvider for="user" planId="cplan_xxx" planPeriod="month">
      <div>
        <h1>Upgrade Your Plan</h1>
        <p>You are about to subscribe to our monthly plan</p>
        <ClerkLoaded>
          <CheckoutFlow />
        </ClerkLoaded>
      </div>
    </CheckoutProvider>
  )
}

import { useCheckout } from '@clerk/clerk-react/experimental'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'

export function CheckoutFlow() {
  const { checkout } = useCheckout()
  const { status } = checkout

  if (status === 'needs_initialization') {
    return <CheckoutInitialization />
  }

  return (
    <div className="checkout-container">
      <CheckoutSummary />
      <PaymentSection />
    </div>
  )
}

function CheckoutInitialization() {
  const { checkout } = useCheckout()
  const { start, fetchStatus } = checkout

  return (
    <button onClick={start} disabled={fetchStatus === 'fetching'} className="start-checkout-button">
      {fetchStatus === 'fetching' ? 'Initializing...' : 'Start Checkout'}
    </button>
  )
}

function PaymentSection() {
  const { checkout } = useCheckout()

  const { isConfirming, confirm, finalize, error } = checkout

  const [isProcessing, setIsProcessing] = useState(false)
  const [paymentMethodId, setPaymentMethodId] = useState<string | null>(null)
  const navigate = useNavigate()

  const submitSelectedMethod = async () => {
    if (isProcessing || !paymentMethodId) return
    setIsProcessing(true)

    try {
      // Confirm checkout with payment method
      await confirm({
        paymentSourceId: paymentMethodId,
      })
      // Calling `.finalize` enables you to sync the client-side state with the server-side state of your users.
      // It revalidates all authorization checks computed within server components.
      await finalize({
        navigate: () => navigate('/dashboard'),
      })
    } catch (error) {
      console.error('Payment failed:', error)
    } finally {
      setIsProcessing(false)
    }
  }

  return (
    <>
      {/* A component that lists a user's payment methods and allows them to select one. See an example: https://clerk.com/docs/reference/hooks/use-payment-methods#examples */}
      <PaymentMethods onChange={setPaymentMethodId} />

      {error && <div>{error.message}</div>}

      <button type="button" disabled={isProcessing || isConfirming} onClick={submitSelectedMethod}>
        {isProcessing || isConfirming ? 'Processing...' : 'Complete Purchase'}
      </button>
    </>
  )
}

function CheckoutSummary() {
  const { checkout } = useCheckout()
  const { plan, totals } = checkout

  return (
    <div>
      <h2>Order Summary</h2>
      <span>{plan?.name}</span>
      <span>
        {totals?.totalDueNow.currencySymbol}
        {totals?.totalDueNow.amountFormatted}
      </span>
    </div>
  )
}