DEV Community: Martin Mulyo Syahidin

Midtrans and Laravel 8 Integration Using Snap: Part 2

Martin Mulyo Syahidin — Wed, 01 Jun 2022 12:41:51 +0000

Before continuing reading, please read part 1: Integration of Midtrans and Laravel 8 Using Snap: Part 1

In part 1, we have successfully integrated the Midtrans payment interface using Snap. Until there, customers can make payments through the various payment channels available. In this post, we will continue to create payment callbacks.

What are callbacks? In part 1, the customer is able to make a payment. For example using a virtual account. After the customer has made a successful payment, Midtrans will send a notification to our website that the customer has made a payment. Or, if the customer does not make a payment within the specified time limit, Midtrans will send a notification that the transaction has expired. Our job, is to receive the notification and process the notification.

For example, after the customer has successfully paid, we will receive a successful notification. From the notification, we can change the payment status of the order from previously waiting for payment to already paid. With this system, there is no need to manually confirm and change the payment status.

Create a Service Class

Sama seperti sebelumnya, logic utama akan kita pisahkan di service layer. Sebelumnya, kita sudah membuat file Midtrans.php, CreateSnapTokenService.php dan CallbackService.php, untuk callback akan kita tulis di file CallbackService.php

<?php

namespace App\Services\Midtrans;

use App\Models\Order;
use App\Services\Midtrans\Midtrans;
use Midtrans\Notification;

class CallbackService extends Midtrans
{
    protected $notification;
    protected $order;
    protected $serverKey;

    public function __construct()
    {
        parent::__construct();

        $this->serverKey = config('midtrans.server_key');
        $this->_handleNotification();
    }

    public function isSignatureKeyVerified()
    {
        return ($this->_createLocalSignatureKey() == $this->notification->signature_key);
    }

    public function isSuccess()
    {
        $statusCode = $this->notification->status_code;
        $transactionStatus = $this->notification->transaction_status;
        $fraudStatus = !empty($this->notification->fraud_status) ? ($this->notification->fraud_status == 'accept') : true;

        return ($statusCode == 200 && $fraudStatus && ($transactionStatus == 'capture' || $transactionStatus == 'settlement'));
    }

    public function isExpire()
    {
        return ($this->notification->transaction_status == 'expire');
    }

    public function isCancelled()
    {
        return ($this->notification->transaction_status == 'cancel');
    }

    public function getNotification()
    {
        return $this->notification;
    }

    public function getOrder()
    {
        return $this->order;
    }

    protected function _createLocalSignatureKey()
    {
        $orderId = $this->order->number;
        $statusCode = $this->notification->status_code;
        $grossAmount = $this->order->total_price;
        $serverKey = $this->serverKey;
        $input = $orderId . $statusCode . $grossAmount . $serverKey;
        $signature = openssl_digest($input, 'sha512');

        return $signature;
    }

    protected function _handleNotification()
    {
        $notification = new Notification();

        $orderNumber = $notification->order_id;
        $order = Order::where('number', $orderNumber)->first();

        $this->notification = $notification;
        $this->order = $order;
    }
}

In that service, we capture the notification sent by Midtrans with the _handleNotification() method, then the notification result will be processed again. Here we also need to create a local signature key. This key is a local key so that notifications can be received. When sending notifications, Midtrans will also send a signature key, the key will be compared with the local signature key to verify whether the request is valid or not.

Creating a Callback Controller

To receive notifications, we will create a custom controller named PaymentCallbackController. In the terminal, type the following command:

php artisan make:controller PaymentCallbackController

Then write the following code on the controller earlier.

<?php

namespace App\Http\Controllers;

use App\Models\Order;
use Illuminate\Http\Request;
use App\Services\Midtrans\CallbackService;

class PaymentCallbackController extends Controller
{
    public function receive()
    {
        $callback = new CallbackService;

        if ($callback->isSignatureKeyVerified()) {
            $notification = $callback->getNotification();
            $order = $callback->getOrder();

            if ($callback->isSuccess()) {
                Order::where('id', $order->id)->update([
                    'payment_status' => 2,
                ]);
            }

            if ($callback->isExpire()) {
                Order::where('id', $order->id)->update([
                    'payment_status' => 3,
                ]);
            }

            if ($callback->isCancelled()) {
                Order::where('id', $order->id)->update([
                    'payment_status' => 4,
                ]);
            }

            return response()
                ->json([
                    'success' => true,
                    'message' => 'Notification successfully processed',
                ]);
        } else {
            return response()
                ->json([
                    'error' => true,
                    'message' => 'Signature key not verified',
                ], 403);
        }
    }
}

In this controller, we have to check whether the signature key is verified or not. Furthermore, in the service callback we have 3 methods, namely isSuccess() to check whether the transaction was successful, isExpire() to check whether the transaction has expired, isCancelled() to check whether the transaction was aborted. If successful, then update order status data to 2 (already paid), if expired, update order status data to 3 (expired), and if expired then update order status data to 3. You can also add other logic as needed.

Safety note
The program flow that I created is quite safe to use. Even if anyone knows the callback URL, that person will not be able to "shoot" it directly, because it needs to include an authentication header in the form of a signature key which is a combination of Order ID, status code, overall price and server key. So, don't let anyone know your Midtrans servey key.

Creating Routes

After creating the controller, we have to create a new route. Later Midtrans will send a post request to that route. In the web.php route, add the following route.

use App\Http\Controllers\PaymentCallbackController;

Route::post('payments/midtrans-notification', [PaymentCallbackController::class, 'receive']);

Midtrans will send notifications to the address: http://mydomain.com/payments/midtrans-notification. But here we will not deploy to test, but will use tunel.

Creating a CSRF exception

Because it is on a web route, every post request will be protected by CSRF. This means that the route that we created above will not be accessible by Midtrans. For that, we have to exclude the route from CSRF protection. In the file app/Http/Middleware/VerifyCsrfToken.php add the above route to be excluded, so it will be like this.

protected $except = [
    'payments/midtrans-notification',
];

If so, the next step is to test.

Installing Ngrok for Tunneling

Because our Laravel is still on localhost (still offline), of course Midtrans can't send notifications. For that, we have to online the Laravel. You can do this by uploading it to the server so that it can be online and accessible. But here I will not upload to the server, and still use localhost. The trick is to use Ngrok.

What is Ngrok? Ngrok is a tunelling application that can "online localhost". Ngrok can make our Laravel on localhost (offline) be online and can be accessed by anyone on the internet, just by typing the URL provided by Ngrok. Therefore, we will use Ngrok to test the Midtrans callback.

Notes
Ngrok is only used for offline testing, if it is ready to use and uploaded to the server, no configuration needs to be changed. Just replace the ngrok tunel address with your domain.

Download and install Ngrok

To download, please go to the ngrok.com webiste and navigate to the download page. Then download according to your operating system. For installation, please follow the guide on each operating system. If in Windows, just click-click as usual.

If so, please register to get an auth token. If you have already registered, go to the Ngrok dashboard to get the auth token.

Please note down the token. Then in CMD / terminal type the following command

ngrok authtoken NGROK_AUTH_TOKEN

If successful, we will proceed to the next stage.

Creating Local Servers and Tunnels

To create a local server, we will use the command artisan serve from laravel with port 8080 (not 8000).

php artisan serve --port=8080

Then a new local server will be created with port 8080. (http://localhost:8080)

Make tunel ngrok

To online the localhost that was previously created, in cmd type the following command:

ngrok http 8080

This command will forward all requests to port 8080, and the Laravel port that was created earlier. If successful it will be as follows.

Please note the forwarding URL provided by Ngrok, just one of them is enough. Here I get the URL: http://b674-110-137-75-3.ngrok.io/. This URL can be accessed by anyone on the internet. This URL will be given to Midtrans to send notifications. To view the history of incoming requests, please go to: http://localhost:4040/

Configure Notification URL on Midtrans Dashboard

Open the Midtrans dashboard, in the Settings > Configuration section, in the Payment Notification URL field, fill in as follows.

Please adjust it with your ngrok URL. If so, it should now be ready to be tested.

Notes
Ngrok is only used for offline testing, if it is ready to use and uploaded to the server, no configuration needs to be changed. Just replace the ngrok tunel address with your domain. For example, if uploaded on the https://jurnalmms.web.id domain, just change to: https://jurnalmms.web.id/payments/midtrans-notification

Doing Test

To test the payment, we can use the simulator provided by Midtrans. With the simulator, we can make payments without having to make real payments. Midtrans Mock can be accessed here.

Get the destination account number

First, we have to get the destination account number. The trick is to open the order page, then click the “Pay now” button, select the payment channel and note the account number displayed.

Because the number is a BRI Virtual Account, on the Mock Payment Midtrans website select "BRI Virtual Account" in the Payment Page dropdown.

Then in the input field enter the account number that was obtained earlier. Then click the Inquire button. On the next page click the Pay button to pay. If you have successfully entered the success page, it means that the payment simulation has been successfully carried out.

To view the history, please go to http://localhost:4040 and view the history of incoming requests via Ngrok.

So far, we have successfully received notifications from Midtrans. The payment status in the database will also change automatically.

When you start testing, there may be an issue with the signature key being unverified. One way to solve this is to make sure the price paid by the customer is the same as the total_price column in the database.

All program code can be seen in the following GitHub repository:
https://github.com/mulyosyahidin/laravel-midtrans

Read this post in Indonesian: https://jurnalmms.web.id/laravel/integrasi-midtrans-dan-laravel-8-menggunakan-snap-bagian-2/

Integrate Midtrans in Laravel with Snap API: Part 1

Martin Mulyo Syahidin — Wed, 25 Aug 2021 10:28:05 +0000

How to Integrate Midtrans Payment Gateway in Laravel 8

Midtrans is one of the popular payment gateways in Indonesia that has many users. Midtrans can help make payment receipts easier, integrated, automated, and has many payment options. By using Midtrans, customers can choose to pay through many channels, such as credit cards, bank accounts (virtual accounts), Alfamart outlets, to using the GoPay application. With that many choices, it will certainly make it easier for customers to make payments.

Midtrans integration is also very easy. Let's say on our online store website, on the order data there is a payment_status flag with the contents: waiting for payment, already paid, expired (and other payment status). Usually, the customer will confirm the payment to the admin by uploading the payment data, then the admin will update the payment status and continue the order process. But with Midtrans, when the customer has made a payment, Midtrans will notify our website that the customer has made a payment. Then, the payment status will automatically change to already paid.

Very interesting isn't it? This tutorial will be divided into sections so it won't be too long. Every code change I save on GitHub and can be seen in the following repository: https://github.com/mulyosyahidin/laravel-midtrans. Please do clone the repository.

The integration that we will do is using SNAP, so customers don't need to leave our website. Here's an example of what it looks like when using SNAP.

Creating an Order Table

Here I will not explain the whole online shop system. But straight to the point. Here, I created an orders table which of course will contain order data. The key is, in the orders table we need to create a special column with the name snap_token which will contain the token generated by the snap. The snap token is a UUID (36 characters) generated by Midtrans that is used as an order marker. The following is the structure of the orders table.

php artisan make:model Order -m

Schema::create('orders', function (Blueprint $table) {
    $table->id();
    $table->string('number', 16);
    $table->decimal('total_price', 10, 2);
    $table->enum('payment_status', ['1', '2', '3'])->comment('1=menunggu pembayaran, 2=sudah dibayar, 3=kadaluarsa');
    $table->string('snap_token', 36)->nullable();
    $table->timestamps();
});

Please add another column as needed, here the mandatory fields are the total price, payment status and snap token. You can add other columns such as user_id, order_status and others.

Creating Dummy Data in the Order Table

For experimental material, I will create a dummy using the factory, please run the following command.

php artisan make:factory OrderFactory

Then in the databases/factories/OrderFactory.php file change the definition() method to be as follows.

public function definition()
    {
        return [
            'number' => $this->faker->randomNumber(8),
            'total_price' => $this->faker->numberBetween(25000, 200000),
            'payment_status' => 1,
        ];
    }

Then in the databases/seeders/DatabaseSeeder.php file add the factory earlier to the run() method, so it will look like this:

public function run()
    {
        // \App\Models\User::factory(10)->create();
        \App\Models\Order::factory(10)->create();
    }

Next, in the terminal run the seeder command.

php artisan db:seed

Up to this point, we already have 10 dummy data that will be used for the experiment.

Creating Controllers

Next is to create a controller to manage orders. For convenience, I use a resource controller with bindings to the Order model that was created earlier.

php artisan make:controller OrderController --model=Order

Then in the web.php route add the following route resource:

Route::resource('orders', OrderController::class)->only(['index', 'show']);

Create Snap Token for Order

In the show() method, we have to check whether the snap_token column already has contents or not (still NULL). If it is still NULL, we must generate the token by communicating with the API provided by Midtrans.

Setting Up Configuration

Before continuing, make sure you have the access key that Midtrans provided. This Access Key can be found on the Midtrans dashboard under Settings > Access Key. Here, I'm still using the Sandbox environment.

After getting the three data, then add a new key in the .env file. At the end of the .env file, add the following key.

MIDTRANS_MERCHAT_ID=xxxxxxxxxx
MIDTRANS_CLIENT_KEY=SB-Mid-client-xxxxxxxxxx
MIDTRANS_SERVER_KEY=SB-Mid-server-xxxxxxxxxx

Then create a new configuration file with the name midtrans.php in the config/ folder and fill it with the following array.

<?php

return [
    'mercant_id' => env('MIDTRANS_MERCHAT_ID'),
    'client_key' => env('MIDTRANS_CLIENT_KEY'),
    'server_key' => env('MIDTRANS_SERVER_KEY'),

    'is_production' => false,
    'is_sanitized' => false,
    'is_3ds' => false,
];

Installing package midtrans/midtrans-php

Package midtrans/midtrans-php is a package provided by Midtrans to use the Midtrans API. To install, run the following command in terminal.

composer require midtrans/midtrans-php

Creating Service Layers

Next, we have to create a new service layer to separate the application logic from the Midtrans logic, so that later it will be easier for code maintenance. In the app/ folder, create a new folder with the name Services, and create another new folder with the name Midtrans, also create the 3 necessary files, namely Midtrans.php, CreateSnapTokenService.php and CallbackService.php

In the Midtrans.php file, write the following code.

<?php

namespace App\Services\Midtrans;

use Midtrans\Config;

class Midtrans {
    protected $serverKey;
    protected $isProduction;
    protected $isSanitized;
    protected $is3ds;

    public function __construct()
    {
        $this->serverKey = config('midtrans.server_key');
        $this->isProduction = config('midtrans.is_production');
        $this->isSanitized = config('midtrans.is_sanitized');
        $this->is3ds = config('midtrans.is_3ds');

        $this->_configureMidtrans();
    }

    public function _configureMidtrans()
    {
        Config::$serverKey = $this->serverKey;
        Config::$isProduction = $this->isProduction;
        Config::$isSanitized = $this->isSanitized;
        Config::$is3ds = $this->is3ds;
    }
}

Then, in the CreateSnapTokenService.php file write the following code.

<?php

namespace App\Services\Midtrans;

use Midtrans\Snap;

class CreateSnapTokenService extends Midtrans
{
    protected $order;

    public function __construct($order)
    {
        parent::__construct();

        $this->order = $order;
    }

    public function getSnapToken()
    {
        $params = [
            'transaction_details' => [
                'order_id' => $this->order->number,
                'gross_amount' => $this->order->total_price,
            ],
            'item_details' => [
                [
                    'id' => 1,
                    'price' => '150000',
                    'quantity' => 1,
                    'name' => 'Flashdisk Toshiba 32GB',
                ],
                [
                    'id' => 2,
                    'price' => '60000',
                    'quantity' => 2,
                    'name' => 'Memory Card VGEN 4GB',
                ],
            ],
            'customer_details' => [
                'first_name' => 'Nama',
                'email' => 'Email',
                'phone' => '081234567890',
            ]
        ];

        $snapToken = Snap::getSnapToken($params);

        return $snapToken;
    }
}

In the above service, the order_id key must contain a unique order key, it can be a primary key or UUID, the gross_amount key contains the total amount to be paid by the customer.

The item details in the order can also be changed in the item_details key. This key contains an associative array that can be filled with data per item (product). You can change the id (primary key), price (unit price), quantity (order quantity) and name (product name). Remember, the total price that will be displayed to the customer is the result of the sum of the key price * quantity. In the item_details key, you can also add for example shipping costs, taxes, or other fees charged to the customer.

You can also change customer data in the customer_details key, this data can be obtained through relations in the Order model.

Next, in the OrderController.php controller, change the show() method and add the following code.

use App\Services\Midtrans\CreateSnapTokenService; // => put it at the top of the class

public function show(Order $order)
     {
         $snapToken = $order->snap_token;
         if (is_null($snapToken)) {
             // If snap token is still NULL, generate snap token and save it to database

             $midtrans = new CreateSnapTokenService($order);
             $snapToken = $midtrans->getSnapToken();

             $order->snap_token = $snapToken;
             $order->save();
         }

         return view('orders.show', compact('order', 'snapToken'));
     }

The show() method can be adapted to your application logic. The code snippet above is to create a snap token by utilizing the service that was previously created. Next, open the order detail view file.

In the view, we need to create a payment execution button (see video). When the button is clicked, it will display a Midtrans payment pop up. Here's an example of the button I made in the video above.

@if ($order->payment_status == 1)
     <button class="btn btn-primary" id="pay-button">Pay Now</button>
@else
     Payment successful
@endif

Notice, on the button I provide an id attribute with a pay-button value. This attribute will later be used for binding by Javascript. Next, still in the view add the following Javascript.

<script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="{{ config('midtrans.client_key') }}">
    </script>
    <script>
        const payButton = document.querySelector('#pay-button');
        payButton.addEventListener('click', function(e) {
            e.preventDefault();

            snap.pay('{{ $snapToken }}', {
                // Optional
                onSuccess: function(result) {
                    /* You may add your own js here, this is just example */
                    // document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
                    console.log(result)
                },
                // Optional
                onPending: function(result) {
                    /* You may add your own js here, this is just example */
                    // document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
                    console.log(result)
                },
                // Optional
                onError: function(result) {
                    /* You may add your own js here, this is just example */
                    // document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
                    console.log(result)
                }
            });
        });
    </script>

In the pay() method above, there are onSuccess, onPending and onError events. This event can be used to manage response data from Midtrans when the customer closes the payment pop up.

So far, we have succeeded in making the Snap API integration on our website. Here, customers can make payments through the selected payment channel. Payment data can be seen on the Midtrans dashboard.

To view the source code to date, please open the following repository: https://github.com/mulyosyahidin/laravel-midtrans/tree/7a2f45abfe7c1c00db711713bf8f77231d6c8f18

Next, we will create a callback. So, after the customer has made a successful payment, Midtrans will send a notification (callback) to our website. From the notification, we can change the order data. For example, if the payment is successful, we can change the status of the payment to already paid. Or if the customer has not made a payment until the specified time limit, Midtrans will also send an expiration notification. In part 2 of the post, we will talk about these callbacks.

Read in Indonesian on the https://jurnalmms.web.id/laravel/integrasi-midtrans-dan-laravel-bagian-1/.

Register at SendinBlue.com and Use His SMTP in Laravel

Martin Mulyo Syahidin — Tue, 10 Aug 2021 10:58:36 +0000

Sendinblue is an email marketing service aimed at mid-level bussiness. Sendinblue has automation features, integrated customer management, and email template creation services. The price offered by Sendinblue is also attractive and will not drain the pocket.

Oops.. But we will not use all the capabilities of Sendinblue and pay for the service, we will only use Sendinblue as an email delivery service for our application utilizing their SMTP server, and of course it's free.

I've tried various SMTP services, such as Sendgrid, Mailchimp, Mailjet and Sendinblue. And among the four services, I decided Sendgrid was the best, and was followed by Sendinblue. However, Sendgrid is a bit complicated and Sendinblue is simpler. And the most important thing is the price. In the free version, Sendgrid provides a free sending quota of 100 emails, while Sendinblue reaches 300. That's the difference that made me decide to use Sendinblue.

As an email delivery service that provides an SMTP server and API key, Sendinblue can be used in various projects, languages and frameworks. And in this post, we will configure Sendinblue SMTP for use in Laravel applications.

Register at Sendinblue.com

Before using the sendinblue service, we must register first. Please open the sendinblue.com website and register using your email and password. Then verify the registered email by clicking the verification link sent to the registered email. Registration is very easy and less than 5 minutes.

After registering, we have to get the given SMTP credentials.

Getting Sendinblue SMTP Credentials

After successfully registering and verifying your email, you will be directed to the Sendinblue dashboard page. In this dashboard, we can make settings for advertising campaigns, manage contacts, and others. But, if we want to use it as an email sender, we only need to get the API key or SMTP credentials.

On the dashboard page, click the dropdown on the top right and select “SMTP & API” to view the SMTP credentials and API key.

Next, click the “CREATE A NEW SMTP KEY” button on the right. Next, in the pop-up fill in the name of the SMTP that will be created.

Then click the GENERATE button to create. If successful, it will produce a display like the following.

In this section, note the SMTP server address, port, login (email) and master password. This data will then be used in our application.

Sendinblue SMTP settings in Laravel

Next, please open the .env file in your Laravel project. On the 31st line in the mailer section, fill in the data as follows.

In the MAIL_USERNAME section, fill in the Sendinblue SMTP username (email), in the MAIL_PASSWORD section, fill in the Sendinblue SMTP password that was previously recorded. Also adjust the MAIL_HOST and MAIL_PORT.

MAIL_MAILER=smtp
MAIL_HOST=smtp-relay.sendinblue.com
MAIL_PORT=587
MAIL_USERNAME=username@sendiblue.email
MAIL_PASSWORD=PASSWORD-SMTP
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS="no-reply@domainsaya.com"
MAIL_FROM_NAME="${APP_NAME}"

In the MAIL_FROM_ADDRESS section, you can fill in a free email, whether it is a valid email or not. This email will be used as the sender's identity.

It's finished. At this point, everything should be ready. We can already send emails using the Sendinblue service in Laravel.

Thank you and good bye!

Translated from Indonesian from the MMS Journal Blog article