Integrasi Snap-Api Midtrans menggunakan Android SDK (Implementasi Veritrans & UIKit) — Midtrans-Snap #ep3

Artikel ini harunsya publish hari minggu, namun karena penulis banyak kerjaan dan weekend malah kelayapan, alhasil jadi kelupaan hehe.

Langsung saja, artikel ini masih berhubungan dengan Snap-Api dengan lumen bisa cek disini. Tutorial sebelumnya juga udah membahas tentang bagaimana implementasiinnya, yaitu menggunakan fw laravel buat platform web. Nah kali ini buat platform androidnya, seperti biasa kita adopsi dari repo yang sudah ada, namun di kembangkan dan dikulik sesuai kebutuhan kita hehe. Reponya bisa cek disini , tentang uikitnya disini dan sample app bisa download di playstore (key: Midtrans Demo Store)

Oke kita mulai, buka dulu aja android studio kalian

• Buat pake empty activity (terserah sih)
• masuk ke gradle project , dibawah jcenter() masukan kode dibawah :

maven { url "http://dl.bintray.com/pt-midtrans/maven" }
maven { url "https://jitpack.io" }

• masuk ke gradle module
• Di dalam statement android, masukan kode dibawah :

productFlavors {
    sandbox {
        buildConfigField "String", "BASE_URL", "\"BASE_URL\""
        buildConfigField "String", "CLIENT_KEY", "\"CLIENT_KEY\""
    }
}

• Base Url = URL API yang udah pernah kita bahas, harus sudah di deploy ke server ya, karna tidak bisa jika lewat localhost. Solusi nya menggunakan herokuapp
• Lalu update dependencies nya dengan menambahkan :

implementation 'com.midtrans:uikit:1.21.2-SANDBOX'
sandboxImplementation 'com.midtrans:uikit:1.21.2-SANDBOX'

• Oke lanjut, kita buka AndroidManifestnya
• Di dalam tag application tambahakn kode dibawah ini

android:supportsRtl="true"
tools:replace="android:allowBackup"

• Jangan lupa di sync now dulu, jika tidak ada masalah lanjut ke MainActivity

Btw disini ana langsung pake 1 class aja yah karena ini hanya sebagai contoh, untuk best practicenya memang harus dipisahkan sebagai contoh DataCustomer dengan Pemanggilan SDK nya.

• Ok, masuk ke res->layout nya main_activity
• Tambahkan Button , kurang lebih seperti dibawah ini

• Lanjut ke MainActivity classnya
• Buat dulu method clickPay() dan buat EventListener button clickPay nya

• Buat method makePayment()
• Lalu di dalam statement makePayment() kita masukan kode dibawah ini :

private void makePayment(){
    SdkUIFlowBuilder.init()
            .setContext(this)
            .setMerchantBaseUrl(BuildConfig.BASE_URL)
            .setClientKey(BuildConfig.CLIENT_KEY)
            .setTransactionFinishedCallback(this)
            .enableLog(true)
            .setColorTheme(new CustomColorTheme("#777777","#f77474" , "#3f0d0d"))
            .buildSDK();
}

• Lalu di dalam statement clickPay() kita masukan kode dibawah ini :

private void clickPay(){        MidtransSDK.getInstance().setTransactionRequest(transactionRequest("101",2000, 1, "John"));       MidtransSDK.getInstance().startPaymentUiFlow(MainActivity.this );
}

ORDER_ID = Id pemesanan, sesuai keiingin kalian (string)

HARGA = Harga barang (int)

QTY = Quantity barang (int)

NAMA_BARANG = Nama Barangnya (string)

• Penjelasan sedikit, jadi yang function atau method yang menjalankan UI Sdk Midtransnya itu di .startPaymentUiFlow()
• Lanjut, buatkan method static CustomerDetails :

public static CustomerDetails customerDetails(){
    CustomerDetails cd = new CustomerDetails();
    cd.setName("NAMAMU");
    cd.setEmail("email@gmail.com");
    cd.setPhone("Nope");
    return cd;
}

• Lalu buatkan methode static TransactionRequest :

public static TransactionRequest transactionRequest(String id, int price, int qty, String name){
        TransactionRequest request =  new TransactionRequest(System.currentTimeMillis() + " " , 2000 );
//        request.setCustomerDetails(customerDetails());
        ItemDetails details = new ItemDetails(id, price, qty, name);

        ArrayList<ItemDetails> itemDetails = new ArrayList<>();
        itemDetails.add(details);
        request.setItemDetails(itemDetails);
        CreditCard creditCard = new CreditCard();
        creditCard.setSaveCard(false);
        creditCard.setAuthentication(CreditCard.AUTHENTICATION_TYPE_RBA);

        request.setCreditCard(creditCard);
        return request;
    }

• Oiya hampir lupa , di class MainActivity beri implements TransactionFinishedCallback

• Terdapat garis merah, tekan alt + enter -> implements method
• Lalu muncul menu popup dan pilih onTransactionFinishedCallback

• Oke sehingga code akhir pada onTransactionFinishedCallback seperti dibawah ini :

public void onTransactionFinished(TransactionResult result) {
    if(result.getResponse() != null){
        switch (result.getStatus()){
            case TransactionResult.STATUS_SUCCESS:
                Toast.makeText(this, "Transaction Sukses " + result.getResponse().getTransactionId(), Toast.LENGTH_LONG).show();
                break;
            case TransactionResult.STATUS_PENDING:
                Toast.makeText(this, "Transaction Pending " + result.getResponse().getTransactionId(), Toast.LENGTH_LONG).show();
                break;
            case TransactionResult.STATUS_FAILED:
                Toast.makeText(this, "Transaction Failed" + result.getResponse().getTransactionId(), Toast.LENGTH_LONG).show();
                break;
        }
        result.getResponse().getValidationMessages();
    }else if(result.isTransactionCanceled()){
        Toast.makeText(this, "Transaction Failed", Toast.LENGTH_LONG).show();
    }else{
        if(result.getStatus().equalsIgnoreCase((TransactionResult.STATUS_INVALID))){
            Toast.makeText(this, "Transaction Invalid" + result.getResponse().getTransactionId(), Toast.LENGTH_LONG).show();
        }else{
            Toast.makeText(this, "Something Wrong", Toast.LENGTH_LONG).show();
        }
    }
}

• Sedikit pembahasan, STATUS_SUCCESS ialah jika pembayaran sukses dilakukan, STATUS_PENDING ialah jika pengguna telah berhasil memilih methode pembayaran namun belum menyelesaikan pembayaran (status ini yang akan pertama kalian dapat), STATUS_FAILED ialah jika kalian tidak jadi memilih methode pembayaran atau meninggalkan halaman pembayaran sebelum memilih methode pembayaran
• Oke sampai sini kita sudah beres, namun kita flashback sedikit ke api-lumen yang episode 1 kita bahas .
• buat bagian route -> web.php , lakukan perubahan seperti pada gambar

• Apa yang beda ? kita rubah method yang kemarin awalnya GET jadi POST. Lalu kita tambahkan 1 url dengan path tambahan yaitu /charge. Alasannya ? Begini, kalo kalian udah baca lengkap dokumentasi api-midtrans, istilah membuat pembayaran itu disebut dengan “charge request” dan url pathnya default nya /charge. Seperti endpoint dibawah ini

https://api.sandbox.midtrans.com/v2/charge

• Sehingga uikit ini membaca response json yang isinya object token

• Itu melalui /charge . Paham ya sekarang
• Oke jika sudah maka jalankan saja , dan click button pay nya. Sehingga akan muncul seperti dibawah ini :

Semoga bermanfaat guys. Jika ada error atau yang ingin ditanyakan, silahkan tanyakan saja melalui socmed yang ada :D

Jika kalian suka, mohon di clap ya :D

Midtrans-Snap Series

1. Snap Api Lumen : https://bit.ly/2TXlfGc
2. Interface Snap-Midtrans : https://bit.ly/37uUwVx
3. Sdk Android Veritrans : https://bit.ly/2ujQ2CZ
4. Handle Web Push Notification : https://bit.ly/3a1DBLa
5. Endpoint Snap-Api (ex: Approve Transaction, Refund, etc) : Soon
6. Customize request : Soon

full project : https://github.com/zharletc/example-midtrans-snap

veritrans android sdk : https://github.com/veritrans/veritrans-android/releases

mobile sdk doc installation : http://mobile-docs.midtrans.com/#installation

sample UIKit : https://github.com/ziahaqi/sample-uikit

—

My Social Media :

facebook : zharlet30 , linkedin : https://www.linkedin.com/in/azhar-ogi-2bb408112/ , gitlab : @zharlet , line : zharlet .