Tujuan Pembelajaran

Mampu mengintegrasikan Midtrans Snap (popup) dan Core API
Memahami Xendit Invoice dan payment methods yang didukung
Mampu mengimplementasikan payment flow untuk pasar Indonesia

Analogi

Diagram


      Midtrans Snap vs Core API:

Snap (Popup):
Seperti kasir di minimarket — semua UI sudah disediakan.
Kamu tinggal panggil, user bayar, selesai.
Cocok untuk: setup cepat, tidak mau urus UI payment.

Core API:
Seperti mesin EDC yang kamu program sendiri.
Kamu kontrol penuh UI dan flow.
Cocok untuk: kustomisasi penuh, embedded experience.

Snap = kasir minimarket (UI ready). Core API = mesin EDC (kamu kontrol penuh). Pilih sesuai kebutuhan kustomisasi.

Penjelasan Konsep

Midtrans dan Xendit adalah dua payment gateway utama di Indonesia. Keduanya mendukung: transfer bank (BCA, Mandiri, BNI, BRI), e-wallet (GoPay, OVO, ShopeePay, Dana), kartu kredit/debit, QRIS, dan convenience store (Indomaret, Alfamart).

Midtrans Snap: Paling mudah. Panggil API untuk dapat snap_token → tampilkan popup Midtrans → user pilih metode bayar → bayar → Midtrans redirect dengan result. Semua UI payment ditangani Midtrans. Cocok untuk MVP.

Midtrans Core API: Lebih fleksibel. Kamu handle UI sendiri (pilihan bank, input detail). API endpoints: charge (kartu kredit), bank transfer (generate VA number), e-wallet (generate QR/deeplink). Kamu handle redirect dan status checking.

Xendit Invoice: Kirim invoice ke user via email/WhatsApp + halaman pembayaran. User buka link → pilih metode bayar → bayar. Xendit handle halaman pembayaran.

Status handling: settlement (sukses), pending (transfer bank — belum dibayar), expire (VA expired), deny (ditolak), cancel (dibatalkan). Webhook untuk notifikasi real-time ke backend.

Inti yang Perlu Dipahami

Bagian ini berfokus pada mampu mengintegrasikan Midtrans Snap (popup) dan Core API., memahami Xendit Invoice dan payment methods yang didukung., dan mampu mengimplementasikan payment flow untuk pasar Indonesia. Jangan terburu-buru menghafal istilahnya. Lebih penting untuk memahami peran setiap konsep dan kapan konsep itu muncul dalam pekerjaan web development.

Saat membaca Midtrans & Xendit, gunakan tujuan belajar sebagai penanda arah. Kalau kamu sudah bisa menjelaskan tujuan itu dengan kata-katamu sendiri, berarti fondasinya mulai terbentuk.

Cara Membayangkannya

Snap = kasir minimarket (UI ready). Core API = mesin EDC (kamu kontrol penuh). Pilih sesuai kebutuhan kustomisasi. Analogi ini dipakai supaya konsep teknis tidak terasa melayang. Hubungkan setiap istilah dengan perannya: siapa yang meminta, siapa yang memproses, data apa yang berpindah, dan hasil apa yang diharapkan.

Kalau analoginya sudah terasa masuk akal, barulah lihat istilah teknisnya. Cara ini membuat materi lebih mudah dipahami daripada langsung menghafal definisi.

Saat Melihat Contoh Kode

Contoh kode pada chapter ini memakai bahasa typescript. Bacalah contoh kode sebagai ilustrasi alur, bukan sebagai bagian yang harus langsung dihafal. Server key untuk API call (RAHASIA, jangan expose ke frontend). Client key hanya untuk Snap popup initialization. JANGAN campur — server key di frontend = orang bisa charge kartu siapa saja.

Perhatikan nama fungsi, urutan langkah, dan data yang berpindah. Biasanya tiga hal itu sudah cukup untuk memahami hubungan antara teori dan praktik.

Konteks dalam Perjalanan Belajar

Setiap konsep di platform ini dipilih karena dipakai di industri. Fokus pada pemahaman, bukan hafalan.

Kamu sudah di bagian lanjutan. Mulai pikirkan bagaimana konsep ini dipakai di dunia kerja — bukan hanya untuk belajar, tapi untuk membangun produk nyata.

Gunakan pertanyaan reflektif dan prompt AI di akhir chapter sebagai latihan aktif. Membaca saja tidak cukup — kamu perlu menjelaskan ulang dengan kata-katamu sendiri.

Contoh Kode

typescript

// Midtrans Snap integration
async function createTransaction(order: Order) {
  const transaction = {
    transaction_details: {
      order_id: order.id,
      gross_amount: order.total,
    },
    customer_details: {
      first_name: order.user.name,
      email: order.user.email,
      phone: order.user.phone,
    },
    item_details: order.items.map(item => ({
      id: item.productId,
      price: item.price,
      quantity: item.quantity,
      name: item.name,
    })),
  };

  const response = await fetch('https://app.midtrans.com/snap/v1/transactions', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Basic ' + Buffer.from(SERVER_KEY + ':').toString('base64'),
    },
    body: JSON.stringify(transaction),
  });
  
  const { token, redirect_url } = await response.json();
  return { snapToken: token, redirectUrl: redirect_url };
}

// Frontend: tampilkan Midtrans Snap
window.snap.pay(snapToken, {
  onSuccess: (result) => { /* handle success */ },
  onPending: (result) => { /* handle pending (bank transfer) */ },
  onError: (result) => { /* handle error */ },
  onClose: () => { /* user close popup */ },
});

Penjelasan Kode

Server key untuk API call (RAHASIA, jangan expose ke frontend). Client key hanya untuk Snap popup initialization. JANGAN campur — server key di frontend = orang bisa charge kartu siapa saja.

Prompt AI

Implementasi payment flow dengan Midtrans: produk digital (course online). Midtrans Snap + webhook handler untuk update status pembayaran. Buat mock webhook untuk testing.

Pertanyaan Reflektif

Test payment flow-mu: bayar via transfer bank (simulasi pending). Apakah status order ter-update saat pembayaran sukses? Atau user harus konfirmasi manual?