Public Checkout API

npm install @stripe/stripe-js @stripe/react-stripe-js

import { useState, useEffect } from 'react'
import { loadStripe, Stripe } from '@stripe/stripe-js'
import {
  Elements,
  PaymentElement,
  useStripe,
  useElements,
} from '@stripe/react-stripe-js'

interface CustomQuestion {
  id: string
  question: string
  type: string
  required: boolean
  options: string[]
  display_order: number
}

interface CheckoutData {
  cart_id: string
  // null for a free ticket: there is nothing to charge, so skip Stripe entirely.
  stripe: {
    publishable_key: string
    client_secret: string
    // Set when the organizer is on Stripe Standard (direct charges). Pass it to
    // loadStripe as { stripeAccount } or confirming the payment returns 404.
    connected_account_id: string | null
  } | null
  amount: number
  currency: string
  is_free_event: boolean
  // Render one field per question. Key custom_answers by `id` when you confirm.
  custom_questions: CustomQuestion[]
  phone_field_type: 'required' | 'optional' | 'off'
  expires_at: string
}

export default function EventCheckout({ eventId, ticketTypeId, quantity }) {
  const [checkoutData, setCheckoutData] = useState<CheckoutData | null>(null)
  const [stripePromise, setStripePromise] = useState<Promise<Stripe | null> | null>(null)

  useEffect(() => {
    async function initCheckout() {
      // Publishable key, public surface: safe to run in the browser.
      const response = await fetch(
        `https://api.qariyb.com/api/v1/public/events/${eventId}/checkout/initialize`,
        {
          method: 'POST',
          headers: {
            'X-Widget-Key': 'pk_live_...',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            ticket_type_id: ticketTypeId,
            quantity: quantity,
          }),
        }
      )

      const { data: checkout } = await response.json()
      setCheckoutData(checkout)

      // A free ticket carries no PaymentIntent: skip Stripe and confirm directly.
      if (checkout.is_free_event) {
        return
      }

      // connected_account_id is set for Standard (direct charge) organizers and
      // must be passed here, or confirming the payment fails with a 404.
      setStripePromise(
        loadStripe(
          checkout.stripe.publishable_key,
          checkout.stripe.connected_account_id
            ? { stripeAccount: checkout.stripe.connected_account_id }
            : undefined
        )
      )
    }

    initCheckout()
  }, [eventId, ticketTypeId, quantity])

  if (!checkoutData || !stripePromise) {
    return <div>Loading checkout...</div>
  }

  return (
    <Elements
      stripe={stripePromise}
      options={{
        clientSecret: checkoutData.stripe.client_secret,
        appearance: { theme: 'stripe' },
      }}
    >
      <CheckoutForm
        cartId={checkoutData.cart_id}
        eventId={eventId}
        onSuccess={(order) => console.log('Order completed:', order)}
      />
    </Elements>
  )
}

function CheckoutForm({
  cartId,
  eventId,
  onSuccess,
}: {
  cartId: string
  eventId: string
  onSuccess: (order: any) => void
}) {
  const stripe = useStripe()
  const elements = useElements()
  const [error, setError] = useState<string | null>(null)
  const [processing, setProcessing] = useState(false)
  const [billingName, setBillingName] = useState('')
  const [billingEmail, setBillingEmail] = useState('')

  // Form JSX shown in next step...
}

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault()

  if (!stripe || !elements) return

  setProcessing(true)
  setError(null)

  // Validate the Payment Element
  const { error: submitError } = await elements.submit()
  if (submitError) {
    setError(submitError.message ?? 'Validation failed')
    setProcessing(false)
    return
  }

  // Confirm payment with Stripe
  const { error: stripeError, paymentIntent } = await stripe.confirmPayment({
    elements,
    redirect: 'if_required',
    confirmParams: {
      return_url: `${window.location.origin}/checkout/complete`,
    },
  })

  if (stripeError) {
    setError(stripeError.message ?? 'Payment failed')
    setProcessing(false)
    return
  }

  // Confirm checkout with Qariyb API, again on the public surface with the
  // publishable key. Confirm is safe to retry: calling it a second time with the
  // same cart_id and payment_intent_id returns the same order rather than
  // charging again, so a dropped connection does not cost the buyer a ticket.
  const response = await fetch(
    `https://api.qariyb.com/api/v1/public/events/${eventId}/checkout/confirm`,
    {
      method: 'POST',
      headers: {
        'X-Widget-Key': 'pk_live_...',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        cart_id: cartId,
        billing_name: billingName,
        billing_email: billingEmail,
        payment_intent_id: paymentIntent.id,
      }),
    }
  )

  const result = await response.json()

  if (result.success) {
    onSuccess(result.data)
  } else {
    setError(result.message ?? 'Order confirmation failed')
  }

  setProcessing(false)
}

return (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      placeholder="Full name"
      value={billingName}
      onChange={(e) => setBillingName(e.target.value)}
      required
    />
    <input
      type="email"
      placeholder="Email address"
      value={billingEmail}
      onChange={(e) => setBillingEmail(e.target.value)}
      required
    />

    <PaymentElement options={{ layout: 'tabs' }} />

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

    <button type="submit" disabled={!stripe || processing}>
      {processing ? 'Processing...' : 'Complete Purchase'}
    </button>
  </form>
)