Checkout on your page

The checkout opens over your page: a centred window on a computer, the whole screen on a phone. It’s the same checkout as the redirect, with your logo and colour, card and bank transfer, and the receipt. Only how it opens changes.

Create the session on your server

Exactly as in Accept payments, then send its url to the browser. Don’t send your key or the whole session.

Express

app.post('/api/checkout', async (req, res) => {
  const session = await createSessionFor(req.body.orderId)
  res.json({ url: session.url })
})

Open it in the browser

import { KetaPay } from '@ketapay/checkout'

payButton.addEventListener('click', async () => {
  const { url } = await fetch('/api/checkout', {
    method: 'POST',
  }).then((r) => r.json())

  KetaPay.open({
    url,
    onSuccess: () => showThankYou(),
    onError: () => showMessage('Checkout could not load.'),
  })
})

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={() => showThankYou()}
    >
      Pay safely with KetaPay
    </KetaPayButton>
  )
}

<script src="https://js.ketapay.com/v0.1.0-beta.1/checkout.js"></script>
<script>
  KetaPay.open({ url, onSuccess: showThankYou })
</script>

Confirm the payment on your server

onSuccess tells you the buyer finished, so you can update the page. It can’t prove a payment: anyone can call it from the browser console. Ship only after the escrow.funded webhook, or after fetching the session.

Redirect or overlay?

	Redirect	On your page
Buyer leaves your site	Yes, and comes back to `return_url`	No
Code in the browser	None	`@ketapay/checkout` or `@ketapay/react`
Works without JavaScript	Yes	No
Confirming the payment	Webhook or fetch the session	Webhook or fetch the session

If the session has a return_url, the receipt still shows a Back to button that takes the whole page there. Leave return_url out if you’d rather move the buyer on yourself from onSuccess or onClose.

Content Security Policy

If your site sets one, allow the checkout frame, and the script if you load it from the CDN:

frame-src https://checkout.ketapay.com;
script-src https://js.ketapay.com;

The full options, errors and versions are in the JavaScript and React references.

Get started

Accept payments

Escrow

Customers

After payment

Integrate

Redirect or overlay?

Content Security Policy

​Redirect or overlay?

​Content Security Policy

Redirect or overlay?

Content Security Policy