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