Payment widget

Embed MoMo checkout. Pass a public key and an amount in pesewas.

Prerequisites

A platform with a public key (pk_test_ or pk_live_).
Your page origin on that platform’s allowlist.
A return URL under Account → Brand, or pass redirectUrl when you mount.

Install

For React apps, install the package:

npm install @payloqa/payment-widget

Usage

React

tsx

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

<PaymentWidget
  publicKey="pk_test_…"
  amountMinor={1000}
  redirectUrl="https://your-shop.com/order/thanks"
  mode="inline"
  onSuccess={(session) => {
    // session.id, session.status, session.amount_minor, session.paid_at
  }}
/>

HTML (no npm)

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,
    redirectUrl: "https://your-shop.com/order/thanks",
    mode: "inline",
  });
</script>

Options

amountMinor — integer pesewas. GHS 10.00 → 1000.

mode — inline (default), modal, or page.

redirectUrl — where to send the customer after pay or leave.

prefill — optional { msisdn: "0244123456", network: "mtn" }. network: mtn | telecel | airteltigo.

Brand (name, logo, colours) comes from Account → Brand.

After payment

Fulfil from onSuccess or a webhook. Do not trust status in the query string — customers can edit the URL.

Callbacks: onReady, onPending, onSuccess, onFailure, onExpired, onClose, onError.