Press "Enter" to skip to content

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

fadli 6

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit – Xendit merupakan salah satu payment gateway yang ada di indonesia, dan juga menjadi salah satu payment gateway yang paling populer dan paling sering digunakan oleh para developer.

Karena memiliki fitur dan dokumentasi yang lengkap, ini lah yang menjadi faktor kenapa xendit menjadi begitu populer dikalangan developer.

Untuk informasi lebih lanjut mengenai xendit, kalian bisa sercing sendiri di gugel, atau bisa juga kunjungi halaman resmi nya disini.

Kali ini kita akan berfokus ke tahap integrasi nya, mari langsung saja kita mulai.

Preview Project Yang Akan Kita kerjakan

Sebelum lanjut, mimin ingin memberikan preview project atau hasil akhir dari project nya yang akan kita kerjakan.

Jadi kita akan membuat sebuah aplikasi tagihan secara online yang akan terhubung dengan payment gateway xendit.

Akan ada halaman list data tagihan nya, halaman tambah data tagihan nya, dan juga halaman untuk pembayaran tagihan nya secara online yang bisa dibayar menggunakan beberapa metode pembayaran.

Untuk scrinsut nya adalah seperti berikut ini:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

 

Hal-Hal Yang Perlu Diperhatikan

Perlu kalian ketahui, bahwasanya xendit memiliki sebuah library sendiri untuk bahasa pemrograman PHP, yaitu Xendit Rest API Client for PHP.

Tapi kita tidak akan menggunakan library tersebut, kita akan membuat request API sendiri secara manual yang berpedoman ke dokumentasi resmi nya, kalian bisa cek dokumentasi resmi API Reference nya disini.

Menggunakan Http Client Laravel

Nah, karena kita akan membuat request api nya secara manual (tanpa library), maka kita akan menggunakan Http Client Laravel.

Karena dengan Http Client Laravel, kita bisa dengan mudah membuat sebuah Http request atau sebuah request API dibandingkan jika kita menggunakan php cURL secara langsung.

Jadi bagi kalian yang belum mengetahui tentang Http Client Laravel, silahkan baca postingan mimin sebelum nya, mimin sudah membahas tuntas tentang apa itu http client laravel, dan juga bagaimana cara menggunakan nya, buka: Http Client Laravel, cara gampang bikin request API.

Instalasi Laravel 8

Untuk studi kasus kali ini, mimin menggunakan laravel versi 8, dan juga masih menggunakan php versi 7.4.

Kalo temen-temen menggunakan laravel versi yang lain sebetulnya ga masalah, asalkan masih menggunakan minimal laravel versi 7.

Mengapa minimal harus laravel 7? Karena fitur http client laravel baru ada pada laravel versi 7.

Untuk cara instalasi nya, kalian bisa kunjungi halaman resmi nya disini.

Registrasi akun xendit

Pastikan juga temen-temen disini sudah memiliki akun xendit sampai ke tahap verifikasi yaa, agar akun nya bisa digunakan untuk melakukan transaksi.

Authentication Xendit

Langkah pertama yang perlu kita lakukan yaitu membuat proses otentikasi nya.

Kita perlu mendapatkan token/secret key nya terlebih dahulu didalam dashboard xendit kita.

Silahkan kalian masuk kedalam menu settings, kemudian pilih API keys.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Setelah itu klik button generate secret key untuk mendapatkan api key yang baru.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Maka nanti akan muncul popup seperti berikut ini, kalian isikan API key name nya dan juga tentukan permission nya, setelah itu klik button generate key yang ada dipaling bawah.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Maka nanti kalian akan mendapatkan sebuah secret API key nya, silahkan disimpan key tersebut dan jangan sampai hilang, karena nanti kita akan simpan key nya kedalam file .env.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Simpan Secret Key kedalam file .env

Selanjutnya kita akan menyimpan secret API key yang sebelumnya sudah kita peroleh kedalam file .env, contoh nya seperti berikut ini:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Diatas, pada file .env saya membuat sebuah variable baru dengan nama SECRET_KEY_XENDIT untuk menyimpan secret key xendit nya.

Membuat File Konfigurasi Baru

Setelah kita menyimpan secret key nya kedalam file .env, kita tidak bisa langsung menggunakan nya.

Kita perlu meng-encode nya terlebih dahulu menggunakan format base64_encode.

Jadi xendit menggunakan BASIC AUTHENTICATION untuk proses otentikasi nya, yang mana format yang dibutuhkan yaitu {{username}}:{{password}}.

Untuk username nya kita isi dengan secret key yang kita dapatkan dari dashboard xendit nya, sementara untuk password nya dikosongkan saja.

Kemudian untuk format tersebut kita encode menggunakan base64.

Jadi misalkan secret key kita adalah xnd_development_1234567, maka yang kita encode ke base64 adalah :

xnd_development_1234567: (kita perlu menambahkan titik dua dibelakang nya).

Oke, sekarang langsung kita buat file didalam folder “../config/xendit.php”, kemudian kalian isi seperti berikut ini:

<?php

return [
    'key_auth' => base64_encode(env('SECRET_KEY_XENDIT') . ':')
];

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Didalam file konfigurasi tersebut, kita sudah mengenkrip secret key xendit nya kedalam base 64 encode, nanti nya key tersebutlah yang akan kita gunakan untuk proses authorization terhadap xendit nya.

Untuk cara pemanggilan file konfigurasi diatas sangatlah gampang, kalian hanya perlu memanggil nya dengan cara seperti berikut:

....
config('xendit.key_auth');
....

Perintah diatas akan selalu kita bawa ketika kita ingin melakukan sebuah http request ke endpoint xendit nya.

Pembuatan Form Aplikasi nya

Sekarang kita akan buat form aplikasi nya terlebih dahulu, kita akan membuat sebuah sistem tagihan online yang mana nanti akan terdapat link payment nya untuk melakukan pembayaran secara online.

Migrate Database

Sekarang kita buat file model beserta migration nya terlebih dahulu, silahkan kalian jalankan perintah seperti berikut:

....
php artisan make:model Tagihan -m
....

Maka nanti akan tercipta 2 file baru, yaitu file model nya dan juga file migration nya.

Untuk file migration nya kalian isi seperti berikut:

....
public function up()
{
    Schema::create('tagihans', function (Blueprint $table) {
        $table->id();

        $table->string('doc_no')->nullable();
        $table->text('description')->nullable();
        $table->integer('amount')->default(0);
        $table->string('payment_status')->nullable();
        $table->text('payment_link')->nullable();

        $table->timestamps();
    });
}
....

Dan untuk file migration nya kalian perlu tambahkan guarded seperti berikut:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Kemudian silahkan jalankan perintah:

....
php artisan migrate
....

Route, Controller, dan View

Sekarang kita buat route baru terlebih dahulu, kita akan membuat 3 route untuk kebutuhan:

  1. Menampilkan list data tagihan nya
  2. Menuju halaman create form data tagihan nya
  3. Store/save data tagihan nya

Contoh nya seperti berikut:

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TagihanController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Route::prefix('tagihan')->group(function () {

    /**
     * menampilkan list data tagihan nya
     */
    Route::get('/list', [TagihanController::class, 'index'])->name('tagihan.list');

    /**
     * menuju halaman create form data tagihan nya
     */
    Route::get('/create', [TagihanController::class, 'create'])->name('tagihan.create');

    /**
     * store/save data tagihan nya
     */
    Route::post('/store', [TagihanController::class, 'store'])->name('tagihan.store');
});

Kemudian kalian buat controller baru dengan nama TagihanController.

php artisan make:controller TagihanController

Selanjutnya kalian isi file controller tersebut menjadi seperti ini:

<?php

namespace App\Http\Controllers;

use App\Models\Tagihan;

class TagihanController extends Controller
{
    /**
     * mengakses halaman list tagihan nya
     */
    public function index()
    {
        $data = Tagihan::all();

        return view('tagihan_list', compact('data'));
    }

    /**
     * halaman form create baru tagihan
     */
    public function create()
    {
        return view('tagihan_create');
    }

    /**
     * proses penyimpanan data tagihan
     */
    public function store()
    {
        Tagihan::create([
            'doc_no' => rand(),
            'amount' => request('amount'),
            'description' => request('description')
        ]);

        return redirect()->route('tagihan.list');
    }
}

Kita juga perlu membuat file view nya, pada contoh diatas kita membuat 2 buah file view:

  1. “../resources/views/tagihan_list.blade.php”.
  2. “../resources/view/tagihan_create.blade.php”.

“../resources/views/tagihan_list.blade.php” :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>List Tagihan</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        <fieldset>
            <legend>LIST DATA TAGIHAN</legend>
            <div class="row">
                <div class="col-md-12">
                    <a href="{{ route('tagihan.create') }}" class="btn btn-primary">TAMBAH DATA</a>
                    <hr>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>NO</th>
                                <th>DOC NO</th>
                                <th>AMOUNT</th>
                                <th>DESCRIPTION</th>
                                <th>PAYMENT STATUS</th>
                                <th>PAYMENT LINK</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($data as $index => $dt)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $dt->doc_no }}</td>
                                    <td>{{ number_format($dt->amount, 0, ',', '.') }}</td>
                                    <td>{{ $dt->description }}</td>
                                    <td>{{ $dt->payment_status }}</td>
                                    <td>{{ $dt->payment_link }}</td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </fieldset>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
</body>

</html>

“../resources/view/tagihan_create.blade.php” :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>List Tagihan</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

    <div class="container">
        <fieldset>
            <legend>CREATE DATA TAGIHAN</legend>
            <div class="row">
                <div class="col-md-12">
                    <a href="{{ route('tagihan.list') }}" class="btn btn-primary">KEMBALI</a>
                    <hr>
                    <form role="form" method="post" action="{{ route('tagihan.store') }}">
                        @csrf
                        <div class="box-body">
                            <div class="form-group">
                                {!! Form::label('amount', 'Amount') !!}
                                {!! Form::number('amount', 10000, [
                                    'class' => 'form-control',
                                    'placeholder' => 'Amount',
                                ]) !!}
                            </div>
                            <div class="form-group">
                                {!! Form::label('description', 'Description') !!}
                                {!! Form::textarea('description', '', [
                                    'class' => 'form-control',
                                    'placeholder' => 'Description',
                                    'rows' => 5,
                                ]) !!}
                            </div>
                        </div>
                        <!-- /.box-body -->

                        <div class="box-footer">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </form>
                </div>
            </div>
        </fieldset>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>
</body>

</html>

Maka ketika web nya diakses sesuai dengan route nya, maka hasil nya akan menjadi seperti berikut:

Melihat list tagihan: http://127.0.0.1:8000/tagihan/list

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Form create data tagihan: http://127.0.0.1:8000/tagihan/create

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Dengan logic yang sekarang, kita sudah bisa melihat list data tagihan nya, dan juga sudah bisa membuat data tagihan yang baru.

Untuk kolom payment status dan payment link, kita kosongkan terlebih dahulu, karena nanti kolom tersebut akan kita isi dengan response dari xendit nya.

Mulai Integrasi Dengan Xendit nya

Nah ini adalah yang ditunggu-tunggu, part inti dari pembahasan nya, kita akan coba mulai untuk integrasi xendit nya.

Untuk metode yang akan kita gunakan yaitu metode invoice, tutorial ini akan mengacu ke dokumentasi resmi nya disini.

Kalian perlu melakukan modifikasi file TagihanController nya menjadi seperti berikut ini, khusus nya pada bagian method store:

<?php

namespace App\Http\Controllers;

use App\Models\Tagihan;
use Illuminate\Support\Str;
use Illuminate\Support\Facades\Http;

class TagihanController extends Controller
{
    ....
    /**
     * proses penyimpanan data tagihan
     */
    public function store()
    {
        $secret_key = 'Basic '.config('xendit.key_auth');
        $external_id = Str::random(10);

        $data_request = Http::withHeaders([
            'Authorization' => $secret_key
        ])->post('https://api.xendit.co/v2/invoices', [
            'external_id' => $external_id,
            'amount' => request('amount')
        ]);

        $response = $data_request->object();

        Tagihan::create([
            'doc_no' => $external_id,
            'amount' => request('amount'),
            'description' => request('description'),
            'payment_status' => $response->status,
            'payment_link' => $response->invoice_url
        ]);

        return redirect()->route('tagihan.list');
    }
}

Penjelasan script diatas:

Pada baris ke-6, saya memanggil class Illuminate\Support\Str yang bertujuan untuk menggenerate external_id dan doc_no.

Pada baris ke-7, saya memanggil class Illuminate\Support\Facades\Http untuk penggunaan Http client laravel, kita akan melakukan request endpoint ke xendit menggunakan class ini.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Pada baris ke-17, kita memanggil secret key nya xendit yang sebelumnya sudah kita encrypt ke base64 yang kita taruh didalam file “../config/xendit.php”.

Yang perlu kalian perhatikan yaitu kita perlu menambahkan kata “Basic “ didepan nya, kenapa? Karena xendit menggunakan Basic Authentication dalam proses otentikasi nya.

Kemudian pada baris ke-18, kita menggenerate sebuah string random yang kita tampung kedalam sebuah variable bernama $external_id.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Variable ini akan kita kirim ke xendit nya sebagai external_id, dan juga akan kita simpan kedalam database local kita sebagai doc_no transaksi nya.

Jadi nilai yang dikirim ke xendit dan yang akan kita save sebagai doc_no transaksi nya wajib sama, tujuan nya yaitu untuk nanti sebagai kebutuhan callback nya.

Dan yang perlu kalian perhatikan lagi yaitu nilai dari si external_id wajib string, tidak boleh numeric.

Selanjutnya pada baris ke-20 sampai ke-25, kita melakukan Http request yang endpoint nya mengarah ke https://api.xendit.co/v2/invoices.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Kita membawa secret nya sebagai header dengan key Authorization.

Sementara untuk body request nya kita membawa external_id dan juga amount nya.

Kemudian untuk response dari request tersebut kita convert menjadi sebuah object dengan perintah seperti berikut:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Kalau kalian var_dump atau dd terhadap response tersebut, kurang lebih bentuk response nya adalah seperti berikut:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Kalau kalian perhatikan lagi pada bentuk response diatas, disana terdapat property status dan invoice_url.

Property status akan kita save ke db kita untuk mengisi field payment_status.

Dan property invoice_url akan kita save ke db kita untuk mengisi field payment_link.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Kalau kalian coba jalankan lagi proses create data tagihan nya, maka hasil nya nanti akan menjadi seperti ini:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Kalo kalian akses payment link nya, maka nanti akan diarahkan ke halaman xendit nya untuk melakukan proses pembayaran.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Menentukan Payment Method Yang Muncul

Kalau kalian ingin menentukan sendiri payment method apa saja yang ingin ditampilkan, kalian tinggal tambahkan 1 body parameter lagi yaitu “payment_methods”.

Parameter tersebut bernilai array, jadi kita tinggal kumpulkan aja payment method yang ingin kita tampilkan kedalam 1 variable array.

Sebagai contoh kita ingin menampilkan payment method BCA dan QRIS saja, maka request body nya menjadi seperti berikut:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

....
$secret_key = 'Basic ' . config('xendit.key_auth');
$external_id = Str::random(10);

$data_request = Http::withHeaders([
    'Authorization' => $secret_key
])->post('https://api.xendit.co/v2/invoices', [
    'external_id' => $external_id,
    'amount' => request('amount'),
    'payment_methods' => [
        'BCA', 'QRIS'
    ]
]);

$response = $data_request->object();
....

Saat halaman pembayaran nya diakses, akan muncul seperti berikut:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Bisa kalian lihat diatas, payment method yang muncul hanyalah BCA dan QRIS saja, ini sesuai dengan yang sudah kita tentukan sebelumnya.

Setting Callback/Webhook nya

Apa itu callback? intinya sih gini yaa, dengan callback, kita akan bisa mendapatkan informasi/notifikasi ketika terjadi sesuatu terhadap transaksi yang udah kita buat.

Sebagai contoh, ketika invoice yang sudah kita generate sebelum nya telah berhasil dibayarkan oleh si customer/end user, maka xendit akan mengirim notifikasi ke aplikasi web kita dengan memberikan informasi sejumlah data yang kita butuhkan.

Nah dengan data yang dikirimkan oleh xendit ke aplikasi kita, maka nanti kita bisa mengolah kembali data tersebut.

Misalkan ketika transaksi invoice tersebut sudah berhasil dibayarkan, maka aplikasi kita juga bisa mengupdate database local nya yang awalnya payment status nya adalah PENDING, bisa kita ubah menjadi PAID secara otomatis.

Tapi syarat untuk pemasangan callback pada dashboard xendit nya, kita perlu mengubah url local kita menjadi sebuah public url terlebih dahulu, atau istilah nya yaitu tunneling.

Platform yang biasanya digunakan untuk tunneling ialah ngrok.

Dengan ngrok, kita bisa mengubah url localhost kita menjadi sebuah public url yang bisa diakses secara online dikomputer manapun layaknya seperti sebuah website biasa.

Jika kamu pengguna windows, proses untuk menjalankan tunneling nya bisa kamu ikuti langkah-langkah yang ada di video berikut:

Atau jika kamu pengguna MAC, kamu bisa ikuti langkah-langkah yang ada di video berikut:

Oh ya, sebelum itu kita perlu membuat route webhook nya terlebih dahulu.

Kalian buka kembali file “../routes/web.php”, kemudian tambahkan satu buah route seperti berikut ini, yang perlu kalian ingat, route yang digunakan untuk menghandle webhook/callback wajib menggunakan method POST:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

....
/**
 * route callback/webhook
 */
Route::post('/callback', [TagihanController::class, 'callback']);
....

Kemudian setelah route nya terbentuk, karena route tersebut menggunakan method POST, maka secara default route tersebut akan tersaring oleh middleware VerifyCsrfToken, ini adalah salah satu security bawaan nya laravel.

Nah khusus untuk route callback yang baru kita buat, kita perlu menghilangkan security verifyCsrfToken nya, kenapa? karena hal ini bertujuan agar nanti nya route tersebut dapat di registrasikan pada dashboard xendit nya.

Silahkan buka file “../App/Http/Middleware/VerifyCsrfToken”. kemudian pada property $except, kalian tambahkan route callback nya.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Setelah itu silahkan buka kembali file TagihanController nya, dan tambahkan sebuah method baru dengan nama callback seperti berikut ini:

....
public function callback()
{
    $data = request()->all();

    $status = $data['status'];
    $external_id = $data['external_id'];

    Tagihan::where('doc_no', $external_id)->update([
        'payment_status' => $status
    ]);

    return response()->json($data);
}
....

Untuk penjelasan dari script diatas yaitu seperti berikut:

Pada baris ke-4, kita membuat sebuah variable $data yang digunakan untuk menangkap response yang dikirim oleh si xendit nya.

Response yang dikirim oleh si xendit disebut jugan dengan nama request payload, bentuk nya adalah seperti berikut:

{
      "id": "593f4ed1c3d3bb7f39733d83",
      "external_id": "IKsW5cARd1",
      "user_id": "5848fdf860053555135587e7",
      "is_high": false,
      "payment_method": "BANK_TRANSFER",
      "status": "PAID",
      "merchant_name": "Xendit",
      "amount": 2000000,
      "paid_amount": 2000000,
      "bank_code": "MANDIRI",
      "paid_at": "2020-01-14T02:32:50.912Z",
      "payer_email": "test@xendit.co",
      "description": "Invoice callback test",
      "created": "2020-01-13T02:32:49.827Z",
      "updated": "2020-01-13T02:32:50.912Z",
      "currency": "IDR",
      "payment_channel": "MANDIRI",
      "payment_destination": "8458478548758748"
}

Kalo kalian perhatikan bentuk response diatas, disana terdapat key status yang berisi payment status dari transaksi yang sedang berlangsung, contoh diatas berisi nilai PAID, ini artinya transaksi tersebut sudah berhasil dibayarkan.

Kemudian juga terdapat key external_id yang sebelumnya sudah kita isi dengan doc_no tagihan nya, key ini yang nanti nya sebagai patokan untuk melakukan update terhadap transaksi nya.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Selanjutnya pada baris ke-6 dan ke-7, kita mengambil data status dan external_id nya.

Data external_id tersebut yang akan menjadi patokan terhadap kondisi di query nya, dan mengubah payment_status tagihan nya berdasarkan data status yang dikirim oleh si xendit nya.

Kemudian kita perlu memberikan response berupa json, isi nya boleh apa saja, dikasus ini saya mengembalikan variabel data yang mana pada sebelum nya, variable data ialah yang menampung semua response yang dikirim oleh si xendit nya.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Nah, langkah terakhir kita akan meregistrasikan url/endpoint callback/webhook nya kedalam dashboard si xendit nya.

Sebelumnya kita jalankan dulu tunneling nya menggunakan ngrok dengan menjalankan perintah berikut, atau seperti yang sudah ditunjukan pada video tutorial sebelumnya.

....
ngrok http 80
....

Nanti kalian akan mendapatkan sebuah url public seperti berikut:

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Maka nanti url callback nya adalah menjadi seperti berikut:

“url_tunneling_nya/nama_folder_project_nya/public/tagihan/callback”.

contoh:

“https://50fx-116-236-37-278.ap.ngrok.io/xendit_laravel/public/tagihan/callback”.

Sekarang kita masuk lagi kedalam dashboard xendit nya, kemudian masuk kedalam menu settings->callback.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Kemudian kalian cari bagian INVOICES, masukkan url endpoint nya, dan klik Test and save.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Pastikan hasil dari test nya adalah berupa response 200.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Testing Callback/Webhook nya

Sekarang mari kita coba apakah webhook/callback nya sudah benar-benar berfungsi atau belum.

Silahkan buka lagi aplikasi web nya, boleh menggunakan url localhost nya atau melalui url tunneling nya.

Bikin data tagihan baru, kemudian bayar menggunakan methode pembayaran dana.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Klik Proceed to Pay sampai proses pembayaran nya sudah benar-benar berhasil dilakukan.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Kemudian kalian reload halaman list tagihan nya, kalau payment status nya sudah berubah menjadi PAID, maka callback nya sudah berjalan.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Kalian juga bisa melihat log history callback nya didalam dashboard xendit nya.

Tutorial Lengkap Integrasi Laravel Dengan Payment Gateway Xendit

Bagaimana? Mudah kan? Jika dirasa masih ada yang bingung, silahkan berkomentar dibawah yaa.. Terima kasih.

Github Repository

Buat kalian yang ingin mengclone atau mendapatkan source code materi ini, bisa kunjungi link github nya disini..

Support Us

Jika artikel ini bermanfaat untuk kamu, membantu menyelesaikan masalah yang sedang kamu hadapi, kamu juga bisa dukung kami dengan mengunjungi halaman berikut: https://saweria.co/sangcahayaid

  1. Zeei Zeei

    Adakah Repository contoh diatas ??
    saya ingin mempelajari xendit lebih jauh
    tapi masih pertama kali dengan payment gateway

    • ada om, nanti dikirim link github nya..

      • Yusuf Yusuf

        Mas, isi dari payment status itu ada apa aja mas, selain pending?

        • return [
          ‘COMPLETED’,
          ‘PAID’,
          ‘UNPAID’,
          ‘SUCCEEDED’,
          ‘EXPIRED’
          ];

      • Zeei Zeei

        Minta tolong di cantumin di artikel aja boleh ?

        • oke om.. nnti dicantumkan, masih proses om..

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: