Muhamad Rafli Watch on YouTube

Integrasi Payment Gateway Midtrans | Laravel 10

3 min read 3 hours ago
Published on Oct 22, 2024 This response is partially generated with the help of AI. It may contain inaccuracies.

Table of Contents

Introduction

This tutorial provides a comprehensive guide on integrating the Midtrans payment gateway into a Laravel 10 application. Midtrans is a popular payment solution in Indonesia, and this integration will enable you to handle various payment methods securely. By following these steps, you will set up a payment gateway that enhances user experience in your e-commerce applications.

Step 1: Install Required Packages

Before starting the integration, you need to install the Midtrans PHP SDK.

  1. Open your terminal.
  2. Navigate to your Laravel project directory.
  3. Run the following command to install the Midtrans package via Composer:
    composer require midtrans/midtrans-php

Step 2: Configuration of Midtrans

You need to configure the Midtrans settings in your Laravel application.

  1. Create a new configuration file for Midtrans:
    touch config/midtrans.php
  2. Open config/midtrans.php and add the following configuration:
    return [
    'server_key' => env('MIDTRANS_SERVER_KEY'),
    'client_key' => env('MIDTRANS_CLIENT_KEY'),
    'is_production' => env('MIDTRANS_IS_PRODUCTION', false),
];
  3. Add the Midtrans keys in your .env file:
    MIDTRANS_SERVER_KEY=your_server_key
MIDTRANS_CLIENT_KEY=your_client_key
MIDTRANS_IS_PRODUCTION=true   # Set to false for sandbox testing

Step 3: Create Payment Controller

You need a controller to handle payment processing.

  1. Generate a new controller:
    php artisan make:controller PaymentController
  2. Open app/Http/Controllers/PaymentController.php and add the following code:
    namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Midtrans\Config;
use Midtrans\Snap;

class PaymentController extends Controller
{
    public function createSnapToken(Request $request)
    {
        Config::$serverKey = config('midtrans.server_key');
        Config::$isProduction = config('midtrans.is_production');

        $transactionDetails = [
            'order_id' => uniqid(),
            'gross_amount' => $request->amount,
        ];

        $itemDetails = [
            [
                'id' => 'item1',
                'price' => $request->amount,
                'quantity' => 1,
                'name' => 'Item Name',
            ],
        ];

        $transactionData = [
            'transaction_details' => $transactionDetails,
            'item_details' => $itemDetails,
        ];

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

Step 4: Set Up Routes

Define routes for the payment process in your application.

  1. Open routes/web.php.
  2. Add the following route:
    Route::post('/create-snap-token', [PaymentController::class, 'createSnapToken']);

Step 5: Create Payment View

You need a front-end view to initiate the payment process.

  1. Create a new Blade view file, e.g., resources/views/payment.blade.php.
  2. Include the following HTML and JavaScript code:
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment</title>
    <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="your_client_key"></script>
</head>
<body>
    <button id="pay-button">Pay Now</button>
    <script>
        document.getElementById('pay-button').onclick = function () {
            fetch('/create-snap-token', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({ amount: 10000 })  // Example amount
            })
            .then(response => response.json())
            .then(data => {
                snap.pay(data.snap_token, {
                    onSuccess: function (result) {
                        console.log('Payment Success:', result);
                    },
                    onPending: function (result) {
                        console.log('Payment Pending:', result);
                    },
                    onError: function (result) {
                        console.log('Payment Error:', result);
                    }
                });
            })
            .catch(error => console.error('Error:', error));
        };
    </script>
</body>
</html>

Conclusion

You have now successfully integrated the Midtrans payment gateway into your Laravel 10 application. Key steps included installing the Midtrans SDK, configuring it, setting up a payment controller and routes, and creating a simple payment view.

Next steps could involve handling payment notifications and developing a more robust error-handling strategy. You can explore the Midtrans documentation for more advanced features and customization options.

Table of Contents

Recent