Uji Coba Pembayaran Gateway Lokal Tanpa Ribet
Platform pengujian checkout terintegrasi untuk Xendit Sandbox. Nikmati fitur **Simulasi Invoice QRIS, Virtual Account (BCA, Mandiri, BNI, BRI), E-Wallet (OVO, DANA, ShopeePay)** serta **Webhook Realtime Event Receiver & Inspector**.
Pilih Produk & Buat Invoice
Sistem memanggil Backend API `/api/fn/xendit-create-invoice` ke Xendit Sandbox API.
Simulasi Pembayaran Pelanggan
Bayar via QRIS Simulator / Virtual Account atau link invoice resmi Xendit.
Terima Callbacks Webhook Realtime
Callback `invoice.paid` masuk otomatis ke Listener `/api/fn/xendit-webhook-receiver` dan tampil di Console.
Pilih Paket SaaS & Top-Up Saldo
Pilih salah satu item di bawah ini untuk memulai skenario test checkout.
Pelacak Transaksi Active
Sistem melakukan polling otomatis setiap 3 detik untuk mengecek status invoice Xendit terbaru.
Belum Ada Transaksi Aktif
Pilih salah satu paket dari katalog produk di atas dan klik **Beli / Checkout** untuk membuat invoice test pembayaran.
Real-Time Webhook Console
Endpoint Listener: /api/fn/xendit-webhook-receiver
Kunci API & Token Verifikasi
Masukkan Xendit API Key Sandbox Anda untuk menghubungkan transaksi secara langsung ke Dashboard Xendit milik Anda.
Format: xnd_development_.... Ambil dari Dashboard Xendit > Settings > API Keys.
Token verifikasi callback yang disetting di Dashboard Xendit > Webhooks.
Mode Simulasi Tanpa API Key (Fallback Mock)
Jika Anda membiarkan bidang API Key kosong, sistem secara otomatis beralih ke **Mode Simulasi Sandbox Cerdas**. Anda tetap dapat menguji siklus checkout, pembuatan invoice, simulasi QRIS, dan penanganan webhook secara sempurna!
Cara Menangani Webhook Xendit di Backend
Gunakan potongan kode berikut untuk menerima & memverifikasi callback webhook Xendit pada aplikasi backend Anda sendiri.
// Node.js Express Webhook Handler Contoh
const express = require('express');
const app = express();
app.use(express.json());
const XENDIT_CALLBACK_TOKEN = process.env.XENDIT_CALLBACK_TOKEN || 'xen_verification_token_123';
app.post('/webhook/xendit', (req, res) => {
const callbackToken = req.headers['x-callback-token'];
// 1. Verifikasi Header Callback Token
if (callbackToken !== XENDIT_CALLBACK_TOKEN) {
return res.status(403).json({ status: 'error', message: 'Invalid verification token' });
}
const data = req.body;
console.log('Webhook Event Received:', data.event || 'invoice', data.id, data.status);
// 2. Tangani Status Invoice
if (data.status === 'PAID' || data.status === 'SETTLED') {
const externalId = data.external_id;
const amount = data.paid_amount || data.amount;
// Update status pesanan di database Anda...
console.log(`Pembayaran Berhasil untuk Order ${externalId} sebesar Rp ${amount}`);
}
// 3. Wajib Return HTTP 200 OK
return res.status(200).json({ status: 'success', message: 'Webhook received successfully' });
});
app.listen(3000, () => console.log('Webhook listener active on port 3000'));