Guides

Card payments

Accept Visa, Mastercard, and Verve cards. Choose between an inline modal hosted in your page or a TagPay-hosted checkout. PCI scope stays at SAQ A — card data never touches your servers.

Flows

Two ways to render: an inline modal embedded in your page via our JS SDK, or a hosted page the customer is redirected to. Both call the same POST /v1/transactions/initialize on the server side.

• Inline — keeps the customer on your domain. Better conversion for familiar checkouts.
• Hosted — one redirect, zero JS. Lowest lift to integrate.

Inline widget

Drop the script tag, call TagPay.popup() with the access_code returned by your server when it creates the charge.

<script src="https://js.tagpay.ng/v1/tagpay.js"></script>
<button onclick="payNow()">Pay NGN 5,000</button>
<script>
  async function payNow() {
    const res = await fetch('/api/create-charge', { method: 'POST' });
    const { access_code } = await res.json();
    TagPay.popup({
      accessCode: access_code,
      onSuccess: (ref) => window.location = '/success?ref=' + ref,
    });
  }
</script>

Hosted page

After creating a charge, redirect the customer to charge.checkout_url. TagPay handles card entry, 3DS, and the success page. The customer is returned to your callback_url with a reference query param.

3D Secure

Stepping up for 3D Secure is automatic. When the issuer requires authentication, TagPay redirects the customer to the issuer's challenge page, then back to the checkout flow you started — inline modal or hosted page, whichever you used.

Test cards

Use these card numbers in sandbox (sk_test_*). Any future expiry date and any 3-digit CVV will work.