Skip to content

UI Flow

Jump to bottom
Farhan Yuda Pahlevi edited this page Nov 7, 2018 · 26 revisions

In this flow SDK provides an UI to take required information from user to execute transaction.

To perform transaction using this, follow the steps given below:

  1. Setup SDK and customize it (optional). Also this includes finished callback.
  2. Set transaction request information to SDK.
  3. Start payment

Usage

Besides installation step uiflow theme customization can be done using MidtransSDK instance

Initialization

To initialize the UI flow SDK, you need to pass the following

  1. CLIENT_KEY: For making tokenization requests to Veritrans (Found in the MAP)
  2. BASE_URL: Base URL of the Merchant server.
SdkUIFlowBuilder.init(this, CLIENT_KEY, BASE_URL, new TransactionFinishedCallback() {
    @Override
   public void onTransactionFinished(TransactionResult result) {
       // Handle finished transaction here.
   }
})
        .setExternalScanner(new ScanCard()) // initialization for using external scancard
        .enableLog(true)
        .setDefaultText("open_sans_regular.ttf") // optional to set custom font
        .setSemiBoldText("open_sans_semibold.ttf") // optional to set custom font
        .setBoldText("open_sans_bold.ttf") // optional to set custom font
        .buildSDK();

Theme Customization

To apply Custom fonts, you can use this code.

MidtransSDK midtransSDK = MidtransSDK.getInstance();
midtransSDK.setDefaultText("open_sans_regular.ttf");
midtransSDK.setSemiBoldText("open_sans_semibold.ttf");
midtransSDK.setBoldText("open_sans_bold.ttf");

Note: open_sans_regular.ttf, open_sans_semibold.ttf, open_sans_bold.ttf is path of the custom font on the assets directory.

Also you can set the color primary in your theme in styles.xml.

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorButtonNormal">@color/colorButton</item>
</style>

Then to ensure this replace library theme, please add these lines into your AndroidManifest.xml application tag.

<application
        ...
        android:theme="AppTheme"
        tools:replace="android:theme">

Set up Transaction Request

Initialize Transaction Request

Before using the SDK to pay, you must set the transaction details into the SDK instance.

Transaction Details (Required)

TRANSACTION_ID and TOTAL_AMOUNT was required to create a transaction request.

TransactionRequest transactionRequest = new TransactionRequest(TRANSACTION_ID, TOTAL_AMOUNT);

Customer Details (Required)

Customer Details was optional when creating transaction request.

CustomerDetails customer = new CustomerDetails(FIRST_NAME, LAST_NAME, EMAIL, PHONE_NUMBER);

transactionRequest.setCustomerDetails(customer);

Note: This was assumed that you have created transactionRequest object using required parameters.

Item Details (Optional)

ItemDetails class holds information about item purchased by user. TransactionRequest takes an array list of item details.

ItemDetails itemDetails1 = new ItemDetails(ITEM_ID_1, ITEM_PRICE_1, ITEM_QUANTITY_1, ITEM_NAME_1);
ItemDetails itemDetails2 = new ItemDetails(ITEM_ID_2, ITEM_PRICE_2, ITEM_QUANTITY_2, ITEM_NAME_2);

// Create array list and add above item details in it and then set it to transaction request.
ArrayList<ItemDetails> itemDetailsList = new ArrayList<>();
itemDetailsList.add(itemDetails1);
itemDetailsList.add(itemdetails2);

// Set item details into the transaction request.
transactionRequest.setItemDetails(itemDetailsList);

Note:

  • This was assumed that you have created transactionRequest object using required parameters.
  • ITEM_NAME maximum character length is 50.

Billing Address (Optional)

BillingAddress class holds information about billing. TransactionRequest takes an array list of billing details.

BillingAddress billingAddress1 = new BillingAddress(FIRST_NAME_1, LAST_NAME_1, ADDRESS_1, CITY_1, POSTAL_CODE_1, PHONE_NUMBER_1, COUNTRY_CODE_1);

BillingAddress billingAddress2 =new BillingAddress(FIRST_NAME_2, LAST_NAME_2, ADDRESS_2, CITY_2, POSTAL_CODE_2, PHONE_NUMBER_2, COUNTRY_CODE_2);

// Create array list and add above billing details in it and then set it to transaction request.
ArrayList<BillingAddress> billingAddressList = new ArrayList<>();
billingAddressList.add(billingAddress1);
billingAddressList.add(billingAddress2);

// Set billing address list into transaction request
transactionRequest.setBillingAddressArrayList(billingAddressList);

Note: This was assumed that you have created transactionRequest object using required parameters.

Shipping Address (Optional)

ShippingAddress class holds information about shipping address. TransactionRequest takes an array list of shipping details.

ShippingAddress shippingAddress1 = new ShippingAddress(FIRST_NAME_1, LAST_NAME_1, ADDRESS_1, CITY_1, POSTAL_CODE_1, PHONE_NUMBER_1, COUNTRY_CODE_1);

ShippingAddress shippingAddress2 =new ShippingAddress(FIRST_NAME_2, LAST_NAME_2, ADDRESS_2, CITY_2, POSTAL_CODE_2, PHONE_NUMBER_2, COUNTRY_CODE_2);

// Create array list and add above shipping details in it and then set it to transaction request.
ArrayList<BillingAddress> shippingAddressList = new ArrayList<>();
shippingAddressList.add(shippingAddress1);
shippingAddressList.add(shippingAddress1);

// Set shipping address list into transaction request.
transactionRequest.setShippingAddressArrayList(shippingAddressList);

Bill Info (Optional)

BillInfoModel class holds information about billing information that will be shown at billing details.

BillInfoModel billInfoModel = new BillInfoModel(BILL_INFO_KEY, BILL_INFO_VALUE);
// Set the bill info on transaction details
transactionRequest.setBillInfoModel(billInfoModel);

Set Transaction Request into SDK Instance

After creating transaction request, you must set it into SDK instance.

MidtransSDK.getInstance().setTransactionRequest(transactionRequest);

Note: transactionRequest is TransactionRequest object created in previous step.

Starting UI Flow

UI Customization (Optional)

Set Save Card Default Checked to True

UIKitCustomSetting uiKitCustomSetting = new UIKitCustomSetting();
uiKitCustomSetting.setSaveCardChecked(true);
MidtransSDK.getInstance().setUIKitCustomSetting(uiKitCustomSetting);

Skip Payment Status

UIKitCustomSetting uiKitCustomSetting = new UIKitCustomSetting();
uiKitCustomSetting.setShowPaymentStatus(false);
MidtransSDK.getInstance().setUIKitCustomSetting(uiKitCustomSetting);

Skip Customer Details Screen (Optional)

This is optional feature if you want to skip customer details screen.

// Set user details
UserDetail userDetail = new UserDetail();
userDetail.setUserFullName(FULL_NAME);
userDetail.setEmail(EMAIL);
userDetail.setPhoneNumber(PHONE_NUMBER);
userDetail.setUserId(USER_ID);

// Initiate address list
ArrayList<UserAddress> userAddresses = new ArrayList<>();

// Initiate and add shipping address
UserAddress shippingUserAddress = new UserAddress();
shippingUserAddress.setAddress(shippingAddress);
shippingUserAddress.setCity(shippingCity);
shippingUserAddress.setCountry(shippingCountry);
shippingUserAddress.setZipcode(shippingZipcode);
shippingUserAddress.setAddressType(Constants.ADDRESS_TYPE_SHIPPING);
userAddresses.add(shippingUserAddress);

// Initiate and add billing address
UserAddress billingUserAddress = new UserAddress();
billingUserAddress.setAddress(billingAddress);
billingUserAddress.setCity(billingCity);
billingUserAddress.setCountry(country);
billingUserAddress.setZipcode(zipcode);
billingUserAddress.setAddressType(Constants.ADDRESS_TYPE_BILLING);
userAddresses.add(billingUserAddress);

// if shipping address is same billing address
// you can user type Constants.ADDRESS_TYPE_BOTH 
// NOTE: if you use this, skip initiate shipping and billing address above
UserAddress userAddress = new UserAddress();
userAddress.setAddress(billingAddress);
userAddress.setCity(billingCity);
userAddress.setCountry(country);
userAddress.setZipcode(zipcode);
userAddress.setAddressType(Constants.ADDRESS_TYPE_BOTH);
userAddresses.add(userAddress);

// Set user address to user detail object
userDetail.setUserAddresses(userAddresses);

// Save the user detail. It will skip the user detail screen
LocalDataHandler.saveObject("user_details", userDetail);

Note:

  • All user details is required to make transactions.
  • Minimum one address is required to make transactions.
  • USER_ID is required to enable save card and one-click/two-clicks.

Payment Mode

If you support credit card payment, you must select one of three card click types.

CreditCard creditCardOptions = new CreditCard();
// Set to true if you want to save card to Snap
creditCardOptions.setSaveCard(true);
// Set to true to save card token as `one click` token
creditCardOptions.setSecure(true);
// Set acquiring bank
creditCardOptions.setBank(BankType.BANK_NAME);
// Set MIGS channel (Required for BCA, MAYBANK, and BRI acquiring bank)
creditCardOptions.setChannel(CreditCard.MIGS);
// Set Credit Card Options
transactionRequest.setCreditCard(creditCardOptions);
// Set card payment info
transactionRequest.setCardPaymentInfo(CARD_CLICK_TYPE, IS_SECURE);
// Set transaction request into SDK instance
MidtransSDK.getInstance().setTransactionRequest(transactionRequest);

Note:

  • CARD_CLICK_TYPE - type of card use these resource strings:

    • R.string.card_click_type_one_click - for one click
    • R.string.card_click_type_two_click - for two click
    • R.string.card_click_type_none - for normal transaction

  • IS_SECURE - set to true if using 3D secure

For more information about transaction request please read this wiki.

Start Payment Method Select Screen

MidtransSDK.getInstance().startPaymentUiFlow(ACTIVITY_CONTEXT);

Direct Payment Method

Users can directly go to payment screen by using these methods.

Credit Card

MidtransSDK.getInstance().startCreditCardUIFlow(ACTIVITY_CONTEXT);

Bank Transfer

General Bank Transfer

MidtransSDK.getInstance().startBankTransferUIFlow(ACTIVITY_CONTEXT);
Permata
MidtransSDK.getInstance().startPermataBankTransferUIFlow(ACTIVITY_CONTEXT);
BCA
MidtransSDK.getInstance().startBCABankTransferUIFlow(ACTIVITY_CONTEXT);
Mandiri
MidtransSDK.getInstance().startMandiriBankTransferUIFlow(ACTIVITY_CONTEXT);
Other Bank
MidtransSDK.getInstance().startOtherBankTransferUIFlow(ACTIVITY_CONTEXT);

KlikBCA

MidtransSDK.getInstance().startKlikBCAUIFlow(ACTIVITY_CONTEXT);

BCA KlikPay

MidtransSDK.getInstance().startBCAKlikPayUIFlow(ACTIVITY_CONTEXT);

Mandiri ClickPay

MidtransSDK.getInstance().startMandiriClickpayUIFlow(ACTIVITY_CONTEXT);

Mandiri E-Cash

MidtransSDK.getInstance().startMandiriECashUIFlow(ACTIVITY_CONTEXT);

CIMB Clicks

MidtransSDK.getInstance().startCIMBClicksUIFlow(ACTIVITY_CONTEXT);

BRI Epay

MidtransSDK.getInstance().startBRIEpayUIFlow(ACTIVITY_CONTEXT);

Telkomsel Cash

MidtransSDK.getInstance().startTelkomselCashUIFlow(ACTIVITY_CONTEXT);

Indosat Dompetku

MidtransSDK.getInstance().startIndosatDompetkuUIFlow(ACTIVITY_CONTEXT);

XL Tunai

MidtransSDK.getInstance().startXlTunaiUIFlow(ACTIVITY_CONTEXT);

Indomaret

MidtransSDK.getInstance().startIndomaretUIFlow(ACTIVITY_CONTEXT);

Kioson

MidtransSDK.getInstance().startKiosonUIFlow(ACTIVITY_CONTEXT);

Gift Card

MidtransSDK.getInstance().startGiftCardUIFlow(ACTIVITY_CONTEXT);

Akulaku

MidtransSDK.getInstance().startAkulakuUIFlow(ACTIVITY_CONTEXT);

About Payment Result

TransactionResult is wrapper for UI flow finished transaction object. It contains:

  • status : either pending, success, failed or invalid based on payment API.
  • transactionResponse: contains payment response from Payment API.
  • transactionCanceled : this will be set to true only if transaction was canceled from inside SDK. For example when selecting payment method users click back.

Here the step:

  • First one to check is transactionCanceled. If this was set to true then you don't have to check other field.
  • You can check based on status: pending will be only use on asynchronous transaction like bank transfer or internet banking. You can use API to get transaction status or wait for notification comes to your backend to ensure the latest status of the transaction. success / failed: For synchronous transaction you can immediately know the status of the transaction. invalid : There are unknown error happened.
  • transactionResponse for detailed transaction response from Payment API.

Veritrans SDK Wiki Guide

Clone this wiki locally