UI Flow

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. Specify which transaction method that is supported by merchant.
4. Call the startPaymentUiFlow().

Usage

Besides installation step uiflow theme costumization 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")
        .setSemiBoldText("open_sans_semibold.ttf")
        .setBoldText("open_sans_bold.ttf")
        .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">

Starting UI Flow

There are two modes of UI flow.

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

In this flow you must set transaction request information to SDK.

TransactionRequest transactionRequest = new TransactionRequest(TRANSACTION_ID, TRANSACTION_AMOUNT);
midtransSDK.setTransactionRequest(transactionRequest);

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 card payment info
transactionRequest.setCardPaymentInfo(CARD_CLICK_TYPE, IS_SECURE);

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.

To use default UI for Charging Transactions, you can call startPaymentUiFlow using current context.

// start ui flow using activity context
mMidtransSDK.startPaymentUiFlow(context);