Menggunakan Payment Gateway Midtrans di Laravel


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:

  1. User melakukan Order.
  2. User mendapat invoice/tagihan.
  3. User melakukan transfer ke rekening yang sudah diinformasikan sebelumnya.
  4. User melakukan konfirmasi pembayaran (lewat form atau chat).
  5. Admin/CS melakukan pengecekan apakah dana sudah masuk atau belum.
  6. 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:

  1. Snap – Metode Snap ini memungkinkan kita untuk menampilkan Pop Up portal pembayaran pada halaman web kita.
  2. 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.
  3. 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:

Setelah package selesai diinstall, sekarang buka file config/services.php lalu tambahkan konfigurasi midtrans dibawah:

Karena kita akan membuat web donasi online, kita buat model dan migration-nya terlebih dahulu. Jalankan command dibawah di terminal:

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:

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:

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:

Buka file routes/web.php kemudian ubah/tambahkan ini:

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:

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:

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:

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.

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 🙂