Tutorial Integrasi Payment Gateway Midtrans Laravel 12 React JS: Panduan Lengkap 2025

oleh

Pendahuluan: Mengapa Memilih Midtrans untuk Laravel 12 dan React JS?

Membangun aplikasi e-commerce atau platform SaaS yang sukses di Indonesia membutuhkan sistem pembayaran yang handal, aman, dan mudah digunakan. Dalam tutorial integrasi payment gateway midtrans laravel 12 react js ini, kita akan mengupas tuntas cara menggabungkan tiga teknologi mutakhir untuk menciptakan pengalaman transaksi yang mulus bagi pengguna Anda.

Laravel 12 hadir dengan peningkatan performa yang signifikan, sementara React JS tetap menjadi pilihan utama untuk membangun antarmuka pengguna yang reaktif. Dengan mengintegrasikan Midtrans, Anda mendapatkan akses ke berbagai metode pembayaran populer seperti GoPay, ShopeePay, Virtual Account, hingga Kartu Kredit hanya dengan satu API. Mari kita mulai perjalanan teknis ini untuk meningkatkan kapabilitas aplikasi Anda.

1. Persiapan Awal dan Prasyarat

Sebelum masuk ke kode, pastikan lingkungan pengembangan Anda sudah siap. Mengingat kita menggunakan Laravel 12, ada beberapa spesifikasi minimum yang harus dipenuhi agar proses tutorial integrasi payment gateway midtrans laravel 12 react js ini berjalan lancar.

  • PHP 8.3 atau lebih baru: Laravel 12 membutuhkan versi PHP terbaru untuk fitur-fitur modernnya.
  • Composer: Untuk mengelola dependensi PHP.
  • Node.js & NPM/Bun: Untuk menjalankan React JS dan Vite.
  • Akun Midtrans: Daftar di Midtrans Dashboard untuk mendapatkan Server Key dan Client Key (gunakan mode Sandbox untuk pengembangan).
  • Database: MySQL, PostgreSQL, atau SQLite.

2. Setup Proyek Laravel 12

Langkah pertama adalah membuat proyek Laravel baru. Buka terminal Anda dan jalankan perintah berikut:

composer create-project laravel/laravel midtrans-laravel-react

Setelah proses instalasi selesai, masuk ke direktori proyek dan instal starter kit Laravel Breeze agar kita mendapatkan scaffolding React secara otomatis:

composer require laravel/breeze --dev
php artisan breeze:install react

Perintah di atas akan mengonfigurasi Laravel 12 dengan React JS menggunakan Vite. Jangan lupa untuk menjalankan migrasi awal dan menginstal dependensi NPM:

php artisan migrate
npm install && npm run dev

3. Instalasi dan Konfigurasi SDK Midtrans

Untuk memudahkan komunikasi dengan API Midtrans, kita akan menggunakan library resmi. Jalankan perintah berikut di root folder proyek Anda:

composer require midtrans/midtrans-php

Setelah terinstal, buka file .env Anda dan tambahkan kredensial dari dashboard Midtrans:

MIDTRANS_SERVER_KEY=SB-Mid-server-xxxxxxxxxxxx
MIDTRANS_CLIENT_KEY=SB-Mid-client-xxxxxxxxxxxx
MIDTRANS_IS_PRODUCTION=false
MIDTRANS_IS_SANITIZED=true
MIDTRANS_IS_3DS=true

Tip: Pastikan Anda tidak membagikan Server Key Anda kepada siapapun atau mengunggahnya ke repositori publik.

4. Membuat Database dan Model Transaksi

Kita memerlukan tabel untuk menyimpan data pesanan dan status pembayarannya. Buat migration baru:

php artisan make:model Order -m

Buka file migration yang baru dibuat di database/migrations/xxxx_create_orders_table.php dan definisikan strukturnya:

public function up()
{
    Schema::create('orders', function (Table $table) {
        $table->id();
        $table->string('number');
        $table->decimal('total_price', 15, 2);
        $table->string('payment_status')->default('pending');
        $table->string('snap_token')->nullable();
        $table->timestamps();
    });
}

Jalankan php artisan migrate untuk menerapkan perubahan ke database.

5. Membangun API Backend untuk Snap Token

Inti dari tutorial integrasi payment gateway midtrans laravel 12 react js adalah pembuatan Snap Token. Token ini digunakan oleh frontend React untuk menampilkan popup pembayaran Midtrans.

Buat controller baru bernama PaymentController:

php artisan make:controller PaymentController

Di dalam controller tersebut, tambahkan logika untuk membuat transaksi:

use MidtransConfig;
use MidtransSnap;

public function createToken(Request $request)
{
    Config::$serverKey = config('services.midtrans.serverKey');
    Config::$isProduction = config('services.midtrans.isProduction');
    Config::$isSanitized = config('services.midtrans.isSanitized');
    Config::$is3ds = config('services.midtrans.is3ds');

    $params = [
        'transaction_details' => [
            'order_id' => 'ORD-' . uniqid(),
            'gross_amount' => $request->amount,
        ],
        'customer_details' => [
            'first_name' => $request->user()->name,
            'email' => $request->user()->email,
        ],
    ];

    $snapToken = Snap::getSnapToken($params);
    return response()->json(['snap_token' => $snapToken]);
}

6. Integrasi Frontend dengan React JS

Sekarang kita beralih ke sisi client. Pertama, kita perlu memuat script Snap Midtrans di file app.blade.php atau langsung di komponen React Anda. Untuk keamanan dan performa, disarankan memuatnya secara dinamis.

Di komponen React Anda (misalnya Checkout.jsx), buat fungsi untuk menangani pembayaran:

import React, { useEffect } from 'react';
import axios from 'axios';

const Checkout = () => {
    const handlePayment = async () => {
        const response = await axios.post('/api/payment/token', { amount: 100000 });
        const token = response.data.snap_token;

        window.snap.pay(token, {
            onSuccess: function(result) { console.log('success', result); },
            onPending: function(result) { console.log('pending', result); },
            onError: function(result) { console.log('error', result); },
            onClose: function() { console.log('customer closed the popup'); }
        });
    };

    return (
        <button onClick={handlePayment} className="bg-blue-500 text-white p-2 rounded">
            Bayar Sekarang
        </button>
    );
};

Pastikan Anda telah menambahkan <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="YOUR_CLIENT_KEY"></script> di bagian head HTML Anda.

7. Menangani Notifikasi Webhook (Penting!)

Jangan pernah mengandalkan callback frontend (onSuccess) untuk memperbarui status transaksi di database karena alasan keamanan. Anda harus menggunakan Webhook.

Buat method notificationHandler di PaymentController:

public function notificationHandler(Request $request)
{
    $payload = $request->getContent();
    $notification = json_decode($payload);

    $validSignatureKey = hash("sha512", $notification->order_id . $notification->status_code . $notification->gross_amount . config('services.midtrans.serverKey'));

    if ($notification->signature_key !== $validSignatureKey) {
        return response()->json(['message' => 'Invalid signature'], 403);
    }

    $order = Order::where('number', $notification->order_id)->first();
    if ($notification->transaction_status == 'settlement') {
        $order->update(['payment_status' => 'paid']);
    }
    // Tambahkan logika untuk status lain (pending, expire, cancel)

    return response()->json(['status' => 'success']);
}

Daftarkan route ini di routes/api.php dan pastikan untuk mengecualikannya dari proteksi CSRF di bootstrap/app.php (untuk Laravel 12).

8. Keamanan dan Praktik Terbaik

Dalam mengimplementasikan tutorial integrasi payment gateway midtrans laravel 12 react js, keamanan adalah prioritas utama. Berikut adalah beberapa poin yang harus Anda perhatikan:

  • Validasi Signature Key: Selalu periksa signature key pada setiap notifikasi webhook untuk memastikan data berasal dari Midtrans.
  • Environment Variables: Jangan hardcode API keys. Gunakan file .env.
  • Idempotency: Pastikan sistem Anda dapat menangani notifikasi webhook yang dikirim berulang kali oleh Midtrans.
  • Logging: Catat setiap transaksi dan respon API untuk memudahkan debugging jika terjadi perselisihan pembayaran.

9. Pengujian di Mode Sandbox

Sebelum go-live, lakukan pengujian menyeluruh menggunakan simulator Midtrans. Anda bisa menggunakan nomor kartu kredit dummy yang disediakan oleh Midtrans untuk mensimulasikan transaksi sukses, gagal, atau tantangan (challenge).

Periksa tab “Transactions” di dashboard Midtrans Sandbox untuk melihat apakah status transaksi berubah sesuai dengan aksi yang Anda lakukan di simulator.

10. Kesimpulan dan Langkah Selanjutnya

Selamat! Anda telah berhasil mengikuti tutorial integrasi payment gateway midtrans laravel 12 react js. Dengan kombinasi backend Laravel 12 yang kuat dan frontend React yang dinamis, Anda kini memiliki sistem pembayaran kelas dunia yang siap melayani pelanggan.

Langkah selanjutnya adalah menyesuaikan UI pembayaran agar selaras dengan branding aplikasi Anda dan mulai mengurus dokumen legal untuk berpindah dari mode Sandbox ke Production. Midtrans menawarkan dokumentasi yang sangat lengkap jika Anda ingin mengeksplorasi fitur lebih lanjut seperti subscription billing atau payouts.

Jika Anda memiliki pertanyaan mengenai implementasi ini, jangan ragu untuk meninggalkan komentar atau merujuk kembali ke dokumentasi resmi Laravel dan Midtrans.

Tinggalkan komentar