Integrasi Snap-Api Midtrans menggunakan Laravel dengan Promise — Midtrans-Snap #ep2

4 min readJan 26, 2020

Hello, di artikel ini lanjutan dari artikel sebelumnya yang membahas Snap-Api menggunakan lumen disini. Oke lanjut ya, kalo yang kemarin itu hanya API nya aja, kali ini implementasi secara antarmukanya.

Seperti biasa persiapan dulu :

Install Laravel (ana pakai 5.8) : link doc
Install Package GuzzleHttp untuk laravelnya (ana pakai versi terbaru 6.5)

composer require guzzlehttp/guzzle

Jangan lupa test dulu laravelnya pake *port optional

php artian serve --port 8080

Lanjut, kita buat controller PaymentController dan functionnya getPayement

php artisan make:controller PaymentController

Kita require dulu class GuzzleHttp/Client dan GuzzleHttp/RequestException

use GuzzleHttp\Client;
use GuzzleHttp\Exception\RequestException;

Kalo bingung, guzzlhttp buat apaan ? GuzzleHttp ini sebuah package PHP HTTP Client yang memudahkan kita buat melakukan request-response ke External Sistem, ya salah satunya ke API yang sebelumnya kita buat.
Lanjut lagi, kita instansiasi dulu Class Clientnya

$client = new Client();

Sebelum menulis statement request-response, alangkah lebih baik kita handle errornya menggunakan try-catch

try{}catch(Exception $e)

Baru kita masukan perintah request-responsenya

$res = $client->request('GET','API_URL', []);
$data = json_decode($res->getBody()->getContents());

API_URL ialah url api yang episode sebelumnya sudah kalian buat, pointing ke url tersebut. Kalo bingung, yang tampilan di postmannya kayak begini

Penjelasan simple dari syntax ‘GET’ method yang kalian pakai di API_URL nya harus disesuaikan. Sebenarnya best praticenya sih menggunakan ‘POST’ cuma karena ini hanya sebagai contoh implementasinya aja jadi gapapa lah ya.
Lanjut, kita cek dulu responsenya seperti apa dengan menggunakan DieDump dari laravelnya, berikan syntax

dd($data);

Full codenya

Dan jika responsenya seperti

Selamat kalian udah berhasil melakukan integrasinya, tinggal kita gunakan value dari object tokennya ya :D

Ok kita beralih ke resources dan buat baru, nama file payment.blade.php
Berikan syntax dibawah ini

<!DOCTYPE html>
<html>
    <body>
        <button id="pay-button">Bayar</button>
        <pre><div id="result-json">JSON result will appear here after payment:<br></div></pre>
    <script src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="<CLIENT_KEY_KAMU>"></script>
        <script type="text/javascript">
            document.getElementById('pay-button').onclick = function(){
                // SnapToken acquired from previous step
                snap.pay('{{$token}}', {
                    // Optional
                    onSuccess: function(result){
                        document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
                    },
                    // Optional
                    onPending: function(result){
                        document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
                    },
                    // Optional
                    onError: function(result){
                      document.getElementById('result-json').innerHTML += JSON.stringify(result, null, 2);
                    }
                });
            };
        </script>
    </body>
</html>

CLIENT_KEY_KAMU ganti dengan client key midtrans kalian yang bisa di dapet di Settings->Access Key
Sedikit penjelasan, Midtrans snap.pay disini sudah menggunakan metode Promise Javascript, sehingga kondii dapat di handle sesuai dengan type responsenya. Untuk lebih jelasnya tentang promise bisa baca disini.
Jika sudah, balik lagi ke PaymentContoller, hapus diedump dan ganti dengan

return view('payment',['token'=> $data->token]);

Sampai sini sudah beres, mari kita jalankan

Klik pay dan akan muncul

Watermark TEST di pojok kanan atas hanya muncul pada fase Sandbox saja.

Ngomong-ngomong, bingung ya kenapa tiba-tiba sudah ada data amount, order detail dll nya ? Ya, karena di tutorial sebelumnya kita sudah inputkan datanya langsung di API nya, dicek saja dulu kodingan yang lalu. Tinggal kalian modifikasi saja menjadi Post dan Input datanya dari Client.

Jika kalian sudah memilih metode pembayaran, maka kalian bisa melihat response json yang didapatkan.

Info tambahan : Semua catatan transaksi yang Sudah Dipilih Metode Pembayarannya maka akan muncul di Transaction dashboard midtrans, dan Response diatas bisa kalian lihat langsung di bagian Notification Midtrans. Namun masalah notification pembayaran akan dibahas di pembahasan selanjutnya ya.

Oke selamat melakukan modifikasi guys :D

Jika suka, mohon di beri clap :D

Midtrans-Snap Series

Snap Api Lumen : https://bit.ly/2TXlfGc
Interface Snap-Midtrans : https://bit.ly/37uUwVx
Sdk Android Veritrans : https://bit.ly/2ujQ2CZ
Handle Web Push Notification : https://bit.ly/3a1DBLa
Endpoint Snap-Api (ex: Approve Transaction, Refund, etc) : Soon
Customize request : Soon

full project : https://gitlab.com/zharlet/backend-snap-laravel
full package : https://github.com/Midtrans/midtrans-php
guzzlehttp tutorial : https://www.itsolutionstuff.com/post/laravel-57-guzzle-http-client-post-request-exampleexample.html

—

My Social Media :

facebook : zharlet30 , linkedin : https://www.linkedin.com/in/azhar-ogi-2bb408112/ , gitlab : @zharlet , line : zharlet .

Integrasi Snap-Api Midtrans menggunakan Laravel dengan Promise — Midtrans-Snap #ep2

Written by Azhar Ogi

Responses (1)