Tutorial Integrasi Xendit Payment Gateway ke Website Next.js Custom Indonesia

1. Daftar Akun Xendit dan Dapatkan API Key

Daftar di dashboard.xendit.co dan lengkapi data bisnis Anda. Untuk mulai development, Anda tidak perlu menunggu verifikasi selesai — API key sandbox tersedia langsung setelah registrasi. Di dashboard, navigasi ke Settings → API Keys. Anda akan mendapatkan dua kunci:

• •Secret Key (prefix xnd_development_ atau xnd_production_) — hanya untuk server-side
• •Public Key — untuk operasi client-side seperti tokenisasi kartu kredit

Peringatan keamanan: Secret Key TIDAK BOLEH ada di kode client-side (komponen React, browser), di-commit ke repository, atau di-log di console. Simpan hanya di environment variable server-side.

2. Install Xendit SDK dan Konfigurasi Environment

Install package SDK resmi Xendit untuk Node.js:

npm install xendit-node

Tambahkan API key ke file .env.local:

XENDIT_SECRET_KEY=xnd_development_XXXXXXXXXXXXXXXXXX
XENDIT_WEBHOOK_TOKEN=token-verifikasi-webhook-anda
NEXT_PUBLIC_BASE_URL=http://localhost:3000

Pastikan XENDIT_SECRET_KEY tanpa prefix NEXT_PUBLIC_ — variabel dengan prefix tersebut akan diekspos ke browser oleh Next.js.

Buat API Route untuk Generate Invoice

Buat file app/api/create-payment/route.ts(App Router) atau pages/api/create-payment.ts(Pages Router):

// app/api/create-payment/route.ts
import { NextRequest, NextResponse } from 'next/server';
import Xendit from 'xendit-node';

const xendit = new Xendit({ secretKey: process.env.XENDIT_SECRET_KEY! });
const { Invoice } = xendit;

export async function POST(req: NextRequest) {
  const { orderId, amount, customerEmail, description } = await req.json();

  const invoice = await Invoice.createInvoice({
    externalID: orderId,
    amount,
    description,
    payerEmail: customerEmail,
    successRedirectURL: `${process.env.NEXT_PUBLIC_BASE_URL}/pembayaran/sukses`,
    failureRedirectURL: `${process.env.NEXT_PUBLIC_BASE_URL}/pembayaran/gagal`,
    currency: 'IDR',
  });

  return NextResponse.json({ invoiceUrl: invoice.invoiceUrl, invoiceId: invoice.id });
}

Konfigurasi Webhook untuk Konfirmasi Pembayaran

Xendit mengirim notifikasi real-time ke endpoint webhook Anda setiap kali status pembayaran berubah. Buat handler di app/api/xendit-webhook/route.ts:

// app/api/xendit-webhook/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
  // Validasi webhook token dari Xendit
  const callbackToken = req.headers.get('x-callback-token');
  if (callbackToken !== process.env.XENDIT_WEBHOOK_TOKEN) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }

  const payload = await req.json();

  if (payload.status === 'PAID') {
    const orderId = payload.external_id;
    // Update status order di database Anda
    await updateOrderStatus(orderId, 'paid');
    // Kirim email konfirmasi ke pelanggan, trigger fulfillment, dll.
  }

  return NextResponse.json({ received: true });
}

Daftarkan URL webhook di dashboard Xendit: Settings → Webhooks → Invoice Paid. Format URL: https://yourdomain.com/api/xendit-webhook

Trigger Pembayaran dari Komponen React

Di sisi client, panggil API Route untuk mendapatkan URL invoice, lalu arahkan pelanggan ke halaman pembayaran Xendit:

// Contoh handler tombol "Bayar Sekarang"
const handleCheckout = async () => {
  const res = await fetch('/api/create-payment', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      orderId: `ORDER-${Date.now()}`,
      amount: totalHarga,
      customerEmail: email,
      description: 'Pembelian produk XYZ',
    }),
  });

  const { invoiceUrl } = await res.json();
  window.location.href = invoiceUrl; // redirect ke halaman bayar Xendit
};