React

A button and a hook that open the checkout over your app. Built on @ketapay/checkout, which does the work; this package fits it to React. React 18 or later. Source on GitHub.

npm install @ketapay/react@next

Your server creates the checkout session and gives your app its url, as in How it works.

The button

import { KetaPayButton } from '@ketapay/react'

export function PayButton() {
  return (
    <KetaPayButton
      url={() =>
        fetch('/api/checkout', { method: 'POST' })
          .then((r) => r.json())
          .then((s) => s.url)
      }
      onSuccess={() => router.push('/orders')}
      onError={() =>
        toast('Checkout could not load. Please try again.')
      }
      className="btn btn-primary"
    >
      Pay safely with KetaPay
    </KetaPayButton>
  )
}

Prop
`url`	The session’s `url`, or a function that gets one when the button is clicked. The button is disabled and `aria-busy` while it waits
`onReady`, `onSuccess`, `onClose`	As in `KetaPay.open`
`onError`	Getting the URL failed, it isn’t a KetaPay checkout, or the checkout didn’t load. Without it, the error is logged

Anything else a <button> takes (className, style, disabled, id) is passed through. The button has no styles of its own, and its default label is “Pay with KetaPay”.

onSuccess can’t prove a payment. Wait for the escrow.funded webhook or fetch the session before you ship anything.

The hook

For your own button, a menu item, or opening the checkout after something else happens:

import { useKetaPayCheckout } from '@ketapay/react'

function Checkout({ url }: { url: string }) {
  const checkout = useKetaPayCheckout()

  async function pay() {
    const result = await checkout.open({
      url,
      onReady: () => track('checkout_shown'),
    }).result
    if (result === 'success') showThankYou()
  }

  return <MyButton onClick={pay}>Pay now</MyButton>
}

open takes the same options as KetaPay.open and returns the same { close, result }. A checkout still showing when the component unmounts is closed for you.

Next.js and server rendering

Both are client components (the package is marked 'use client'), and nothing touches the browser until the checkout opens, so they render on the server without errors. Call open from an event handler or an effect, never during render.

Errors and everything else

Errors (KetaPayCheckoutError with code invalid_url, not_in_browser or load_failed), branding, Content Security Policy, the sandbox and supported browsers are the same as in JavaScript. KetaPayCheckoutError and the types are re-exported from @ketapay/react.

SDKs

Server

Browser

Plugins

The button

The hook

Next.js and server rendering

Errors and everything else

​The button

​The hook

​Next.js and server rendering

​Errors and everything else

The button

The hook

Next.js and server rendering

Errors and everything else