Skip to main content

​
Prerequisite

You need a Reeple public key (issued via Payshiga). Use a pk_live_... key for real payments, or a pk_test_... key with mode: 'sandbox' while you’re integrating — see Sandbox / Testing.
Drop one script tag into your page — no build step required.
<script src="https://payment.reeple.ai/reeple.iife.min.js"></script>

<button id="pay-btn">Pay Now</button>

<script>
  document.getElementById('pay-btn').addEventListener('click', function () {
    const reeple = new Reeple({
      publicKey: 'pk_live_your_key_here',
      amount: 5000,
      currency: 'NGN',
      narration: 'Order #1234',
      customer: {
        email: 'customer@example.com',
        firstName: 'John',
        lastName: 'Doe',
        phoneNumber: '+2348012345678',
      },
      meta: {},
      callbackUrl: 'https://yoursite.com/payment/callback',
      onSuccess: function (data) {
        console.log('Payment successful', data);
        window.location.href = '/order-confirmed?ref=' + data.reference;
      },
      onClose: function () {
        console.log('Customer closed the payment modal');
      },
      onError: function (error) {
        console.error('Payment error:', error.message);
      },
    });

    reeple.open();
  });
</script>
The script exposes a global window.Reeple class.
Test the full flow with mode: 'sandbox' and a pk_test_... key before switching to production — see Sandbox / Testing.

​
Next steps

Configuration reference

Every field, callback, and method in detail.

Callbacks & verification

How to securely confirm a payment on your server.