QRIS Payment SDK

SDK JavaScript/TypeScript ringan untuk integrasi pembayaran QRIS melalui gateway Poppay. Memungkinkan Anda membuka jendela pembayaran (popup) dengan minimal konfigurasi dan mendukung data dinamis.

✨ Fitur

• 🚀 Ringan: Tanpa dependensi berat.
• 📦 Multi-Format: Mendukung ESM (NPM) dan UMD (CDN).
• 🛠 Dinamis: Data transaksi bisa diinput dari sisi client.
• 🔗 Auto-Inquiry: Sudah termasuk logika pengecekan status pembayaran otomatis.

⚙️ Instalasi

Menggunakan NPM (Next.js, React, Vue, Laravel Vite)

npm i @manjopackage/qris-payment-sdk

Menggunakan CDN (Laravel Blade, HTML Statis)

Tambahkan script ini sebelum penutup tag </body>:

<script src="https://unpkg.com/@manjopackage/qris-payment-sdk/dist/qris-sdk.umd.js"></script>

🚀 Cara Penggunaan

1. Penggunaan di Framework Modern (ESM)

Jika Anda menggunakan bundler seperti Vite atau Webpack:

import { QrisSDK } from '@ilhampambudi/qris-payment-sdk';

const qris = new QrisSDK({
  amount: 50000
});

// Panggil fungsi ini pada event click tombol
const handlePay = () => {
  qris.openPayment();
};

2. Penggunaan di Laravel / Vanilla JS (UMD)

Setelah memanggil script dari CDN, class QrisSDK akan tersedia di objek window.

<button id="pay-button">Bayar Sekarang</button>

<script>
  const btn = document.getElementById('pay-button');
  
  const qris = new QrisSDK({
    amount: 15000,
    // Data lainnya akan menggunakan default jika tidak diisi
  });

  btn.onclick = () => {
    qris.openPayment();
  };
</script>

📖 Konfigurasi (Options)

Anda dapat mengirimkan objek konfigurasi saat inisialisasi new QrisSDK(config).

| Parameter | Tipe Data | Default | Deskripsi | | --- | --- | --- | --- | | amount | number | 10000 | Jumlah pembayaran dalam satuan Rupiah (IDR). | | notes | string | 'Payment via SDK' | Catatan transaksi yang akan muncul pada mutasi/laporan. | | externalId | string | ORDER-{timestamp} | ID unik dari sistem Anda untuk mempermudah rekonsiliasi. | | expirationInterval | number | 300 | Masa berlaku QR Code dalam hitungan detik (Default 5 menit). | | title | string | 'Pembayaran QRIS' | Judul teks yang ditampilkan pada header jendela popup. | | themeColor | string | '#1f2937' | Kode warna Hex untuk elemen UI (tombol, aksen, dll). | | baseUrl | string | 'https://uatapi...' | Endpoint API Gateway (gunakan Production URL untuk live). | | email | string | '[email protected]' | Email kredensial untuk login ke gateway. | | password | string | 'W8nu3...' | Password kredensial untuk login ke gateway. |

🛡 Keamanan (Penting)

Sangat disarankan untuk tidak mengekspos password Poppay Anda langsung di sisi client (Frontend) pada lingkungan produksi.

Rekomendasi: Gunakan backend bridge (API Laravel/NodeJS Anda sendiri) untuk melakukan proses autentikasi dan pembuatan transaksi, kemudian gunakan SDK ini hanya untuk menampilkan QR Code dan melakukan inquiry.