Ketika kita membuat sebuah aplikasi baik itu berbasis web ataupun mobile, seringkali kita dihadapkan dengan fitur dimana user harus melakukan pembayaran. Sistem pembayaran ini sering kita temukan ketika membuat sebuah ecommerce, aplikasi berbayar, dsb. Dari sekian banyak sistem pembayaran, salah satu yang paling sering kita temukan adalah seperti ini:
- User melakukan Order.
- User mendapat invoice/tagihan.
- User melakukan transfer ke rekening yang sudah diinformasikan sebelumnya.
- User melakukan konfirmasi pembayaran (lewat form atau chat).
- Admin/CS melakukan pengecekan apakah dana sudah masuk atau belum.
- Jika sudah masuk maka Order tadi pun akan diapprove dan diproses.
Cara seperti diatas sangat sering kita temukan terutama pada sistem yang belum besar, tapi ketika aplikasi tersebut semakin membesar (jumlah pengguna semakin banyak) maka cara seperti diatas sudah tidak efisien lagi. Solusi yang bisa kita ambil adalah dengan menggunakan Payment Gateway, Payment Gateway ini akan sangat membantu kita dalam meng-handle masalah pembayaran.
Ada beberapa Payment Gateway yang banyak dipakai di Indonesia. Ada Paypal, Doku, Midtrans, Xendit, dll. Karena kebetulan yang paling sering saya pakai adalah Midtrans jadi di artikel kali ini kita akan membahas penggunaan Midtrans di Laravel.
Pada tutorial ini sebagai contoh kasus kita akan membuat sebuah web donasi online sederhana. Tapi yang perlu diingat, sistem donasi yang ada di contoh ini dibuat sesederhana mungkin dan bukan untuk diterapkan di production, hanya agar lebih mudah memahami alur kerja penggunaan Midtransnya saja.
Persiapan
Sebelum membahas lebih jauh, saya asumsikan temen-temen sudah menyiapkan project Laravel yang siap pakai di komputer temen-temen. Pastikan juga temen-temen sudah daftar Midtrans disini, setelah mendaftar kemudian pilih Sandbox pada pilihan Environtment agar bisa kita bebas mengetes sesuka hati.
Kemudian masuk ke halaman Pengaturan > Access Keys kemudian catat Client Key dan Server Key yang ada disana. Kedua key ini nantinya akan dimasukan di konfigurasi project Laravel kita.
Cara Kerja Midtrans
Ada beberapa product/metode yang disediakan oleh Midtrans yaitu:
- Snap – Metode Snap ini memungkinkan kita untuk menampilkan Pop Up portal pembayaran pada halaman web kita.
- Snap Redirect/Payment Link – Jika kita menggunakan metode ini, ketika membuat sebuah transaksi maka midtrans akan meng-generate URL untuk portal pembayaran. Bedanya dengan metode Snap adalah jika metode snap portal pembayaran akan ditampilkan dihalaman web kita berupa pop up, sedangkan Snap Redirect/Payment Link ini halaman portal pembayaran berada di halaman/web milik Midtrans.
- Core API – Seperti namanya, metode ini menggunakan core API midtrans yang berarti tampilan dari sisi front end bisa kita atur sesuka hati. Saya belum pernah pakai ini karena terlihat ribet 😀
Dari ketiga metode diatas, yang paling sering saya gunakan adalah metode Snap karena sangat simple, mudah dan dari sisi tampilan pun terlihat cukup bagus. Begini tampilan jika di web browser:
Ini tampilan jika Snap diimplementasikan pada Mobile Apps (Android):
Karena itu pada tutorial ini kita akan mencoba menggunakan metode pertama (Snap).
Cara kerja Snap kurang lebih seperti ini:
Disana ada istilah Snap Backend dan Merchat Backend. Snap Backend yang dimaksud disana adalah Backend Midtrans dan Merchant Backend adalah Backend Aplikasi yang kita buat. Untuk penjelasan lebih lanjut temen-temen bisa baca disini.
Waktunya Ngoding
Kita akan menggunakan PHP SDK yang disediakan langsung oleh Veritrans, kenapa Veritrans? Dulu namanya memang Veritrans, tapi kemudian di akhir Oktober 2016 berubah nama menjadi Midtrans. Jika ingin baca-baca dokumentasi SDKnya bisa buka disini.
Buka terminal lalu arahkan ke direktori project kita, kemudian jalankan perintah dibawah untuk install package SDK midtrans:
|
1 2 |
composer require veritrans/veritrans-php |
Setelah package selesai diinstall, sekarang buka file config/services.php lalu tambahkan konfigurasi midtrans dibawah:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php return [ /* | Dibagian atas ini ada konfigurasi untuk service lainnya seperti: email, stripe, dsb. */ 'midtrans' => [ // Midtrans server key 'serverKey' => env('MIDTRANS_SERVERKEY'), // Midtrans client key 'clientKey' => env('MIDTRANS_CLIENTKEY'), // Isi false jika masih tahap development dan true jika sudah di production, default false (development) 'isProduction' => env('MIDTRANS_IS_PRODUCTION', false), 'isSanitized' => env('MIDTRANS_IS_SANITIZED', true), 'is3ds' => env('MIDTRANS_IS_3DS', true), ], ]; |
Karena kita akan membuat web donasi online, kita buat model dan migration-nya terlebih dahulu. Jalankan command dibawah di terminal:
|
1 2 |
php artisan make:model Model/Donation -m |
Command diatas akan membuat model app/Model/Donation.php dan migration di database/migrations/xxxx_xx_xx_xxxxxx_create_donations_table.php.
Selanjutnya ubah database migration menjadi seperti dibawah:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php use Illuminate\Support\Facades\Schema; use Illuminate\Database\Schema\Blueprint; use Illuminate\Database\Migrations\Migration; class CreateDonationsTable extends Migration { /** * Run the migrations. * * @return void */ public function up() { Schema::create('donations', function (Blueprint $table) { $table->increments('id'); $table->string('donor_name')->nullable(); $table->string('donor_email')->nullable(); $table->string('donation_type')->nullable(); $table->decimal('amount', 20, 2)->default(0); $table->string('note')->nullable(); $table->string('status')->default('pending'); $table->string('snap_token')->nullable(); $table->timestamps(); }); } /** * Reverse the migrations. * * @return void */ public function down() { Schema::dropIfExists('donations'); } } |
Kita sengaja menambahkan field snap_token untuk menyimpan token snap Midtrans, field status nantinya akan diubah ketika ada notifikasi perubahan status dari Midtrans.
Kita jalankan php artisan migrate untuk mengimplementasikan migration diatas, setelah itu kita buat model Donation. Saya terbiasa menyimpan model di direktori app/Model agar lebih rapih, jalankan perintah php artisan make:model Model/Donation setelah itu ubah menjadi seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<?php namespace App\Model; use Illuminate\Database\Eloquent\Model; class Donation extends Model { /** * Fillable attribute. * * @var array */ protected $fillable = [ 'donor_name', 'donor_email', 'donation_type', 'amount', 'note', ]; /** * Set status to Pending * * @return void */ public function setPending() { $this->attributes['status'] = 'pending'; self::save(); } /** * Set status to Success * * @return void */ public function setSuccess() { $this->attributes['status'] = 'success'; self::save(); } /** * Set status to Failed * * @return void */ public function setFailed() { $this->attributes['status'] = 'failed'; self::save(); } /** * Set status to Expired * * @return void */ public function setExpired() { $this->attributes['status'] = 'expired'; self::save(); } } |
Diatas kita set atribut di $fillable agar bisa menggunakan Mass Assignment, method-method yang ada dibawah seperti setPending(), setSuccess(), setFailed(), dsb adalah action-action yang nanti akan kita panggil ketika ada notifikasi perubahan status dari Midtrans.
Selanjutnya pada file .env jangan lupa tambahkan konfiguriasi midtrans. Termasuk saat deploy ke server, jangan sampai lupa untuk set konfigurasi ini di .env:
|
1 2 3 4 5 |
MIDTRANS_CLIENTKEY=xxxxxxxxxxxxx MIDTRANS_SERVERKEY=xxxxxxxxxxxxx #MIDTRANS_IS_PRODUCTION= // Uncomment dan isi true jika sudah di production #MIDTRANS_IS_SANITIZED= #MIDTRANS_IS3DS= |
Buka file routes/web.php kemudian ubah/tambahkan ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php /* |-------------------------------------------------------------------------- | 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::post('/finish', function(){ return redirect()->route('welcome'); })->name('donation.finish'); |
GET / pada baris ke-14 kita hanya menampilkan halaman depan saja, disana nanti kita buat form untuk donasi dan juga list donasi.
POST /finish pada baris ke-15 itu adalah halaman ketika user telah selesai melakukan pembayaran di portal midtrans, nanti kita redirect ke halaman ini.
POST /donation/store pada baris ke-19 itu adalah endpoint untuk membuat transaksi (save ke database & generate snap token ke midtrans). Jadi nanti cara kerjanya dari halaman depan setelah user mengisi form dan pas di klik tombol submit maka akan melakukan sebuah Ajax Request ke endpoint ini.
POST /notification/handler adalah url untuk menerima notifikasi dari Midtrans. Contoh misalkan setelah user menyelesaikan pembayaran dan uang sudah diterima oleh Midtrans maka Midtrans akan mengirim notifikasi ke endpoint ini. Dan juga tentu bukan hanya ketika transaksi berhasil, tapi juga ketika expired (kadaluwarsa) atau failed (gagal) pun akan mengirim notifikasi ke endpoint ini.
Oh iya, standarnya ketika kita mengakses sebuah url dengan method POST di Laravel kita harus mengirim CSRF Token di setiap request-nya. Tapi karena yang mengakses url nanti adalah pihak luar (midtrans) maka kita harus menambahkan pengecualian kepada url tersebut agar tidak harus mengirim CSRF Token. Buka file app/Http/Middleware/VerifyCsrfToken.php kemudian pada properti $except kita tambahkan kedua URL yang akan diakses oleh Midtrans tadi sehingga menjadi seperti ini:
|
1 2 3 4 5 6 7 8 9 10 |
/** * The URIs that should be excluded from CSRF verification. * * @var array */ protected $except = [ 'finish', 'notification/handler', ]; |
Oke, seperti yang dilihat pada file routes/web.php tadi kita menggunakan DonationController. Maka selanjutkan kita buat controller dengan menjalankan perintah php artisan make:controller DonationController pada terminal/cmd kemudian ubah menjadi seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Model\Donation; use Veritrans_Config; use Veritrans_Snap; use Veritrans_Notification; class DonationController extends Controller { /** * Make request global. * * @var \Illuminate\Http\Request */ protected $request; /** * Class constructor. * * @param \Illuminate\Http\Request $request User Request * * @return void */ public function __construct(Request $request) { $this->request = $request; // Set midtrans configuration Veritrans_Config::$serverKey = config('services.midtrans.serverKey'); Veritrans_Config::$isProduction = config('services.midtrans.isProduction'); Veritrans_Config::$isSanitized = config('services.midtrans.isSanitized'); Veritrans_Config::$is3ds = config('services.midtrans.is3ds'); } /** * Show index page. * * @return \Illuminate\View\View */ public function index() { $data['donations'] = Donation::orderBy('id', 'desc')->paginate(8); return view('welcome', $data); } /** * Submit donation. * * @return array */ public function submitDonation() { \DB::transaction(function(){ // Save donasi ke database $donation = Donation::create([ 'donor_name' => $this->request->donor_name, 'donor_email' => $this->request->donor_email, 'donation_type' => $this->request->donation_type, 'amount' => floatval($this->request->amount), 'note' => $this->request->note, ]); // Buat transaksi ke midtrans kemudian save snap tokennya. $payload = [ 'transaction_details' => [ 'order_id' => $donation->id, 'gross_amount' => $donation->amount, ], 'customer_details' => [ 'first_name' => $donation->donor_name, 'email' => $donation->donor_email, // 'phone' => '08888888888', // 'address' => '', ], 'item_details' => [ [ 'id' => $donation->donation_type, 'price' => $donation->amount, 'quantity' => 1, 'name' => ucwords(str_replace('_', ' ', $donation->donation_type)) ] ] ]; $snapToken = Veritrans_Snap::getSnapToken($payload); $donation->snap_token = $snapToken; $donation->save(); // Beri response snap token $this->response['snap_token'] = $snapToken; }); return response()->json($this->response); } /** * Midtrans notification handler. * * @param Request $request * * @return void */ public function notificationHandler(Request $request) { $notif = new Veritrans_Notification(); \DB::transaction(function() use($notif) { $transaction = $notif->transaction_status; $type = $notif->payment_type; $orderId = $notif->order_id; $fraud = $notif->fraud_status; $donation = Donation::findOrFail($orderId); if ($transaction == 'capture') { // For credit card transaction, we need to check whether transaction is challenge by FDS or not if ($type == 'credit_card') { if($fraud == 'challenge') { // TODO set payment status in merchant's database to 'Challenge by FDS' // TODO merchant should decide whether this transaction is authorized or not in MAP // $donation->addUpdate("Transaction order_id: " . $orderId ." is challenged by FDS"); $donation->setPending(); } else { // TODO set payment status in merchant's database to 'Success' // $donation->addUpdate("Transaction order_id: " . $orderId ." successfully captured using " . $type); $donation->setSuccess(); } } } elseif ($transaction == 'settlement') { // TODO set payment status in merchant's database to 'Settlement' // $donation->addUpdate("Transaction order_id: " . $orderId ." successfully transfered using " . $type); $donation->setSuccess(); } elseif($transaction == 'pending'){ // TODO set payment status in merchant's database to 'Pending' // $donation->addUpdate("Waiting customer to finish transaction order_id: " . $orderId . " using " . $type); $donation->setPending(); } elseif ($transaction == 'deny') { // TODO set payment status in merchant's database to 'Failed' // $donation->addUpdate("Payment using " . $type . " for transaction order_id: " . $orderId . " is Failed."); $donation->setFailed(); } elseif ($transaction == 'expire') { // TODO set payment status in merchant's database to 'expire' // $donation->addUpdate("Payment using " . $type . " for transaction order_id: " . $orderId . " is expired."); $donation->setExpired(); } elseif ($transaction == 'cancel') { // TODO set payment status in merchant's database to 'Failed' // $donation->addUpdate("Payment using " . $type . " for transaction order_id: " . $orderId . " is canceled."); $donation->setFailed(); } }); return; } } |
Untuk fungsi dari tiap method kita bisa lihat pada penjelasan beberapa paragraf diatas.
Selanjutnya kita tinggal buat view untuk tampilan halaman depan, seperti yang terlihat pada method index() kita akan melempar view ke file welcome.blade.php Isinya kurang lebih seperti ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 |
<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Simple Donation with Midtrans</title> <!-- Styles --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> html, body { background-color: #fff; color: #636b6f; font-weight: 200; height: 100vh; margin: 0; } </style> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <a class="navbar-brand" href="#">Online Donation</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#create">Donation</a> </li> <li class="nav-item"> <a class="nav-link" href="#list">Donation List</a> </li> </ul> </div> </nav> <div class="jumbotron jumbotron-fluid" style="background-color: #74b9ff; color: white;"> <div class="container"> <h1 class="display-4">Online Donation</h1> <p class="lead">This is just simple donation web with Midtrans.</p> </div> </div> <div class="container"> <form class="form-horizontal" id="donation" onsubmit="return submitForm();"> <!-- Form Name --> <legend>Donation</legend> <div class="row"> <div class="col-md-4"> <!-- Text input--> <div class="form-group"> <label class="control-label" for="donor_name">Donor Name</label> <div> <input id="donor_name" name="donor_name" type="text" placeholder="Enter your name.." class="form-control input-md" required=""> </div> </div> </div> <div class="col-md-4"> <!-- Text input--> <div class="form-group"> <label class="control-label" for="donor_email">Donor Email</label> <div> <input id="donor_email" name="donor_email" type="text" placeholder="Enter your email.." class="form-control input-md" required=""> </div> </div> </div> <div class="col-md-4"> <!-- Select Basic --> <div class="form-group"> <label class="control-label" for="donation_type">Type</label> <div> <select id="donation_type" name="donation_type" class="form-control"> <option value="infak_kemanusiaan">Infak Kemanusiaan</option> <option value="infak_pendidikan">Infak Pendidikan</option> <option value="infak_kesehatan">Infak Kesehatan</option> </select> </div> </div> </div> </div> <div class="row"> <div class="col-md-6"> <!-- Prepended text--> <label for="">Amount</label> <div class="input-group"> <div class="input-group-prepend"> <span class="input-group-text" id="basic-addon1">Rp</span> </div> <input id="amount" name="amount" class="form-control" placeholder="" type="number" min="10000" max="999999999" required=""> </div> </div> <div class="col-md-6"> <!-- Textarea --> <div class="form-group"> <label class="control-label" for="note">Note (Optional)</label> <div> <textarea class="form-control" id="note" name="note"></textarea> </div> </div> </div> </div> <button id="submit" class="btn btn-success">Submit</button> </form> <br> <table class="table table-striped" id="list"> <tr> <th>ID</th> <th>Donor Name</th> <th>Amount</th> <th>Donation Type</th> <th>Status</th> <th style="text-align: center;">Pay</th> </tr> @foreach ($donations as $donation) <tr> <td><code>{{ $donation->id }}</code></td> <td>{{ $donation->donor_name }}</td> <td>Rp. {{ number_format($donation->amount) }},-</td> <td>{{ ucwords(str_replace('_', ' ', $donation->donation_type)) }}</td> <td>{{ ucfirst($donation->status) }}</td> <td style="text-align: center;"> @if ($donation->status == 'pending') <button class="btn btn-success btn-sm" onclick="snap.pay('{{ $donation->snap_token }}')">Complete Payment</button> @endif </td> </tr> @endforeach <tr> <td colspan="6">{{ $donations->links() }}</td> </tr> </table> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script src="{{ !config('services.midtrans.isProduction') ? 'https://app.sandbox.midtrans.com/snap/snap.js' : 'https://app.midtrans.com/snap/snap.js' }}" data-client-key="{{ config('services.midtrans.clientKey') }}"></script> <script> function submitForm() { // Kirim request ajax $.post("{{ route('donation.store') }}", { _method: 'POST', _token: '{{ csrf_token() }}', amount: $('input#amount').val(), note: $('textarea#note').val(), donation_type: $('select#donation_type').val(), donor_name: $('input#donor_name').val(), donor_email: $('input#donor_email').val(), }, function (data, status) { snap.pay(data.snap_token, { // Optional onSuccess: function (result) { location.reload(); }, // Optional onPending: function (result) { location.reload(); }, // Optional onError: function (result) { location.reload(); } }); }); return false; } </script> </body> </html> |
Hasilnya nanti seperti ini:
Sampai disini sudah selesai, tahap selanjutnya adalah pengetesan, saya lebih suka mengetes dengan langsung deploy di server development. Karena nanti Midtrans akan mengirim notifikasi ke web kita ketika ada perubahan status.
Untuk versi Stagging mode, kita bisa mengetes menggunakan akun-akun yang ada disini, disitu ada kartu kredit, akun internet banking, dll yang bisa digunakan untuk pengetesan.
Silahkan untuk mendeploy web Anda sampai web bisa berjalan, kemudian masuk ke Dashboard Midtrans > Settings > Configuration, disana kita masukan url-url yang sudah kita set sebelumnya. Karena saya deploy di https://midtrans-example.azishapidin.com/, maka settings nya kurang lebih seperti ini:
Ketika finish, unfinish dan error saya sengaja redirect ke url /finish, silahkan sesuaikan dengan kebutuhan temen-temen.
Sampai disini jika tidak ada masalah, maka harusnya sudah bisa digunakan. Selamat mencoba 🙂
Jika ingin melihat contohnya temen-temen bisa cek disini. Abaikan kalau ada beberapa celah keamanan di fitur donasinya, kita fokus aja ke bagian-bagian yang berhubungan dengan Midtrans. Jika ingin liat-liat source code-nya ada disini.
Oke sekian tutorial kali ini, semoga bermanfaat. Jika ada pertanyaan silahkan layangkan di kolom komentar. Terima kasih 🙂