UI Flow

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. Set transaction request information to sdk.
2. Register a Broadcast Receiver to handle payment response.
3. Specify which transaction method that is supported by merchant.
4. Call the startPaymentUiFlow().

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

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.

here in this flow just set transaction request information to sdk and start payment flow using following code-

    if (transactionRequest != null && mVeritransSDK != null) {

        // create transaction request information as shown above.
        //set transaction information to sdk
        mVeritransSDK.setTransactionRequest(transactionRequest);

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

This will start Payment flow if all information is valid.

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

Payment Mode

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