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. Add event bus subscriber to capture finished transaction response.
4. Specify which transaction method that is supported by merchant.
5. Call the startPaymentUiFlow().

Usage

besides initialization step uiflow theme costumization can be done using VeritransSDK instance

Theme Customization

To apply Custom fonts, 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.

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">

You also can embed your logo into our UI flow.

In your SdkUIFlowBuilder please use setMerchantLogoResourceId to set your logo's resource identifier (You must have your logo at res/drawable directory).

            VeritransSDK veritransSDK = new SdkUIFlowBuilder(this, BuildConfig.CLIENT_KEY, BuildConfig.BASE_URL)
                    .setUIFlow(new UIFlow())// initialization uiflow mode
                    .setExternalScanner(new ScanCard()) // initialization for using external scancard
                    .enableLog(true)
                    .setMerchantLogoResourceId(R.drawable.MERCHANT_LOGO_ID)
                    .buildSDK();

Event Bus Setup

In your calling activity, just implement TransactionFinishedCallback. @Subscribe annotation must be added to implemented methods of TransactionFinishedCallback.

To enable event bus subscription your activity will need to subscribe to VeritransBusProvider. Just add these line in your class.

// Subscribe to VeritransBusProvider
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    VeritransBusProvider.getInstance().register(this);
}

// Unsubscribe to VeritransBusProvider
@Override
protected void onDestroy() {
    super.onDestroy();
    VeritransBusProvider.getInstance().unregister(this);
}

// Implemented methods of TransactionFinishedCallback interface
@Subscribe
@Override
public void onEvent(TransactionFinishedEvent transactionFinishedEvent) {
    // Get the response
    TransactionResponse response = transactionFinishedEvent.getResponse();
}

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(APPLICATION_CONTEXT));

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.getMethodCreditCard(CONTEXT));
supportedPaymentMethods.add(PaymentMethods.getMethodBankTransfer(CONTEXT);
supportedPaymentMethods.add(PaymentMethods.getMethodMandiriBill(CONTEXT);
// 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.

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

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
mVeritransSDK.startPaymentUiFlow(context);

Register Card Mode

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

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