Open Source SDK

QRIS Payment SDK

Lightweight JavaScript SDK for QRIS payment integration via PopPay gateway. Works in any browser environment with zero heavy dependencies.

Ringan

No heavy dependencies. Minimal footprint for fast page loads.

Multi-Format

Supports both ESM and UMD module formats out of the box.

Dinamis

Dynamic amount, payor info, and custom invoice data at runtime.

Auto-Inquiry

Real-time status via WebSocket with polling fallback.

Try Demo Run Tests

script.js

// Initialize QRIS payment
const sdk = new QrisSDK({
  amount: 50000,
  invoice: 'INV-20260406-0001',
  notes: 'Pembayaran order #123',
  payor_name: 'Budi Santoso',
  payor_email: '[email protected]',
  expirationInterval: 300,
  onSuccess: (data) => console.log('Paid!', data),
  onFailed: (err) => console.log('Failed', err),
});

sdk.openPayment();

Live Demo

Payment Demo

Fill in the form and trigger a real QRIS payment flow. Domain must be registered with PopPay for live transactions.

Payment Form

Quick Amount

Amount (IDR) *

Notes

Payor Name

Payor Email

Expiration

Connect to API

Payment Result

QR code will appear here after you initiate payment

Event Log 0

Quality Assurance

Test Suite

31 automated tests across 6 categories verifying SDK loading, constructor, validation, edge cases, methods, and callbacks.

Passed

Failed

Total

Pass Rate

Transaction Log

Order History

View orders from the current session (standalone) or from the backend API when connected.

No orders yet. Make a payment to see transaction history.

API Reference

Configuration Reference

All available parameters for the QrisSDK constructor.

Parameter	Type	Required	Default	Description
`invoice`	`string`	Yes	-	Unique invoice/order identifier. Must be a non-empty string.
`amount`	`number`	Yes	-	Payment amount in IDR (integer). Example: `50000` for Rp 50.000.
`notes`	`string`	No	`''`	Additional notes or description for the transaction.
`payor_name`	`string`	No	`''`	Full name of the person making the payment.
`payor_email`	`string`	No	`''`	Email address of the payor for receipt delivery.
`expirationInterval`	`number`	No	`300`	Payment expiration time in seconds. Default is 5 minutes (300s).
`resultContainerId`	`string`	No	`null`	DOM element ID where payment UI (QR code) will be rendered.
`onSuccess`	`function`	No	`null`	Callback fired on successful payment. Receives `{ transaction_id, data, timestamp }`.
`onFailed`	`function`	No	`null`	Callback fired on payment failure or expiration. Receives status object.

Instance Methods

Method	Returns	Description
`openPayment()`	`void`	Opens the QRIS payment popup/modal and starts the payment flow. Renders QR code in the target container.
`destroy()`	`void`	Cleans up the SDK instance, removes event listeners and DOM elements.
`checkStatus()`	`void`	Manually triggers a payment status check against the PopPay gateway.

About

About This Page

This is a standalone test harness for the @manjopackage/qris-payment-sdk. It runs entirely in the browser without a build step. Optionally connect to a Node.js Express backend at http://localhost:3000 for order persistence via MySQL.

Standalone Mode

Open index.html directly or serve via a local server (python3 -m http.server 8080). Orders are stored in localStorage. No backend required.

Backend Mode

Toggle "Connect to API" in the demo section. The Express server handles order creation, persistence, and payment status tracking via MySQL.

Domain Registration

Live QRIS payments require your domain to be registered in the PopPay admin panel. Test in a registered environment for full payment flows.