Apa Itu Payment Gateway?

Payment gateway itu kayak jembatan antara situs web atau aplikasi e-commerce sama bank atau penyedia layanan keuangan lainnya buat memproses pembayaran. Jadi, setiap kali temen-temen belanja online dan bayar pake kartu kredit atau debit, payment gateway ini yang ngurusin. Mereka nge-enkripsi data sensitif biar aman dan cuma pihak berwenang yang bisa akses.

Kenapa Payment Gateway Penting?

Payment gateway itu penting banget buat bisnis online karena:

1. Keamanan Transaksi: Payment gateway pake enkripsi yang kuat buat lindungi data kartu kredit/debit dari penipuan dan pencurian.
2. Kemudahan Penggunaan: Mempermudah pelanggan buat bayar langsung di situs web atau aplikasi tanpa harus pindah platform.
3. Otomatisasi Proses Pembayaran: Mengurangi kesalahan manusia dengan ngotomatiskan proses verifikasi dan konfirmasi pembayaran.
4. Beragam Metode Pembayaran: Mendukung berbagai metode pembayaran termasuk kartu kredit, debit, e-wallet, dan transfer bank.

Midtrans sebagai Payment Gateway

Midtrans adalah salah satu payment gateway yang populer di Indonesia. Mereka punya fitur-fitur keren kayak:

• Snap: Solusi pembayaran yang gampang diintegrasikan cuma pake beberapa baris kode.
• Core API: API pembayaran yang fleksibel buat integrasi yang lebih kompleks.
• Mobile SDK: Buat integrasi pembayaran di aplikasi mobile.
• Fraud Detection System: Sistem deteksi penipuan buat cegah transaksi yang mencurigakan.

Mengapa Mengintegrasikan Midtrans dengan Laravel?

Laravel itu salah satu framework PHP yang paling populer karena gampang dipake dan punya banyak fitur. Mengintegrasikan Midtrans dengan Laravel bikin temen-temen bisa:

• Menyediakan Opsi Pembayaran yang Beragam: Temen-temen bisa nerima pembayaran dari berbagai sumber kayak kartu kredit, e-wallet, dan bank transfer.
• Keamanan yang Lebih Baik: Pake layanan payment gateway yang udah teruji keamanannya.
• User Experience (UX) yang Lebih Baik: Proses pembayaran jadi lebih lancar dan cepat.

Langkah-langkah Mengintegrasikan Midtrans dengan Laravel Menggunakan Snap.js

Langkah 1: Setup Paket Midtrans
Install Paket Midtrans Buka terminal temen-temen, masuk ke folder project Laravel, terus ketik ini:

composer require midtrans/midtrans-php

Tambahin API Key ke File .env Login ke Midtrans Dashboard buat dapetin kunci API, terus tambahin ke file .env:

MIDTRANS_SERVER_KEY=your-server-key
MIDTRANS_CLIENT_KEY=your-client-key
MIDTRANS_IS_PRODUCTION=false

Sesuaikan credential server key dan client key berdasarkan key yang ada pada dashboard Midtrans temen-temen

Berhubung kita masih dalam tahap development silahkan pakai yang Environment Sandbox ya.

Sandbox Access Keys:

Nah, nanti kalau sudah siap bisa pakai Production.

Production Access Keys:

Update Config Midtrans di config/services.php Tambahin konfigurasi Midtrans di file config/services.php:

return [
    ...

    'midtrans' => [
        'serverKey' => env('MIDTRANS_SERVER_KEY'),
        'clientKey' => env('MIDTRANS_CLIENT_KEY'),
        'isProduction' => env('MIDTRANS_IS_PRODUCTION', false),
        'isSanitized' => true,
        'is3ds' => true,
    ],
];

Bikin Middleware buat Midtrans Buat middleware baru buat konfigurasi Midtrans dengan perintah ini:

php artisan make:middleware MidtransConfig

Update file MidtransConfig.php jadi kaya gini:

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class MidtransConfig
{
    public function handle(Request $request, Closure $next)
    {
        \Midtrans\Config::$serverKey = config('services.midtrans.serverKey');
        \Midtrans\Config::$isProduction = config('services.midtrans.isProduction');
        \Midtrans\Config::$isSanitized = config('services.midtrans.isSanitized');
        \Midtrans\Config::$is3ds = config('services.midtrans.is3ds');

        return $next($request);
    }
}

Khusus Laravel 10 kebawah

Daftarin middleware ini di app/Http/Kernel.php:

protected $middlewareGroups = [
    'web' => [
        ...
        \App\Http\Middleware\MidtransConfig::class, // tambahkan ini
    ],
    'api' => [
        ...
        \App\Http\Middleware\MidtransConfig::class, // tambahkan ini
    ],
];

Untuk Laravel 11 temen-temen bisa buka file bootstrap/app.php dan tambahkan $middleware->append(MidtransConfig::class); seperti berikut:

<?php

use App\Http\Middleware\MidtransConfig;
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    ->withRouting(
        web: __DIR__ . '/../routes/web.php',
        commands: __DIR__ . '/../routes/console.php',
        channels: __DIR__ . '/../routes/channels.php',
        health: '/up',
    )
    ->withMiddleware(function (Middleware $middleware) {

        $middleware->append(MidtransConfig::class); // tambahkan ini
    })
    ->withExceptions(function (Exceptions $exceptions) {
        //
    })->create();

Langkah 2: Bikin Endpoint buat Dapetin Snap Token
Bikin Controller buat Pembayaran

php artisan make:controller PaymentController

Tambahin Fungsi buat Bikin Snap Token di PaymentControllerUpdate file PaymentController.php jadi kaya gini:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PaymentController extends Controller
{
    public function getSnapToken(Request $request)
    {
        $params = [
            'transaction_details' => [
                'order_id' => uniqid(),
                'gross_amount' => 10000,
            ],
            'customer_details' => [
                'first_name' => 'Yoga',
                'last_name' => 'Meleniawan',
                'email' => 'yogameleniawan@example.com',
                'phone' => '08111222333',
            ],
        ];

        try {
            $snapToken = \Midtrans\Snap::getSnapToken($params);
            return response()->json(['snap_token' => $snapToken]);
        } catch (\Exception $e) {
            return response()->json(['error' => $e->getMessage()], 500);
        }
    }
}

Tambahin Route buat Dapetin Snap Token di routes/web.php

Route::post('/get-snap-token', [PaymentController::class, 'getSnapToken']);

Langkah 3: Integrasi Snap.js di Frontend
Bikin atau Update View dengan Form Pembayaran Bikin file resources/views/payment.blade.php kaya gini:

<!DOCTYPE html>
<html>
<head>
    <title>Payment Page</title>
    <script type="text/javascript"
            src="https://app.sandbox.midtrans.com/snap/snap.js"
            data-client-key="{{ config('services.midtrans.clientKey') }}"></script>
</head>
<body>
    <button id="pay-button">Pay!</button>

    <script type="text/javascript">
        document.getElementById('pay-button').onclick = function () {
            fetch('/get-snap-token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                },
                body: JSON.stringify({})
            })
            .then(response => response.json())
            .then(data => {
                if (data.snap_token) {
                    snap.pay(data.snap_token);
                } else {
                    alert('Error getting Snap token');
                }
            });
        };
    </script>
</body>
</html>

Tambahin Route buat Nampilin View di routes/web.php

Route::get('/pay', function () {
    return view('payment');
});

Langkah 4: Waktunya Uji Coba
Jalankan Server Laravel

php artisan serve

Akses halaman pembayaran lewat browser

http://127.0.0.1:8000/pay

Klik Tombol “Pay!” buat mulai proses pembayaran pake Snap.js.

Nah nanti bakal muncul seperti ini, artinya integrasinya sudah berhasil temen-temen! Mantappp!

Nah, kalau kita lihat di dashboard Midtransnya juga bakal muncul seperti ini:

Kesimpulan

Dengan ngikutin langkah-langkah di atas, temen-temen bisa dengan gampang ngintegrasiin Midtrans dengan aplikasi Laravel temen-temen pake Snap.js. Payment gateway kayak Midtrans penting banget buat pastiin transaksi online aman, mudah, dan cepat. Integrasi ini bakal ningkatin pengalaman pengguna di situs web atau aplikasi temen-temen dan ngasih berbagai pilihan metode pembayaran yang aman. Dengan setup ini, temen-temen siap nerima pembayaran dari pelanggan dengan cara yang efisien dan aman. Selamat mencoba temen-temen! sampai bertemu di artikel yang lainnya!