Variable CheckoutConst

Example: Handle success, failure, and focus in a dialog

import { useRef } from 'react'
import { Checkout, type CheckoutHandle } from '@inttegro/react'

function Payment({ orderId }: { orderId: string }) {
  const checkout = useRef<CheckoutHandle>(null)

  return (
    <dialog open onTransitionEnd={() => checkout.current?.focus()}>
      <Checkout
        ref={checkout}
        orderId={orderId}
        appearance={{ theme: 'system' }}
        onCompleted={() => location.assign(`/orders/${orderId}/complete`)}
        onError={(error) => reportCheckoutError(error)}
      />
    </dialog>
  )
}
Copy