Laravel Midtrans: Implementasi Snap Payment di Laravel

Laravel Midtrans: Implementasi Snap Payment di Laravel

id8 min read • 5166 views

Laravel Midtrans - Pada era digital saat ini, transaksi pembayaran online telah menjadi bagian penting dalam berbagai jenis bisnis. Mengintegrasikan sistem pembayaran yang aman, cepat, dan andal menjadi kebutuhan utama bagi banyak perusahaan. Salah satu layanan pembayaran populer adalah Midtrans, yang menyediakan solusi pembayaran digital terpercaya untuk bisnis di Indonesia. Di artikel ini akan membahas tentang implementasi pembayaran menggunakan Snap Payment dari Midtrans di dalam framework Laravel.

Apa itu Snap Payment Midtrans?

Midtrans adalah platform pembayaran yang menyediakan beragam solusi pembayaran online, termasuk kartu kredit, debit, dompet digital, transfer bank, dan lain-lain. SNAP (Simple Noted As Payment) adalah salah satu produk unggulan Midtrans yang memungkinkan integrasi pembayaran yang lebih mudah dan cepat. Dengan SNAP, Kita dapat mengimplementasikan layanan pembayaran tanpa harus merespons langsung ke data sensitif pembayaran, sehingga meningkatkan keamanan transaksi.

Step 1: Install Midtrans Package

Oke guys, pertama mari kita install midtrans package dengan menjalankan perintah seperti di bawah ini:

composer require midtrans/midtrans-php

Buka file config/services dan tambahkan service midtrans seperti di bawah ini:

'midtrans' => [
    'serverKey'     => env('MIDTRANS_SERVER_KEY'),
    'clientKey'     => env('MIDTRANS_CLIENT_KEY'),
    'isProduction'  => env('MIDTRANS_IS_PRODUCTION'),
    'isSanitized'   => env('MIDTRANS_IS_SANITIZED'),
    'is3ds'         => env('MIDTRANS_IS_3DS'),
],

Tambahkan juga pada file .env seperti di bawah ini:

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

Step 2: Setup Model & Migration

Kita lanjutkan dengan membuat model dan migration dengan menjalankan perintah artisan seperti di bawah ini:

php artisan make:model Donation -m

Kemudian, buka file database/migrations/_create_donations_table.php dan ubah method up menjadi seperti di bawah ini:

public function up(): void
{
    Schema::create('donations', function (Blueprint $table) {
        $table->id();
        $table->string('code')->nullable();
        $table->string('name');
        $table->string('email')->nullable();
        $table->double('amount')->default(0);
        $table->text('note')->nullable();
        $table->string('status')->default('pending');
        $table->string('snap_token')->nullable();
        $table->timestamps();
    });
}

Di tabel donations kita akan menambahkan beberapa field seperti code, name, email, amount, note, status dan snap_token. Setelah migration selesai disetup, lanjutkan dengan menjalankan perintah php artisan migrate.

php artisan migrate

Kita lanjut ke model Donation dengan menambahkan method $fillable seperti di bawah ini.

protected $fillable = [
    'code',
    'name',
    'email',
    'amount',
    'note',
    'status',
    'snap_token',
];

Step 3: Setup DonationController

Selanjutnya, mari kita buat DonationController dengan menjalankan perintah artisan seperti di bawah ini:

php artisan make:controller DonationController

Setelah perintah di atas dijalankan atau jika file DonationController sudah dibuat, buka file tersebut dan update kodenya menjadi seperti di bawah ini.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\DB;

class DonationController extends Controller
{
    public function __construct()
    {
        \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');
    }

    public function pay(Request $request){
        DB::transaction(function() use($request) { 
            $donation = \App\Models\Donation::create([
                'code'   => 'DONATION-' . mt_rand(100000, 999999),
                'name'   => $request->name,
                'email'  => $request->email,
                'amount' => $request->amount,
                'note'   => $request->note,
            ]);

            $payload = [
                'transaction_details' => [
                    'order_id'     => $donation->code,
                    'gross_amount' => $donation->amount,
                ],
                'customer_details' => [
                    'first_name' => $donation->name,
                    'email'      => $donation->email,
                ],
                'item_details' => [
                    [
                        'id'            => $donation->code,
                        'price'         => $donation->amount,
                        'quantity'      => 1,
                        'name'          => 'Donation to ' . config('app.name'),
                        'brand'         => 'Donation',
                        'category'      => 'Donation',
                        'merchant_name' => config('app.name'),
                    ],
                ],
            ];

            $snapToken = \Midtrans\Snap::getSnapToken($payload);
            $donation->snap_token = $snapToken;
            $donation->save();

            $this->response['snap_token'] = $snapToken;
        });

        return response()->json([
            'status'     => 'success',
            'snap_token' => $this->response,
        ]);
    }
}

Pada DonationController, kita menambahkan method pay untuk menyiapkan data pembayaran dan melakukan request ke Midtrans API untuk mendapatkan token pembayaran.

Step 4: Setup Route

Setelah DonationController selesai disetup, tambahkan route baru pada file routes/web.php seperti di bawah ini.

Route::post('donation/pay', [App\Http\Controllers\DonationController::class, 'pay'])->name('donation.pay');

Step 5: Setup View

Kita lanjut ke view. Buka file welcome.blade.php dan ubah kodenya menjadi seperti di bawah ini.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>
            Integrasi Midtrans dengan Laravel
        </title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
    </head>
    <body>
        <main class="py-5">
            <div class="container">
                <div class="row d-flex justify-content-center">
                    <div class="col-lg-8 col-12">
                        <h2 class="fs-5 py-4 text-center">
                            Integrasi Midtrans dengan Laravel
                        </h2>
                        <div class="card border rounded shadow">
                            <div class="card-body">
                                <form id="donation-form">
                                    <div class="row mb-3">
                                        <div class="col-md-6 mb-2">
                                            <label for="name" class="form-label">Name</label>
                                            <input type="text" id="name" name="name" value="{{ old('name') }}" class="form-control @error('name') is-invalid @enderror" placeholder="Your Name" required>
                                        </div>
                                        <div class="col-md-6 mb-2">
                                            <label for="email" class="form-label">Email</label>
                                            <input type="email" id="email" name="email" value="{{ old('email') }}" class="form-control @error('email') is-invalid @enderror" placeholder="Your Email">
                                        </div>
                                        <div class="col-md-12 mb-2">
                                            <label for="amount" class="form-label">Amount</label>
                                            <input type="number" id="amount" name="amount" value="{{ old('amount') }}" class="form-control @error('amount') is-invalid @enderror" required>
                                        </div>
                                        <div class="col-md-12">
                                            <label for="note" class="form-label">Note</label>
                                            <textarea name="note" id="note" cols="30" rows="5" class="form-control @error('note') is-invalid @enderror">{{ old('note') }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <button class="btn btn-primary" id="pay-button">Pay</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>    
        <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('services.midtrans.clientKey') }}"></script>
        <script type="text/javascript">
            $('#pay-button').click(function (event) {
            event.preventDefault();
            
            $.post("{{ route('donation.pay') }}", {
                _method: 'POST',
                _token: '{{ csrf_token() }}',
                name: $('#name').val(),
                email: $('#email').val(),
                amount: $('#amount').val(),
                note: $('#note').val()
            },
            function (data, status) {
                snap.pay(data.snap_token, {
                    onSuccess: function (result) {
                        location.reload();
                    },
            
                    onPending: function (result) {
                        location.reload();
                    },
            
                    onError: function (result) {
                        location.reload();
                    }
                    
                });
                return false;
            });
            });
        </script>
    </body>
</html>

Pada file ini, kita menambahkan beberapa form yang harus diisi oleh user dan menambahkan fungsi untuk menampilkan snap payment dari midtrans.

Step 6: Testing

setelah selasai mari kita uji dengan membuat test case baru, gunakan make: test dengan perintah artisan secara default, test aka di tempatkan pada test/feature direktori :

 

php artisan make:test UserTest

Bila Anda ingin membuat pengujian dalam test/unit direktori, Anda dapat menggunakan --unit jalankan make ; test dengan perintah

php artisan make:test UserTest --unit

Bila Anda ingin membuat pengujian Hama PHP, Anda bisa menambahkan --pest opsi pada make : test dengan menjalankan perintah :

php artisan make:test UserTest --pest
php artisan make:test UserTest --unit --pest

Demikian Kurang lebih penjelasan dan tutorial snap payment meditrans. semoga bermanfaat bagi kita semua, terimakasih !

Series: Integrasi Midtrans Payment Gateway di Laravel
Published on August 06, 2023
Last updated on June 21, 2024

If you like this post and want to support us, you can support us via buymeacoffee or trakteer.