React integration

'use client'

import { useCallback, useMemo, useState } from 'react'
import { PaybytokenEmbeddedCheckout } from '@paybytoken/react'

export function Payment() {
  const [error, setError] = useState<string>()

  const fetchCheckoutSession = useCallback(async () => {
    const response = await fetch('/api/paybytoken/checkout-session', {
      method: 'POST',
    })

    if (!response.ok) {
      throw new Error('Checkout session could not be created')
    }

    return response.json()
  }, [])

  const options = useMemo(
    () => ({
      fetchCheckoutSession,
      locale: 'auto' as const,
      appearance: {
        variables: {
          colorPrimary: '#9FE870',
          colorPrimaryText: '#0E0F0C',
          borderRadius: 20,
        },
      },
    }),
    [fetchCheckoutSession],
  )

  if (error) {
    return <button onClick={() => setError(undefined)}>Try again</button>
  }

  return (
    <PaybytokenEmbeddedCheckout
      options={options}
      onReady={() => console.log('Checkout is ready')}
      onComplete={({ data }) => showPaymentSubmitted(data)}
      onCancel={() => restoreCart()}
      onLoadError={({ data }) => setError(data.message ?? 'Checkout could not load')}
      onInitializationError={(cause) =>
        setError(cause instanceof Error ? cause.message : 'Checkout could not start')
      }
    />
  )
}