Cara Integrasi QRIS ke Website: Panduan Lengkap 3 Metode (Plugin, API & Hosted Page) 2026

Oleh Tim Editorial CairLink | Diperbarui:

Memiliki website bisnis tapi belum bisa menerima pembayaran QRIS? Anda kehilangan potensi penjualan yang sangat besar. Di 2026, lebih dari 70% konsumen Indonesia lebih memilih membayar via QRIS daripada transfer manual.

Kabar baiknya: integrasi QRIS ke website tidak serumit yang Anda kira. Ada 3 metode utama, dari yang paling mudah (tanpa coding) hingga yang paling fleksibel (full API). Panduan ini akan membahas ketiganya secara lengkap dengan contoh kode dan rekomendasi payment gateway terbaik untuk setiap metode.

⚡ Ringkasan: 3 Metode Integrasi QRIS ke Website

  1. Plugin Siap Pakai (Paling Mudah): Untuk WooCommerce/Shopify, tanpa coding, 5-15 menit
  2. Hosted Payment Page (Menengah): Redirect ke halaman gateway, dasar HTML/PHP, 1-2 jam
  3. API Integration (Advanced): Kustomisasi penuh, butuh developer, 1-3 hari

Rekomendasi utama: QRISPay menyediakan ketiga metode di atas dengan dokumentasi lengkap dan support 24/7.

📊 Perbandingan 3 Metode Integrasi QRIS

Metode Platform Skill Dibutuhkan Waktu Integrasi Fleksibilitas
Plugin Siap Pakai WooCommerce, Shopify, WordPress Tidak perlu coding 5-15 menit Terbatas (fitur bawaan plugin)
Hosted Payment Page Website custom (PHP, Laravel, dll) Dasar HTML/PHP 1-2 jam Sedang (bisa custom tampilan redirect)
API Integration Website custom, mobile app Developer (PHP, Node.js, Python, dll) 1-3 hari Penuh (kustomisasi 100%)

🔌 Metode 1: Plugin Siap Pakai (Paling Mudah untuk Pemula)

Jika website Anda menggunakan WooCommerce, Shopify, atau WordPress, ini adalah metode tercepat. Anda tidak perlu menyentuh satu baris kode pun.

Langkah-Langkah Integrasi via Plugin WooCommerce:

  1. Daftar akun merchant di QRISPay.site (gratis, 5 menit)
  2. Verifikasi identitas (KTP + NIB untuk UMKM)
  3. Dapatkan API Key dari dashboard merchant QRISPay
  4. Download plugin QRISPay WooCommerce dari dashboard atau WordPress repository
  5. Install & aktifkan plugin di WordPress (Plugins → Add New → Upload)
  6. Masukkan API Key di pengaturan plugin (WooCommerce → Settings → Payments → QRISPay)
  7. Test transaksi menggunakan sandbox mode sebelum go-live

✅ Keuntungan Metode Plugin:

  • Tanpa coding, cocok untuk pemula
  • Integrasi 5-15 menit
  • Auto-update fitur baru dari gateway
  • Support resmi dari plugin developer

🔗 Metode 2: Hosted Payment Page (Untuk Website Custom Sederhana)

Jika website Anda dibuat custom (PHP native, Laravel, dll) dan Anda tidak ingin repot dengan API, metode hosted payment page adalah solusinya. Pelanggan akan di-redirect ke halaman pembayaran yang di-host oleh payment gateway.

Contoh Kode PHP Sederhana (Redirect ke QRISPay):

<?php
// Konfigurasi QRISPay
$api_key = 'your_api_key_here';
$merchant_id = 'your_merchant_id';
$amount = 100000; // Rp 100.000
$order_id = 'ORDER-' . time();
$callback_url = 'https://yourwebsite.com/callback.php';

// Data transaksi
$payload = [
    'merchant_id' => $merchant_id,
    'order_id' => $order_id,
    'amount' => $amount,
    'product_name' => 'Paket Premium',
    'customer_name' => 'John Doe',
    'customer_email' => 'john@example.com',
    'callback_url' => $callback_url,
    'return_url' => 'https://yourwebsite.com/thank-you.php'
];

// Generate signature (keamanan)
$signature = hash_hmac('sha256', json_encode($payload), $api_key);
$payload['signature'] = $signature;

// Redirect ke halaman pembayaran QRISPay
$payment_url = 'https://payment.qrispay.site/pay?' . http_build_query($payload);
header('Location: ' . $payment_url);
exit;
?>

⚠️ Catatan Penting:

  • Kode di atas adalah contoh ilustratif. Dokumentasi API lengkap tersedia di dashboard merchant QRISPay.
  • Selalu gunakan HTTPS untuk callback URL agar data transaksi aman.
  • Verifikasi signature di callback untuk mencegah manipulasi data.

⚙️ Metode 3: API Integration (Untuk Developer & Bisnis Besar)

Ini adalah metode paling fleksibel. Pelanggan tetap berada di website Anda selama proses pembayaran, dan Anda memiliki kontrol penuh atas tampilan dan alur transaksi.

Arsitektur Integrasi API QRIS:

ALUR INTEGRASI API
1. Pelanggan klik "Bayar" di website Anda
2. Website kirim POST request ke QRISPay API → /v1/create-transaction
3. API balas dengan qr_string (data QR code) dan transaction_id
4. Website tampilkan QR code ke pelanggan (pakai library QR generator)
5. Pelanggan scan QR → bayar → bank kirim notifikasi ke QRISPay
6. QRISPay kirim webhook ke website Anda → /callback.php
7. Website update status pesanan → kirim email konfirmasi ke pelanggan

Contoh Callback Handler (PHP):

<?php
// callback.php - Dipanggil oleh QRISPay setelah pelanggan bayar
$api_key = 'your_api_key_here';
$payload = file_get_contents('php://input');
$data = json_decode($payload, true);

// Verifikasi signature
$received_signature = $data['signature'] ?? '';
unset($data['signature']);
$expected_signature = hash_hmac('sha256', json_encode($data), $api_key);

if ($received_signature !== $expected_signature) {
    http_response_code(403);
    exit('Invalid signature');
}

// Proses berdasarkan status transaksi
if ($data['status'] === 'success') {
    $order_id = $data['order_id'];
    $amount = $data['amount'];
    
    // TODO: Update status pesanan di database
    // TODO: Kirim email konfirmasi ke pelanggan
    // TODO: Kirim notifikasi ke admin
    
    error_log("Pembayaran berhasil: Order {$order_id}, Amount {$amount}");
}

// Response ke QRISPay (wajib)
http_response_code(200);
echo json_encode(['status' => 'ok']);
?>

🔐 Best Practices Keamanan API:

  • Selalu simpan API Key di environment variable, jangan di-hardcode
  • Gunakan HTTPS untuk semua endpoint
  • Verifikasi signature di setiap callback
  • Implementasi idempotency key untuk mencegah double-charge
  • Gunakan sandbox environment untuk testing sebelum production

🏆 Rekomendasi Payment Gateway untuk Setiap Metode Integrasi

🔌 Untuk Plugin (Pemula)

Rekomendasi: QRISPay

Alasan: Plugin gratis untuk WooCommerce/Shopify, setup wizard interaktif, support 24/7 via WhatsApp.

Coba Sekarang →

🔗 Untuk Hosted Page (Menengah)

Rekomendasi: QRISPay Payment Link

Alasan: Dokumentasi redirect sederhana, contoh kode PHP/Node.js/Python, sandbox testing.

Lihat Dokumentasi →

⚙️ Untuk API (Developer)

Rekomendasi: QRISPay API

Alasan: RESTful API modern, SDK untuk 5+ bahasa pemrograman, webhook real-time, Postman collection.

Akses API Docs →

✅ Checklist Sebelum Integrasi QRIS Go-Live

Pastikan Anda sudah menyelesaikan semua poin berikut sebelum menerima pembayaran nyata:

  • ☐ Akun merchant sudah terverifikasi (KTP + NIB)
  • ☐ API Key sudah di-generate dan disimpan aman
  • ☐ Testing di sandbox environment berhasil (minimal 5 transaksi)
  • ☐ Callback URL sudah menggunakan HTTPS
  • ☐ Verifikasi signature di callback sudah diimplementasi
  • ☐ Email notifikasi ke pelanggan sudah berfungsi
  • ☐ Rekening bank untuk settlement sudah terhubung
  • ☐ Customer support siap menangani pertanyaan pelanggan
  • ☐ Switch dari sandbox ke production sudah dilakukan

Kesimpulan: Integrasi QRIS Lebih Mudah dari yang Anda Kira

Apakah Anda pemula tanpa skill coding atau developer berpengalaman, ada metode integrasi QRIS yang cocok untuk Anda. QRISPay menyediakan solusi lengkap untuk ketiga metode dengan dokumentasi yang sangat jelas dan support teknis 24/7.

Mulai Integrasi QRIS dengan QRISPay →

❓ Pertanyaan Umum Seputar Integrasi QRIS

Apa cara termudah mengintegrasikan QRIS ke website?

Cara termudah adalah menggunakan plugin siap pakai untuk platform seperti WooCommerce, Shopify, atau WordPress. QRISPay menyediakan plugin gratis yang bisa diinstal dalam 5 menit tanpa coding. Cukup instal, masukkan API key, dan website Anda langsung bisa menerima pembayaran QRIS.

Apakah saya perlu kemampuan coding untuk integrasi QRIS?

Tidak wajib. Jika Anda menggunakan platform seperti WooCommerce atau Shopify, cukup instal plugin dan ikuti wizard setup. Namun, jika Anda punya website custom (PHP, Laravel, Node.js), Anda bisa menggunakan API documentation lengkap dari QRISPay dengan contoh kode dalam berbagai bahasa pemrograman.

Berapa lama waktu yang dibutuhkan untuk integrasi QRIS?

Dengan plugin WooCommerce/Shopify: 5-15 menit. Dengan hosted payment page (redirect): 1-2 jam. Dengan integrasi API custom: 1-3 hari tergantung kompleksitas website. QRISPay menyediakan sandbox/testing environment untuk memastikan integrasi berjalan lancar sebelum go-live.

Apakah integrasi QRIS aman untuk data pelanggan?

Ya, selama Anda menggunakan payment gateway yang sudah bersertifikasi PCI-DSS Level 1 seperti QRISPay. Data kartu/tokens tidak pernah disimpan di server Anda, melainkan di-enkripsi dan di-tokenize oleh gateway. Website Anda hanya menerima notifikasi status transaksi (success/failed), bukan data sensitif pelanggan.

Apa perbedaan plugin, hosted payment page, dan API integration?

Plugin: Solusi siap pakai untuk platform populer (WooCommerce, Shopify), paling mudah, tanpa coding. Hosted Payment Page: Pelanggan di-redirect ke halaman pembayaran gateway, keamanan 100% di tangan gateway, integrasi sederhana via redirect URL. API Integration: Kustomisasi penuh, pelanggan tetap di website Anda, butuh developer, paling fleksibel.

Payment gateway mana yang paling mudah diintegrasikan untuk pemula?

QRISPay adalah pilihan terbaik untuk pemula berkat plugin gratis untuk WooCommerce/Shopify, dokumentasi API yang sangat jelas dengan contoh kode, sandbox testing environment, dan support 24/7 via WhatsApp yang responsif membantu jika ada kendala teknis.

📚 Artikel Terkait