UI Flow

Overview

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).
2. Set transaction request information to SDK.
3. Specify which transaction method that is supported by merchant.
4. Call the startPaymentUiFlow().

Usage

After setup the SDK there are several customization that is optional for the user.

Theme Customization

To set the color theme by using this code.

VeritransBuilder builder = new VeritransBuilder...
builder.setColorTheme("#COLORHEX);

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>

</style>

To apply a Custom font, you can use this code.

VeritransSDK veritransSDK = VeritransSDK.getVeritransSDK();
veritransSDK.setDefaultText("open_sans_regular.ttf");
veritransSDK.setSemiBoldText("open_sans_semibold.ttf");
veritransSDK.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.

Selecting Payment types

To support all payment methods, just call this:

// Do it after initialize the SDK
VeritransSDK veritransSDK = VeritransSDK.getVeritransSDK();
veritransSDK.setSelectedPaymentMethods(PaymentMethods.getAllPaymentMethods(this));

Or customize supported payment methods by adding the static variable in PaymentMethods class into a list.

// Customize the list
List<PaymentMethodsModel> supportedPaymentMethods = new ArrayList<>();
supportedPaymentMethods.add(PaymentMethods.CREDIT_CARD);
supportedPaymentMethods.add(PaymentMethods.BANK_TRANSFER);
supportedPaymentMethods.add(PaymentMethods.MANDIRI_BILL_PAYMENT);
// Set supported payment methods
VeritransSDK veritransSDK = VeritransSDK.getVeritransSDK();
veritransSDK.setSelectedPaymentMethods(supportedPaymentMethods);

Note don't call any payment specific method in this flow, Sdk provides an UI to user with all available methods.

Adding external card scanner (Using Card.io library)

We provide a plugin to integrate card.io for allowing customers to read the credit card/debit card information using the mobile phone camera.

You can add external card scanner using ScanCardLibrary implementation by following these steps.

Setup ScanCardLibrary in build.gradle.

Add this code block into your build.gradle.

compile 'id.co.veritrans:scancard:0.10.2'

Add ExternalScanner into your SDK initialization.

Add this code block into your build.gradle.

VeritransBuilder builder = new VeritransBuilder...
builder.setExternalScanner(new ScanCard());
...

Note: The external scanner button will only be shown on Credit Card form if you set the external scanner. It is also only available in the UI flow mode.

Starting UI Flow

There are two modes of UI flow.

Payment Mode

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

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

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

transactionRequest.setCardPaymentInfo(CARD_CLICK_TYPE, IS_SECURE);

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

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

// start ui flow using activity instance
mVeritransSDK.startPaymentUiFlow(activity);

Register Card Mode

To use default UI of Registering Card, you can call startRegisterCardUIFlow using current activity instance.

// start ui flow using activity instance
mVeritransSDK.startRegisterCardUIFlow(activity);