Dokumentasi API Generator QRIS Dinamis

1. Pengantar

QRIS Statis (yang biasa dicetak di akrilik atau meja kasir) mengharuskan pelanggan mengetik nominal secara manual. Dengan API EBayar, Anda dapat membuat QRIS Dinamis secara real-time sehingga pembeli tinggal memindai dan langsung membayar tanpa harus mengetik nominal.

Konsep Zero-Load Server (Optimasi Klien): Kami merekomendasikan agar Anda hanya menggunakan API kami untuk mengubah teks QRIS Statis menjadi teks QRIS Dinamis, dan membiarkan Browser/HP Pelanggan yang bekerja mengubah teks tersebut menjadi gambar QR Code. Pendekatan ini memastikan server (backend) Anda tidak akan pernah kelebihan beban (overload) meskipun diakses oleh ribuan orang secara bersamaan.

2. Endpoint API

Parameter Body (JSON)

Contoh Respons (JSON)

{
  "status": "success",
  "qrisDinamis": "000201010212...6304FB7D"
}

3. Panduan Client-Side Render (Kode HTML & JS)

Berikut adalah contoh kode HTML lengkap yang bisa langsung Anda copy-paste ke dalam halaman pembayaran (checkout) atau tagihan (invoice) website Anda.

1. Muat pustaka qrcode.js dari CDN.
2. Buat penampung (container) HTML untuk gambar QR.
3. Panggil API EBayar untuk mendapatkan qrisDinamis.
4. Render gambar menggunakan new QRCode().

<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

<div id="qr-container"></div>

<script>
const qrisStatis = "000201010211...STRING_QRIS_ANDA...6304FB7D";
const nominal = "75000"; // Ambil dinamis dari database/cart Anda

async function generateAndRenderQR() {
    try {
        // 1. Panggil API EBayar
        const response = await fetch('https://ebayar.app/api/generate-qris', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ qrisStatis, nominal })
        });
        
        const data = await response.json();
        if (data.status === 'success') {
            // 2. Render gambar secara lokal di komputer pembeli
            const qrContainer = document.getElementById('qr-container');
            qrContainer.innerHTML = '';
            
            new QRCode(qrContainer, {
                text: data.qrisDinamis,
                width: 250,
                height: 250,
                correctLevel : QRCode.CorrectLevel.M
            });
        }
    } catch (err) {
        console.error('Gagal membuat QRIS:', err);
    }
}

generateAndRenderQR();
</script>

4. Lihat Demo (Simulasi)

Untuk melihat hasil desain langsung yang telah dioptimalkan secara estetika (lengkap dengan nama merchant dan formatting rupiah), klik tombol di bawah ini: