useCheckout()

import { CheckoutProvider } from '@clerk/react/experimental'
import { ClerkLoaded } from '@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 (
    // Update with your Plan ID and Plan Period
    <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/react/experimental'
import { useState } from 'react'
import { useNavigate } from 'react-router-dom'

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

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

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

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

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

function PaymentSection() {
  const { checkout, errors, fetchStatus } = useCheckout()

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

  const submitSelectedMethod = async () => {
    if (fetchStatus === 'fetching' || !paymentMethodId) return

    try {
      // Confirm checkout with payment method
      const { error } = await checkout.confirm({
        paymentMethodId,
      })
      if (error) {
        console.error(JSON.stringify(error, null, 2))
        return
      }
      // 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 checkout.finalize({
        navigate: ({ decorateUrl }) => {
          const url = decorateUrl('/')
          if (url.startsWith('http')) {
            window.location.href = url
          } else {
            navigate(url)
          }
        },
      })
    } catch (error) {
      console.error('Payment failed:', error)
    }
  }

  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} />

      {errors.global && (
        <ul>
          {errors.global.map((error, index) => (
            <li key={index}>{error.longMessage || error.message}</li>
          ))}
        </ul>
      )}

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

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

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