Cara Integrasi Snap Midtrans Dengan Laravel

Kelebihan dari midtrans ini sendiri dapat diintegrasikan kedalam beberapa framework seperti Larav...
Penulis
Admin
Kategori
Tutorial
Estimasi
3 menit baca
Dilihat
801
Posting
26 Aug 2022
Cara Integrasi Snap Midtrans Dengan Laravel Kelebihan dari midtrans ini sendiri dapat diintegrasikan kedalam beberapa framework seperti Laravel, Codeigniter, atau bahkan aplikasi berbasis node.js pun dapat menggunakan Midtrans sebagai metode pembayaran. Namun saat ini kita akan menjelaskan secara singkat padat dan jelas bagaimana cara mengintegrasikan Midtrans dengan Laravel. Cara Integrasi Snap Midtrans Dengan Laravel
2022-11-25

Midtrans merupakan sebuah layanan payment gateway yang cukup populer digunakan oleh e-commerce diindonesia, bahkan beberapa perusahaan besar menggunakan Midtrans sebagai metode pembayaran mereka. Kelebihan dari midtrans ini sendiri dapat diintegrasikan kedalam beberapa framework seperti Laravel, Codeigniter, atau bahkan aplikasi berbasis node.js pun dapat menggunakan Midtrans sebagai metode pembayaran. Namun saat ini kita akan menjelaskan secara singkat padat dan jelas bagaimana cara mengintegrasikan Midtrans dengan Laravel.

Beberapa metode pembayaran yang disediakan oleh layanan seperti Midtrans terbilang cukup lengkap, karena didalamnya sudah termasuk pembayaran melalui bank transfer atau virtual account, qris, gopay, minimarket dan lainnya. Sehingga dengan banyaknya pilihan tersebut dapat memudahkan pemilik situs untuk mengelola metode pembayaran secara otomatis. Dibandingkan dengan jaman dulu, kini kamu tidak perlu pusing untuk memikirkan bagaimana jika saya membuat toko online tapi masih belum ada sistem pembayarannya, oleh karena itu beberapa layanan payment gateway sangat berguna sekali.

Mungkin kalian sudah membuat aplikasi e-commerce dengan Laravel, namun bingung bagaimana cara mengintegrasikan metode pembayaran ke dalam aplikasi kalian, jangan khawatir, kamu berada didalam artikel yang tepat, dalam penjelasan kami, mungkin menjelaskan dari pertama kali menginstall Laravelnya sehingga tidak menimbulkan kebingungan nantinya.

 

Cara integrasi snap midtrans dengan laravel

 

 

1. Install Laravel

Pertama-tama karena kita akan mengintegrasikan Midtrans dengan laravel, maka kita harus membuat project baru dulu dengan framework Laravel, kita disini menggunakan XAMPP sebagai web server, kamu sesuaikan saja dengan Web Server yang digunakan, masuk kedalam folder htdocs, buat folder baru, lalu buka terminal CMD, arahkan kedalam folder project kalian bisa dengan cara:

cd c:\
cd xampp
cd htdocs
cd nama project kamu

Setelah selesai, masukkan perintah berikut untuk menginstall Laravelnya yaitu:

composer create-project laravel/laravel

Tunggu hingga proses installasi selesai, setelah selesai anda bisa masuk kedalam text editor kalian, disini kita menggunakan VScode, jika kamu juga menggunakan VS code juga bisa masukkan perintah berikut:

code .

 

2. Installasi library Midtrans

Untuk menjalankan payment gateway midtrans kedalam project laravel, kita memerlukan library khusus untuk midtrans itu sendiri, dan midtrans sudah menyediakan library yang bisa kita gunakan dalam memproses pembayaran didalam server kita yang nantinya semua data tersebut akan dikirimkan ke server midtrans, kita asumsikan kamu sudah mendaftar dan memiliki SECRET KEY dan CLIENT KEY, jika belum kamu bisa daftar terlebih dahulu di situs resmi Midtrans.

Untuk menginstall library dari midtrans, silahkan masukan perintah berikut kedalam terminal:

composer require midtrans/midtrans-php

Tunggu hingga proses installasi selesai, jika sudah kita lanjut untuk membuat controller.

 

3. Membuat controller

Untuk menjalankan midtrans dan menampilkan informasi pembayaran dari konsumen kita membutuhkan controller untuk memprosesnya, didalam controller ini kita akan membuat public function index yang berisi data dummy untuk pembayaran, untuk data dummy sendiri, kita menggunakan sample dari dokumentasi midtrans, kamu juga bisa menghubungkan data-data pembayaran tersebut didalam database, disesuaikan saja. Oke lanjut, untuk membuat controller baru kamu bisa masukkan perintah berikut kedalam terminal:

php artisan make:controller PaymentController

Tunggu hingga Laravel membuat controller baru didalam folder controller, jika sudah kamu bisa masukkan syntax berikut kedalam controller yang sudah terbuat.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PaymentController extends Controller
{
    public function index(Request $request)
    {
        // Set your Merchant Server Key
        \Midtrans\Config::$serverKey = 'CLIENT_SECRET_MASUKAN_DISINI';
        // Set to Development/Sandbox Environment (default). Set to true for Production Environment (accept real transaction).
        \Midtrans\Config::$isProduction = false;
        // Set sanitization on (default)
        \Midtrans\Config::$isSanitized = true;
        // Set 3DS transaction for credit card to true
        \Midtrans\Config::$is3ds = true;

        $params = array(
            'transaction_details' => array(
                'order_id' => rand(),
                'gross_amount' => 10000,
            ),
            'customer_details' => array(
                'first_name' => 'budi',
                'last_name' => 'pratama',
                'email' => '[email protected]',
                'phone' => '08111222333',
            ),
        );

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

        return view('welcome', ['snapToken' => $snapToken]);
    }
}

Pastikan untuk memerhatikan beberapa konfigurasi pada midtrans, jika kamu sedang melakukan proses development, baiknya set production menjadi false, jika semua sudah siap maka bisa kamu atur ulang konfigurasinya menjadi true. Dan juga memasukan SERVER KEY dengan benar, karena snap token tidak akan tergenerate jika SERVER KEY tidak sesuai dengan akun midtrans kamu.

Setelah isi dari Payment Controller sudah diset, kita akan mengatur routenya, buka folder route, lalu buka file web.php, atur route dari controller yang sudah kita buat tadi.

use App\Http\Controllers\PaymentController;
Route::get('/', [PaymentController::Class, 'index']);

Silahkan test pada browser, pastikan tidak ada muncul error. Dalam balik layar sebenarnya anda sudah memiliki snap token dengan beberapa informasi dummy yang sudah kita buat, langkah selanjutnya adalah mengatur tampilan dan menambahkan javascript snap.js untuk memproses pembayarannya.

 

4. Menampilkan snap token kedalam tampilan

Untuk menampilkan snap, kita membutuhkan beberapa elemen untuk menjalankannya yaitu client key, pada kode javascriptnya kamu bisa memasukkan token dari CLIENT KEY kamu yang didapatkan dari dashboard midtrans, jika masih dalam tahap developent pastikan file dari script snap.js nya adalah https://app.sandbox.midtrans.com/snap/snap.js, jika sudah masuk kedalam tahap production, bisa ganti url snap.js tersebut menjadi https://app.midtrans.com/snap/snap.js. Buka file welcome.blade.php, copy paste kode dibawah ini:

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script type="text/javascript"
      src="https://app.sandbox.midtrans.com/snap/snap.js"
      data-client-key="ISI_CLIENT_KEY_DISINI"></script>
  </head>
 
  <body>
    <button id="pay-button">Pay!</button>
 
    <script type="text/javascript">
      var payButton = document.getElementById('pay-button');
      payButton.addEventListener('click', function () {
        window.snap.pay('{{ $snapToken }}');
      });
    </script>
  </body>
</html>

Perhatikan tombol pay di pojok kiri atas, jika sudah muncul kamu bisa coba test dengan mengkliknya, maka akan tampil seperti gambar dibawah ini:

contoh snap payment midtrans

 

Kesimpulan

Midtrans merupakan payment gateway yang bisa kamu gunakan untuk mengelola pembayaran didalam sistem aplikasi kamu, kamu juga bisa memodifikasi semua tutorial basic dari integrasi snap dari midtrans sesuai dengan aplikasi kalian. 

Share