Variable Checkout`Const`

Checkout: ForwardRefExoticComponent<
CheckoutProps & RefAttributes<CheckoutHandle>,
> = ...

Displays Inttegro-hosted Checkout in a React application.

The component renders an empty div, loads the executable runtime from Inttegro's fixed origin after mount, creates a controller for an orderId or purchaseIntentId, and destroys it during cleanup. Server rendering is safe because no runtime is loaded until the effect runs in a browser.

Changing features, the Checkout reference, presentation, timeout, or title starts a fresh hosted experience. Changing appearance or locale updates the active experience in place. Keep the component mounted while a payment is pending or confirmation is in progress.

Example: Present Checkout without building a dialog

import { Checkout } from '@inttegro/react'

function Payment({ orderId }: { orderId: string }) {
  return (
    <Checkout
      orderId={orderId}
      presentation="modal"
      appearance={{ theme: 'system' }}
      onCompleted={() => location.assign(`/orders/${orderId}/complete`)}
      onError={(error) => reportCheckoutError(error)}
    />
  )
}

Variable CheckoutConst

Example: Present Checkout without building a dialog

Settings

Variable Checkout`Const`