DEV Community

Cover image for Penjelasan Lengkap tentang Fungsi Midtrans Payment Gateway dan Integrasinya dengan Laravel
Yoga Meleniawan Pamungkas
Yoga Meleniawan Pamungkas

Posted on

Penjelasan Lengkap tentang Fungsi Midtrans Payment Gateway dan Integrasinya dengan Laravel

Image description

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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:
Image description

Nah, nanti kalau sudah siap bisa pakai Production.

Production Access Keys:
Image description

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,
    ],
];
Enter fullscreen mode Exit fullscreen mode

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

php artisan make:middleware MidtransConfig
Enter fullscreen mode Exit fullscreen mode

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);
    }
}
Enter fullscreen mode Exit fullscreen mode

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
    ],
];
Enter fullscreen mode Exit fullscreen mode

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();
Enter fullscreen mode Exit fullscreen mode

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

php artisan make:controller PaymentController
Enter fullscreen mode Exit fullscreen mode

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);
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode

Tambahin Route buat Nampilin View di routes/web.php

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

Langkah 4: Waktunya Uji Coba
Jalankan Server Laravel

php artisan serve
Enter fullscreen mode Exit fullscreen mode

Akses halaman pembayaran lewat browser

http://127.0.0.1:8000/pay
Enter fullscreen mode Exit fullscreen mode

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

Image description

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

Image description

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

Image description

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!

Top comments (0)