Proyek Membuat Payment Gateway Midtrans Android Di Sketchware

Proyek Membuat Payment Gateway Midtrans Android Di Sketchware

Bismillahirrohmanirrohim… Assalamualaikum Wr Wb kawan kawan semua, apa kabarnya ? semoga senantiasa dalam lindungan Tuhan dan sehat selalu. Buat kawan kawan semua yang sedang ingin membangun aplikasi android untuk jualan online, sangat tepat jika kawan kawan semua mendalami tutorial yang akan saya bagikan ini. Yup, sesuai dengan judul kontennya saya memang akan membahas Membuat Payment Gateway Midtrans Android di Sketchware.

Saya anggap kawan kawan semua sudah mengetahui apa itu Payment Gateway, kelebihan dan kekurangannya menggunakan Payment Gateway jadi saya tidak akan panjang lebar membahasnya. Karena saya akan langsung membahas inti penerapannya di Sketchware.

Untuk Midtrans sendiri adalah payment gateway yang sudah saya pakai dari tahun 2016 namun untuk toko online Web yang saya buatkan untuk soudaraku, jadi saya tertantang untuk menerapkannya di Sketchware dan ternyata bekerja dengan baik. Untuk bisa menggunakan midtrans di proyek aplikasi android, kalian harus memiliki akun Midtrans dan jika belum memilikinya silahkan kalian daftar dengan klik link di sini : Midtrans Register.

Jika kalian sudah mendaftar maka kalian akan mendapatkan 2 jenis akun, yaitu akun Production untuk menjalankan payment gateway pada mode asli dan akun Sandbox untuk mode percobaan.

Seperti gambar di atas adalah tampilan dashboard akun Midtrans Sandbox saya, dan untuk beralih ke mode production anda tinggal klik dropdown di drawer menu samping ya. Sebelum anda bisa menggunakan akun anda, terlebih dahulu lakukan tahapan pengaturan yang kalian bisa baca di artikel dokumen resmi dari PT. Midtrans dengan klik link di sini.

Merchant ID, Server Key & Client Key

Tahapan selanjutnya anda lihat di dashboard akun anda pada bagian Setting -> Access Key dan simpan Merchant ID, Server Key & Client Key yang diperlukan untuk integrasi ke dalam Backend Server Anda dan Aplikasi Android anda sebagai Clientnya. Harap diperhatikan, jangan pernah membagikan Key dan ID anda di publik agar terhindar dari segala macam tindakan yang tidak diinginkan seperti penipuan dengan mengatas namakan akun anda.

Membuat Backend Server Merchant

Setelah anda mengetahui atau mendapatkan Server Key dan Client Key maka tahapan selanjutnya anda perlu membuat Server Backend sebagai media komunikasi saat aplikasi android yang anda bangun meminta request pembayaran dan pengguna. Pada tahapan ini saya akan mencontohkan dengan membuat server backend di Hosting milik saya, kalian tidak perlu khawatir karena bisa menggunakan hosting gratisan seperti https://id.000webhost.com/ yang penting bisa upload file server yang anda buat. Untuk file yang anda butuhkan untuk membuat server anda bisa download di sini : https://github.com/rizdaprasetya/midtrans-mobile-merchant-server–php-sample-

Setelah anda download lanjutkan extract file dan buka folder charge lalu buka file index.php seperti contoh di bawah ini :

File Server Call Merchant Midtrans
<?php
// Set your server key (Note: Server key for sandbox and production mode are different)
$server_key = '<server key>';
// Set true for production, set false for sandbox
$is_production = false;

$api_url = $is_production ? 
  'https://app.midtrans.com/snap/v1/transactions' : 
  'https://app.sandbox.midtrans.com/snap/v1/transactions';


// Check if request doesn't contains `/charge` in the url/path, display 404
if( !strpos($_SERVER['REQUEST_URI'], '/charge') ) {
  http_response_code(404); 
  echo "wrong path, make sure it's `/charge`"; exit();
}
// Check if method is not HTTP POST, display 404
if( $_SERVER['REQUEST_METHOD'] !== 'POST'){
  http_response_code(404);
  echo "Page not found or wrong HTTP request method is used"; exit();
}

// get the HTTP POST body of the request
$request_body = file_get_contents('php://input');
// set response's content type as JSON
header('Content-Type: application/json');
// call charge API using request body passed by mobile SDK
$charge_result = chargeAPI($api_url, $server_key, $request_body);
// set the response http status code
http_response_code($charge_result['http_code']);
// then print out the response body
echo $charge_result['body'];

/**
 * call charge API using Curl
 * @param string  $api_url
 * @param string  $server_key
 * @param string  $request_body
 */
function chargeAPI($api_url, $server_key, $request_body){
  $ch = curl_init();
  $curl_options = array(
    CURLOPT_URL => $api_url,
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_POST => 1,
    CURLOPT_HEADER => 0,
    // Add header to the request, including Authorization generated from server key
    CURLOPT_HTTPHEADER => array(
      'Content-Type: application/json',
      'Accept: application/json',
      'Authorization: Basic ' . base64_encode($server_key . ':')
    ),
    CURLOPT_POSTFIELDS => $request_body
  );
  curl_setopt_array($ch, $curl_options);
  $result = array(
    'body' => curl_exec($ch),
    'http_code' => curl_getinfo($ch, CURLINFO_HTTP_CODE),
  );
  return $result;
}

Sebelum kalian upload ke penyimpanan hosting kalian, lakukan penyesuaian sebagai berikut, pada bagian <server key> ganti dengan Server Key milik anda yang anda dapatkan dari dashboard akun sandbox midtrans kalian. Jika anda akan beralih ke mode Production/Mode Asli anda masukkan Server Key dari akun production midtrans. Selanjutnya lihat pada bagian bawahnya ada kode $is_production = false; itu artinya server masih di setting pada mode Sandbox, dan jika ingin mengaktifkan mode production ubah false menjadi true.

Setelah semua diubah sesuai milik anda, selanjutnya kita upload file charge/index.php ke file penyimpanan di hosting. Jangan lupa sebelum upload file tersebut buat dahulu folder di penyimpanan hosting anda sehingga nantinya akan jadi seperti ini URL nya : https://domain-anda.com/checkout/charge/index.php/. checkout adalah contoh folder yang dibuat untuk menyimpan file : charge/index.php.

Selanjutnya kita coba test URL Server yang sudah kita buat, jika hasilnya seperti gambar di bawah ini maka artinya anda berhasil membuatnya dengan benar.

–Tahapan Pertama Sudah Selesai, Next Akan Membahas Penerapannya Di Sketchware–

Source Code Untuk Android Studio Yang Saya Ambil Dari Hasil Generate Sketchware :

1. Kode untuk layoutnya –> main.xml

main.xml

2. Kode untuk Activity –> MainActivity.java

MainActivity.java

3. Kode manifest.xml yang harus ditambakan

AndroidManifest.xml

Memulai implementasi di Sketchware

Download Library Midtrans Android Untuk Sketchware

Untuk implementasi Midtrans Payment kalian butuh library, dan saya sudah membuatkannya 100% support di Sketchware Revolution terbaru. Di bawah ini kalian bisa klik link yang saya sertakan untuk mengunduh library. Untuk library yang saya berikan ini adalah library untuk implementasi SandBox atau implementasi test. Karena untuk library mode real atau mode live berbeda.

  1. Library Midtrans Core Kit versi : 1.23.2-Sandbox
    Download
  2. Library Midtrans UI Kit versi : 1.23.2-Sandbox
    Download
  3. Library Midtrans Issue Tracker veri : 1.12.0
    Download
  4. Library Zing Barcode Scanner
    Download
  5. Library Bundle Untuk Penunjang Midtrans Project
    Download
Implementasi Proyek Midtrans di Sketchware Revolution

Kita mulai implementasi di Sketchware dengan membuat sebuah proyek, jika sudah membuat jangan lupa RUN build dulu, lalu kalian bisa keluar dari aplikasi Sketchware untuk selanjutnya menambahkan Library yang kalian sudah download.

5 Library yang sudah anda download jangan lupa di extract lalu tempatkan di path : /.sketchware/libs/local_libs/folder_library. Selanjutnya kalian bisa menggunakan aplikasi SWRevo atau aplikasi tools lainnya yang bisa inject library ke Sketchware Revolution.

Selanjutnya kita mulai implementasi Block untuk Midtrans Payment

kalian bisa lihat gambar di atas dimulai dengan ke bagian MoreBlock buatlah moreblock inisialisasi SDK Midtrans dan MoreBlock Class Listener Payment.

Di dalam MoreBlock SDKinit kalian tambahkan block seperti gambar di atas dan jangan lupa masukkan Client Key dan URL Backend Server yang sudah anda buat. Untuk URL Backend wajib di akhiri simbol /.

Class Listener Payment berisi block request payment data dan profile customer data. Untuk profile Customer data bersifat sementara, jadi kalian bisa isi apa aja. Untuk Request payment data wajib berisi detail transaksi yang akan di proses ke pembayaran.

Buat 6 MoreBlock lagi untuk listener Response payment, ada OnStatusSuccess, OnStatusPending, OnStatusFailed, OnCancelTransaction, OnInvalidTransaction & OnUnknowError. Dan di bawah ini adalah contoh isi dari MoreBlock OnStatusSuccess, OnStatusPending & OnStatusFailed.

Kalian selanjutnya ke OnCreate Event Activity cukup tambahkan MoreBlock MidtransSDKinit saja, yang lainnya tidak usah.

Selamat mencoba dan jika kalian masih mengalami kebingungan kalian bisa unduh sample proyek saya di bawah ini.

Contoh Proyek Unduh Melalui SWREVO : Link
Contoh Proyek Import File Dengan Aplikasi MT Sketchware : Link
Unduh Aplikasi MT Sketchware : Link
Untuk Cara Import Dengan MT Sketchware Bisa Kontak Saya Kalo Bingung

Unduh Custom Block Midtrans : Block 1Block 2 (Untuk cara menambahkan block manualnya bisa hubungi saya)

Unduh Aplikasi Manifest Editor By IndoSW : Link

Untuk Video Tutorial Masih Tahap Upload Ke Youtube Karena 33 Menit Size Nya 2 Giga, Sabar Ya…

 

Anda mungkin juga suka...

Artikel Populer

Enable Notifications    Ok No thanks