@demystify/pay-embed

Demystify checkout on your page: a Pay-Now button, an embedded checkout, a UPI QR, or a hosted redirect. React users want @demystify/pay-react.

Full guide: docs/48-UI-INTEGRATION.md.

What this package does and does not do

We never hold funds, so the actual card/UPI capture happens on the licensed Payment Aggregator's checkout. This package orchestrates around it — create, open, theme, report — and your page never sees a card number, which keeps you out of PCI scope too.

Usage

import { mountPayNowButton, mountPayQr, redirectToCheckout } from "@demystify/pay-embed";

// A themed button that reveals checkout inline.
mountPayNowButton({
  session,                                    // minted by YOUR BACKEND
  container: document.getElementById("pay")!,
  label: "Pay ₹1,500.00",
  onSuccess: () => showThanks(),
  onCancel: () => {},                         // not an error — do not show one
});

// Or a scannable UPI QR.
mountPayQr({ session, container: qrBox });

// Or just send them to the hosted page.
redirectToCheckout(session);

<demystify-pay embed-url="…" embed-origin="…" mode="qr"> works with no bundler; call definePayElement() once.

Four events, and why they are four

| Event | Meaning | What to do | |---|---|---| | success | the payer completed checkout | show a success screen — not proof of payment | | failure | attempted and declined | offer a retry on the same intent | | cancel | backed out without attempting | say nothing; this is not an error | | error | the surface itself broke | mint a fresh session and remount |

failure and error are deliberately separate: "your card was declined" and "your session expired" need completely different UI, and one code for both means you cannot tell retry-the-payment from mint-a-new-session.

Settle your ledger on the payment.captured / settlement.completed webhook, never on onSuccess.