bjb-qrismpm-fe-node

v1.0.5

Published

2 months ago

BJB QRIS MPM Frontend SDK — CDN-ready payment modal with QR code, countdown timer, and auto-polling. Embed QRIS payments in any website with a single script tag.

0High
0Medium
0Low

khafidzhaikal

bjb qris mpm payment sdk frontend modal qrcode snap-bi cdn

BJB QRIS MPM Frontend SDK

Lightweight, CDN-ready JavaScript SDK for QRIS MPM payments. Displays a payment modal with QR code, countdown timer, and auto-polling — similar to Midtrans Snap or Xendit Checkout.

No sensitive data in the frontend. This SDK only calls your backend API. All SNAP BI signatures, access tokens, and credentials are handled server-side by bjb-qrismpm-sdk-node.

Installation

There are 3 ways to use this SDK:

Method 1: CDN via jsDelivr (recommended for quick integration)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bjb-qrismpm.umd.min.js"></script>
<script>
  const qris = new BjbQrisMpm({
    baseUrl: 'https://your-backend.com',
    onSuccess: (txn) => console.log('Paid!', txn),
  });
</script>

No install needed. Just add the <script> tag and BjbQrisMpm is available globally.

Method 2: CDN via unpkg

<script src="https://unpkg.com/[email protected]/dist/bjb-qrismpm.umd.min.js"></script>
<script>
  const qris = new BjbQrisMpm({
    baseUrl: 'https://your-backend.com',
    onSuccess: (txn) => console.log('Paid!', txn),
  });
</script>

Same as Method 1, different CDN provider.

Method 3: npm install (for bundler projects — React, Vue, Vite, Webpack)

npm install bjb-qrismpm-fe-node

Then import in your code:

import BjbQrisMpm from 'bjb-qrismpm-fe-node';

const qris = new BjbQrisMpm({
  baseUrl: 'https://your-backend.com',
  onSuccess: (txn) => console.log('Paid!', txn),
});

// Trigger payment
qris.open({
  partnerReferenceNo: 'ORDER-123',
  amount: { value: '50000', currency: 'IDR' },
  merchantId: '825670157598976',
  // ...
});

Method 3b: npm install + Express static (serve SDK from your own backend)

npm install bjb-qrismpm-fe-node

In your Express app:

const path = require('path');
app.use('/sdk', express.static(path.join(__dirname, '../node_modules/bjb-qrismpm-fe-node/dist')));

Then in your HTML:

<script src="/sdk/bjb-qrismpm.umd.js"></script>
<script>
  const qris = new BjbQrisMpm({ baseUrl: window.location.origin });
</script>

This way you serve the SDK from your own server — no external CDN dependency.

Quick Start — Full Example

<!DOCTYPE html>
<html>
<head>
  <title>Payment Page</title>
</head>
<body>
  <button id="pay-btn">Bayar Rp 50.000</button>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bjb-qrismpm.umd.min.js"></script>
  <script>
    const qris = new BjbQrisMpm({
      baseUrl: 'https://your-backend.com',
      pollingInterval: 3000,
      expiryDuration: 300,
      theme: 'light',
      onSuccess: (txn) => {
        alert('Pembayaran berhasil!');
        console.log(txn);
      },
      onFailed: (txn) => {
        alert('Pembayaran gagal');
        console.log(txn);
      },
      onExpired: () => {
        alert('QR kedaluwarsa');
      },
    });

    document.getElementById('pay-btn').addEventListener('click', () => {
      qris.open({
        partnerReferenceNo: 'ORDER-' + Date.now(),
        amount: { value: '50000', currency: 'IDR' },
        feeAmount: { value: '0.00', currency: 'IDR' },
        merchantId: '825670157598976',
        subMerchantId: '-',
        storeId: '-',
        terminalId: '825670157598976',
        additionalInfo: {
          paymentId: 1,
          merchantCode: '6282120596296',
          channelId: '3',
          transactionPurpose: 'Payment',
        },
      });
    });
  </script>
</body>
</html>

How It Works

Browser (this SDK)          Your Backend              BJB API
┌──────────────┐    POST /api/qris/create    ┌──────────┐    SNAP BI    ┌─────┐
│ Payment Modal│ ──────────────────────────→  │ Express  │ ───────────→ │ BJB │
│ - QR Code    │ ←──────────────────────────  │ + SDK    │ ←─────────── │     │
│ - Timer      │    { qrContent, qrImage }   │ Node.js  │              │     │
│ - Polling    │    POST /api/qris/status     │          │              │     │
│              │ ──────────────────────────→  │          │              │     │
└──────────────┘                              └──────────┘              └─────┘

User clicks "Pay" → qris.open(payload)
SDK calls POST /api/qris/create on your backend
Backend uses bjb-qrismpm-sdk-node to call BJB API
SDK displays QR code in a modal with countdown timer
SDK polls POST /api/qris/status every 3 seconds
On success → shows "Pembayaran berhasil", auto-closes after 2s
On expired → shows "Waktu habis", stops polling

Configuration

const qris = new BjbQrisMpm({
  baseUrl: 'https://your-backend.com',  // required
  pollingInterval: 3000,                 // ms (default: 3000)
  expiryDuration: 300,                   // seconds (default: 300)
  theme: 'light',                        // 'light' or 'dark'
  onSuccess: (transaction) => {},
  onFailed: (transaction) => {},
  onPending: (transaction) => {},
  onExpired: () => {},
});

| Option | Type | Default | Description | |--------|------|---------|-------------| | baseUrl | string | — | Your backend URL (required) | | pollingInterval | number | 3000 | Status polling interval in ms | | expiryDuration | number | 300 | QR expiry countdown in seconds | | theme | string | 'light' | 'light' or 'dark' | | onSuccess | function | — | Called when payment succeeds | | onFailed | function | — | Called when payment fails | | onPending | function | — | Called on each pending poll | | onExpired | function | — | Called when timer runs out |

Methods

| Method | Description | |--------|-------------| | qris.open(payload) | Create QRIS and open payment modal | | qris.close() | Close modal and stop polling | | qris.destroy() | Alias for close() |

Backend Requirements

Your backend must expose these two endpoints:

`POST /api/qris/create`

Receives the payment payload, calls BJB API, returns QR data.

Response must include:

{
  "responseCode": "2004700",
  "referenceNo": "523925829312",
  "partnerReferenceNo": "ORDER-123",
  "qrContent": "00020101021226...",
  "qrImage": "data:image/png;base64,..."
}

`POST /api/qris/status`

Receives reference numbers, returns transaction status.

Response must include:

{
  "latestTransactionStatus": "00"
}

Status codes: 00 = success, 05 = cancelled, 06 = failed.

Use bjb-qrismpm-sdk-node for the backend implementation.

Features

🎨 Clean modal UI (light & dark theme)
📱 Responsive / mobile-friendly
⏱️ Countdown timer with auto-expiry
🔄 Auto-polling for payment status
✅ Auto-close on success (2s delay)
🔒 No sensitive data in frontend
📦 7 KB minified — zero dependencies
🌐 UMD bundle — works with CDN, ES modules, or bundlers

Build from Source

git clone <repo>
cd sdk-fe-node
npm install
npm run build
# Output: dist/bjb-qrismpm.umd.js + dist/bjb-qrismpm.umd.min.js

License

ISC