PayloqaDocs

Getting started

Accept your first Mobile Money payment in four steps.

Before you begin

  1. A Payloqa account at app.payloqa.com
  2. A website or React app where you can add a script or a package
  3. Your page origin (for local: http://localhost:3000)

1. Get your public key

  1. Sign in and create a platform for your site.
  2. Copy the test public key (pk_test_…).
  3. On that platform, allowlist your origin (exact scheme, host, and port).
  4. Optional: set name, logo, colours, and a return URL under Account → Brand.

2. Install

If you use React (Next.js, Vite, etc.), install the package first:

npm install @payloqa/payment-widget

No React? Skip the package and load the script in the next step.

3. Add checkout to your page

HTML

html
<script src="https://js.payloqa.com/v1/pay.js"></script>
<div id="payloqa-pay"></div>
<script>
  Payloqa.mountPaymentWidget("#payloqa-pay", {
    publicKey: "pk_test_…",
    amountMinor: 1000, // GHS 10.00
    redirectUrl: "https://your-shop.com/thanks",
  });
</script>

React

tsx
import { PaymentWidget } from "@payloqa/payment-widget";

export function Checkout() {
  return (
    <PaymentWidget
      publicKey="pk_test_…"
      amountMinor={1000}
      redirectUrl="https://your-shop.com/thanks"
      onSuccess={(session) => {
        // Fulfil using session.id, or wait for your webhook
      }}
    />
  );
}

4. Test, then go live

  1. Open the page. You should see checkout with your brand from Account → Brand.
  2. Pay with a test MoMo number. If the widget is blank, fix the origin allowlist or the public key.
  3. Finish Business verification. Swap to pk_live_, allowlist your production origin, and charge real money.