Checkout Widget

The Supapay checkout widget is a copy-paste way to accept payments. It provides a polished UI that handles bank transfers and status polling.

How it Works

Setup: Include our SDK on your page.
Initiate: Call SupaPay.open() with your transaction details.
Experience: The user sees a modal where they can complete the payment.
Callback: Your application receives a notification once the payment is finalized.

Basic Integration

<script src="https://js.supa.pay/v1"></script>
<script>
  const pay = SupaPay.setup({
    key: 'pk_test_12345',
    amount: 5000,
    currency: 'NGN',
    email: 'customer@example.com',
    onSuccess: (ref) => console.log('Payment Success:', ref),
    onClose: () => console.log('Widget Closed')
  });

  document.getElementById('pay-button').onclick = () => pay.open();
</script>

Aesthetic Features

Smooth transitions: Motion that keeps checkout feeling responsive.
Micro-interactions: Subtle animations that guide the user through the payment flow.
Mobile first: Optimized for NGN-based banking apps and mobile-first users.

Basic Integration

<script src="https://js.supa.pay/v1"></script> <script> const pay = SupaPay.setup({ key: 'pk_test_12345', amount: 5000, currency: 'NGN', email: 'customer@example.com', onSuccess: (ref) => console.log('Payment Success:', ref), onClose: () => console.log('Widget Closed') }); document.getElementById('pay-button').onclick = () => pay.open(); </script>