Checkout / Inline

Open the checkout from your page.

ZevPay Inline drops a script tag into any site and opens the checkout in a modal over your page. No redirect, no leaving your domain. Same shape whether your stack is React, Vue, vanilla, PHP, or a Shopify theme.

ZevPay Inline checkout - modal opened over a merchant page
01

One script tag, any stack

Add `<script src="https://js.zevpaycheckout.com/v1/inline.js"></script>` and you're done. The SDK exposes a typed JS API for opening checkouts on click; works in React, Vue, Svelte, plain HTML, and CMS themes.

02

Stays on your domain

The checkout opens as a modal over your existing page. Customers never leave your site to pay - better conversion, fewer drop-offs at the redirect step.

03

Typed success callback

Pass an onSuccess handler and we'll hand you the reference the instant the payment confirms. Verify with the matching webhook on your backend.

04

Accepts every payment method

Bank transfer, ZevPay ID, PalmPay, mobile money and stablecoins all show up inside the same modal. Choose which to offer for your account, per API key, or per checkout.

In code

What integration looks like.

The full happy path is short. You can swap real keys in and ship to staging today.

Full Inline reference
checkout.html
HTML + JS
<!-- 1. drop the SDK into any page -->
<script src="https://js.zevpaycheckout.com/v1/inline.js"></script>

<!-- 2. open the checkout when the user clicks -->
<script>
  const zp = new ZevPay.ZevPayCheckout();
  document.getElementById('pay').onclick = () =>
    zp.checkout({
      apiKey: 'pk_live_…',
      email:  'customer@acme.ng',
      amount: 250000,            // ₦2,500 in kobo
      onSuccess: (ref) => fetch('/api/confirm/' + ref),
      onClose:   ()    => console.log('checkout closed'),
    });
</script>

How it works

Three steps, end to end.

01

Drop the script

Add one <script> tag to any page. The SDK auto-mounts on window.ZevPay.

02

Open from your JS

Call zp.checkout({...}) on click - the modal slides over your page.

03

Get the callback

Your onSuccess handler fires the moment the payment confirms. Webhook fires too.

Perfect for

Built for these stacks.

React + Vue SPAs

Framework-agnostic. Mount the SDK once, call from any component.

Headless e-commerce

Custom storefront, no rebuilds - checkout is just an API call.

Custom checkout UX

Pre-fill amounts and emails from your cart, surveys, or donation flows.

Marketplaces

Trigger checkout from any item card without leaving the listing.

// payment methods

Every method, whichever way you integrate.

Inline offers the same methods as the other two: naira rails in Nigeria, mobile money across Africa and stablecoins from anywhere, in the customer's own currency.

Methods, currencies and markets

Bank transfer

Nigeria · NGN

ZevPay ID & QR

Nigeria · NGN

PalmPay

Nigeria · NGN

CardComing back

Nigeria · NGN

Static NGN accountsOn request

Nigeria · NGN

Mobile moneyOpening market by market

Across Africa · mobile money

USDT & USDC

Worldwide · stablecoins

Common questions

About Inline.

Does it work with React, Vue, or other SPAs?

Yes - the SDK is framework-agnostic. Drop the script once, call the JS API from any framework or vanilla JS.

Can I customize the modal colors?

Yes. Set your business name, logo and colours in the dashboard, for your whole account or per API key, and the modal picks them up.

Does it work on mobile browsers?

Yes. The modal is responsive and goes full-screen on small screens, and bank transfer details copy in one tap.

What if the customer closes the modal before paying?

Your onClose callback fires. The transaction reference stays valid - you can show a 'try again' CTA or recover the abandoned session.

Inline integration

One API key, every integration.

Add Inline to your existing stack with the same pk_ key you already use.