> ## Documentation Index
> Fetch the complete documentation index at: https://docs.reeple.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Go from zero to a working checkout in a few minutes

## 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](/sandbox-testing).

<Tabs>
  <Tab title="CDN">
    Drop one script tag into your page — no build step required.

    ```html theme={null}
    <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.
  </Tab>

  <Tab title="npm">
    Best for SPAs and framework apps with an existing build step.

    ```bash theme={null}
    npm install @reeple/sdk
    ```

    ```typescript theme={null}
    import { Reeple } from '@reeple/sdk';

    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: (data) => console.log(data),
      onClose: () => console.log('closed'),
      onError: (err) => console.error(err),
    });

    reeple.open();
    ```

    Looking for a framework-specific pattern? See [Framework Examples](/examples/react).
  </Tab>
</Tabs>

<Tip>
  Test the full flow with `mode: 'sandbox'` and a `pk_test_...` key before switching to production — see [Sandbox / Testing](/sandbox-testing).
</Tip>

## Next steps

<CardGroup cols={2}>
  <Card title="Configuration reference" href="/configuration">
    Every field, callback, and method in detail.
  </Card>

  <Card title="Callbacks & verification" href="/callbacks-and-verification">
    How to securely confirm a payment on your server.
  </Card>
</CardGroup>