Penjelasan Lengkap tentang Fungsi Midtrans Payment Gateway dan Integrasinya dengan Laravel
Tags: laravel, php, programming
Published: 2024-06-03 01:04:53


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqdglae27laqgfsn7dic.png)

### 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:

```bash
composer require midtrans/midtrans-php
```

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

```yaml
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:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/conjjaml3893ue6f4bte.png)

Nah, nanti kalau sudah siap bisa pakai **Production**.

Production Access Keys:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zxprbvb1zh9vtblj7wld.png)

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

```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:

```bash
php artisan make:middleware MidtransConfig
```

Update file **MidtransConfig.php** jadi kaya gini:

```php
<?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`:

```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
<?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

```bash
php artisan make:controller PaymentController
```

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

```php
<?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`

```bash
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:

```html
<!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`

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

**Langkah 4: Waktunya Uji Coba**
Jalankan Server Laravel

```bash
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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5imeplornipkxk0fqsir.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fzginznajkkzbv7taq61.png)

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/to7mr58wgig3nnnwko8o.png)

### 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!