Skip to content
Zirzir

Universal Drop-in Checkout

Zirzir provides a zero-dependency Web Component <zirzir-checkout> that allows developers to embed African payment rails into any frontend framework with a single <script> tag.

Single-Line Script Embed

Section titled “Single-Line Script Embed”

Add the checkout bundle to your website’s <head>:

<script src="https://pay.zirzir.dev/zirzir-checkout.js" async></script>

Web Component Usage

Section titled “Web Component Usage”

Drop the <zirzir-checkout> element anywhere in your HTML or React / Vue / Svelte application:

<zirzir-checkout
  client-key="zz_live_9f81a2..."
  amount="250.00"
  currency="ETB"
  reference="ORDER-1092"
  providers="telebirr,cbebirr,chapa"
  button-text="⚡ Pay with Telebirr / CBE"
  theme="dark">
</zirzir-checkout>

Event Listeners

Section titled “Event Listeners”

Listen for real-time payment completion directly in JavaScript:

const checkout = document.querySelector('zirzir-checkout');


checkout.addEventListener('zirzir:success', (e) => {
  console.log('Payment successful! Transaction ID:', e.detail.transactionId);
});


checkout.addEventListener('zirzir:failed', (e) => {
  console.error('Payment failed:', e.detail.error);
});

Hosted Checkout Route (/pay/:reference)

Section titled “Hosted Checkout Route (/pay/:reference)”

If you prefer redirecting customers to a full hosted checkout page, use the /pay/:reference URL:

https://pay.zirzir.dev/pay/ORD-9912?amount=500&currency=ETB&merchant=AcmeCorp