Integrasi

Payment Gateway

Coba pembayaran berhasil dan gagal, lalu pelajari kode di baliknya.

Simulasi Midtrans

Gerbang pembayaran lokal: kartu, e-wallet, transfer bank, dan QRIS.

Midtrans

•••• •••• •••• 4242

Petualang Demo12/34

Pembayaran Gagal

Pilih skenario lalu tekan bayar.

Pilih skenario

Ini simulasi murni. Tidak ada uang yang bergerak dan tidak ada data kartu yang dikirim. Nomor di kartu hanya hiasan.

Kode siap pakai Midtrans

Midtrans Snap: bayar dengan popup

Server membuat token transaksi, lalu browser membuka popup pembayaran Midtrans.

Next.jsapp/api/midtrans/route.ts
// 1) SERVER: app/api/midtrans/route.ts
import midtransClient from "midtrans-client";

const snap = new midtransClient.Snap({
  isProduction: false, // ubah ke true hanya saat sudah live
  serverKey: process.env.MIDTRANS_SERVER_KEY,
  clientKey: process.env.MIDTRANS_CLIENT_KEY,
});

export async function POST(request: Request) {
  const { amount, name, email } = await request.json();

  const transaction = await snap.createTransaction({
    transaction_details: { order_id: "ORDER-" + Date.now(), gross_amount: amount },
    customer_details: { first_name: name, email },
  });

  return Response.json({ token: transaction.token });
}

// 2) BROWSER: panggil popup setelah mendapat token
// <script src="https://app.sandbox.midtrans.com/snap/snap.js"
//         data-client-key="ISI_CLIENT_KEY_SANDBOX"></script>
const res = await fetch("/api/midtrans", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ amount: 149000, name: "Budi", email: "budi@contoh.com" }),
});
const { token } = await res.json();

window.snap.pay(token, {
  onSuccess: () => console.log("Pembayaran berhasil"),
  onPending: () => console.log("Menunggu pembayaran"),
  onError: () => console.log("Pembayaran gagal"),
  onClose: () => console.log("Popup ditutup"),
});
  • Server Key bersifat rahasia. Simpan di environment variable, jangan di kode browser.
  • Mulai dari akun Sandbox Midtrans. Kartu uji tersedia di dokumentasi resmi.
  • Status pembayaran yang final harus diverifikasi lewat notifikasi webhook, bukan callback browser.
  • Paket npm: npm install midtrans-client