Integrasi Payment Gateway Indonesia (Midtrans, Xendit, Doku) pada Web App Modern

Dalam lanskap bisnis e-commerce dan aplikasi web modern di Indonesia, menyediakan metode pembayaran digital yang otomatis dan aman seperti QRIS, Transfer Virtual Account (VA), E-Wallet (GoPay, OVO, ShopeePay), dan Kartu Kredit adalah kebutuhan mutlak.

Payment Gateway seperti Midtrans dan Xendit mempermudah pengembang dalam memproses transaksi tanpa perlu membuat koneksi perbankan manual. Artikel ini membahas langkah-langkah arsitektur integrasi payment gateway pada web app berbasis Next.js dan Node.js.

1. Alur Transaksi Payment Gateway

Alur kerja umum integrasi payment gateway menggunakan metode Snap/Checkout:

[User / Frontend] ─── (1. Klik Bayar) ───> [Backend Next.js/Node]
                                                  │
                                          (2. Create Snap Token)
                                                  │
                                                  ▼
[User Window] <─── (3. Popup Payment) ─── [Payment Gateway API]
       │                                          │
 (4. User Bayar)                                  │
       │                                          │
       └────────────── (5. Webhook Async) ────────┘
                          │
                          ▼
             [Backend Callback Handler] ───> (Update Database Status)

2. Implementasi Backend Trigger Transaksi (Next.js / Node.js)

Berikut adalah contoh pembuatan transaksi menggunakan library resmi Midtrans SDK di Node.js API Route:

import { NextResponse } from 'next/server';
import midtransClient from 'midtrans-client';

const snap = new midtransClient.Snap({
  isProduction: false,
  serverKey: process.env.MIDTRANS_SERVER_KEY || '',
  clientKey: process.env.MIDTRANS_CLIENT_KEY || '',
});

export async function POST(request: Request) {
  try {
    const { orderId, amount, customerDetails } = await request.json();

    const parameter = {
      transaction_details: {
        order_id: orderId,
        gross_amount: amount,
      },
      customer_details: customerDetails,
    };

    const transaction = await snap.createTransaction(parameter);
    return NextResponse.json({ token: transaction.token, redirect_url: transaction.redirect_url });
  } catch (error) {
    return NextResponse.json({ error: 'Gagal memproses transaksi' }, { status: 500 });
  }
}

3. Penanganan Webhook (Notification Callback) Secara Aman

Hal paling krusial dalam integrasi payment gateway adalah Verifikasi Signature Key Webhook. Jangan pernah memperbarui status pembayaran di database sebelum memverifikasi bahwa callback benar-benar dikirim oleh server Midtrans/Xendit.

Contoh Validasi Signature Key (SHA512):

import crypto from 'crypto';

function verifyMidtransSignature(orderId: string, statusCode: string, grossAmount: string, serverKey: string, inputSignature: string) {
  const hash = crypto
    .createHash('sha512')
    .update(`${orderId}${statusCode}${grossAmount}${serverKey}`)
    .digest('hex');
  return hash === inputSignature;
}

4. Best Practices Integrasi Payment Gateway

Idempotency: Pastikan Handler Webhook dapat dipanggil berulang kali (retry mechanism) tanpa memicu duplikasi transaksi di database.
Logging Audit: Catat setiap payload webhook dari Payment Gateway di database log untuk kemudahan penelusuran jika terjadi kendala.
Environment Isolation: Pisahkan Environment Sandbox (Development) dan Production secara ketat melalui file .env.

Bangun Sistem Pembayaran Digital Bersama Megasolusindo

Integrasi pembayaran digital yang stabil dan aman adalah kunci konversi penjualan bisnis Anda. Tim Megasolusindo siap membantu mengimplementasikan payment gateway (Midtrans, Xendit, Doku) pada platform SaaS, E-Commerce, maupun aplikasi kustom Anda.

Hubungi Tim Developer Megasolusindo