Integrasi Payment Gateway Midtrans di Aplikasi Node.js dan React

Setup Akun dan Konfigurasi

Buat akun di Midtrans Dashboard dan aktifkan Sandbox Mode untuk proses development. Dari menu Access Keys, dapatkan Server Key dan Client Key.

Server Key hanya boleh digunakan di backend dan tidak boleh diekspos ke frontend. Simpan credential menggunakan environment variable agar lebih aman.

Backend Membuat Transaction Token

Install library Midtrans untuk Node.js:

npm install midtrans-client

Gunakan Server Key pada backend untuk membuat transaksi melalui Snap API. Sertakan informasi seperti order ID, gross amount, customer details, dan item details.

Setelah transaksi berhasil dibuat, Midtrans akan mengembalikan Snap Token. Token inilah yang nantinya diberikan kepada frontend untuk membuka halaman pembayaran.

Frontend dengan Midtrans Snap

Frontend React perlu memuat Midtrans Snap script pada halaman checkout.

Ketika pengguna memilih untuk membayar, React meminta Snap Token dari backend. Setelah token diterima, panggil:

snap.pay(token, callbacks);

Midtrans kemudian menampilkan payment popup yang memungkinkan pengguna memilih metode pembayaran yang tersedia.

Webhook untuk Notifikasi Pembayaran

Setelah transaksi dibuat, jangan hanya mengandalkan response dari frontend. Gunakan webhook agar backend menerima informasi ketika status transaksi berubah.

Midtrans akan mengirim notifikasi ke endpoint yang telah dikonfigurasi. Backend harus melakukan validasi signature sebelum memperbarui status order.

Signature dapat diverifikasi menggunakan kombinasi:

order_id + status_code + gross_amount + server_key

yang kemudian di-hash menggunakan SHA-512.

Handling Status Transaksi

Backend perlu menangani berbagai status pembayaran, misalnya:

• Settlement — pembayaran berhasil dan order dapat diproses.

• Pending — pembayaran masih menunggu penyelesaian.

• Cancel / Expire — transaksi dibatalkan atau telah kedaluwarsa.

• Deny — pembayaran ditolak oleh bank atau sistem fraud detection.

Jangan mengubah status order hanya berdasarkan informasi dari client. Webhook dan verifikasi server-side harus menjadi sumber utama untuk menentukan status pembayaran.

Testing End-to-End

Gunakan Midtrans Sandbox selama development dan manfaatkan data pembayaran test yang tersedia.

Uji berbagai skenario seperti:

• Pembayaran berhasil

• Pembayaran gagal

• Status pending

• Transaksi expired

• Webhook diterima

• Status order berhasil diperbarui

Pastikan seluruh alur berjalan dari checkout hingga perubahan status order di database.

Kesimpulan

Integrasi Midtrans dengan Node.js dan React membutuhkan pemisahan yang jelas antara frontend dan backend. Frontend menangani pengalaman checkout, sedangkan backend bertanggung jawab membuat transaksi, menjaga credential, memvalidasi webhook, dan menentukan status pembayaran secara aman.