API Reference
Log In
Android SDK-Custom UI

Android SDK-Custom UI

Instamojo SDK Custom UI Documentation

Table of Contents

Using Custom Created UI

This document assumes that you have finished the basic SDK integration in your application. If you haven't done it yet, please refer to this Documention
####Note: Please contact a qualified security assessor to determine your PCI-DSS incidence and liability if you’re implementing a custom interface that collects cardholder information.

If you choose to create your own UI to collect Payment information, SDK has necessary APIs to achieve this.
Use CustomUIActivity activity, which uses SDK APIs to collect Payment Information, to extend and modify as per your needs.
You can change the name of the activity to anything you like. The best way to do in Android Studio is by refactoring the name of the activity.

Changing the Caller method

Replace startPreCreatedUI method with the following one.

private void startCustomUI(Order order) {
        //Custom UI Implementation
        Intent intent = new Intent(getBaseContext(), CustomUIActivity.class);
        intent.putExtra(Constants.ORDER, order);
        startActivityForResult(intent, Constants.REQUEST_CODE);
}

Fetching order object in the CustomUIActivity

To fetch the passed order object in the CustomUIActivity. Use the following snippet.

final Order order = getIntent().getParcelableExtra(Constants.ORDER);

Collecting Card Details

Validating Card Option

Always validate whether the current order has card payment enabled.

if (order.getCardOptions() == null) {
   //seems like card payment is not enabled. Make the necessary UI Changes.
} else{
   // Card payment is enabled.
}

Creating and validating Card deatils

Once the user has typed in all the card details and ready to proceed, you can create the Card object.

Card card = new Card();
card.setCardNumber(cardNumber.getText().toString());
card.setDate(cardExpiryDate.getText().toString());
card.setCardHolderName(cardHoldersName.getText().toString());
card.setCvv(cvv.getText().toString());

//Validate the card now
if (!card.isCardValid()) {

   if (!card.isCardNameValid()) {
        Log.e("App", "Card Holders Name is invalid");
   }

   if (!card.isCardNumberValid()) {
        Log.e("App", "Card Number is invalid");
   }

   if (!card.isDateValid()) {
        Log.e("App", "Expiry date is invalid");
   }

   if (!card.isCVVValid()) {
        Log.e("App", "CVV is invalid");
   }

   //return so that user can correct card details
   return;
}

Generating Juspay Bundle using Card

Once the card details are validated, You need to generate JusPay Bundle with the card details given

//Good time to show progress dialog while the bundle is generated
Request request = new Request(order, card, new JusPayRequestCallback() {
            @Override
            public void onFinish(final Bundle bundle, final Exception error) {
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        //Dismiss the dialog here if showed.
                        
                        // Make sure the follwoing code is called on UI thread to show Toasts or to 
                        //update UI elements
                        if (error != null) {
                             if (error instanceof Errors.ConnectionError){
                                    Log.e("App", "No internet connection");
                             } else if (error instanceof Errors.ServerError){
                                    Log.e("App", "Server Error. Try again");
                             } else {
                                    Log.e("App", error.getMessage());
                             }
                             return;
                        }
                        
                        // Everything is fine. Pass the bundle to start payment Activity
                        startPaymentActivity(bundle)
                    }
                });
            }
        });
request.execute();

Collecting Netbanking Details

Validating Netbanking Option

Similar to Card Options, Netbanking options might be disabled. Check Netbanking Options for null

if (order.getNetBankingOptions() == null) {
   //seems like the Netbanking option is not enabled. Make the necessary UI Changes.
} else{
   // Netbanking is enabled.
}

Displaying available Banks

The Bank and its code set can be fetched from order itself.

order.getNetBankingOptions().getBanks();

The above code snippet will return a HashMap<String, String> with key = bank name and value = bank code.
Use an android spinner or list view to display the available banks and collect the bank code of the bank user selects.

Generating Juspay Bundle using bank code

Once the bank code is collected, You can generate the Juspay Bundle using the following snippet.

//User selected a Bank. Hence proceed to Juspay
Bundle bundle = new Bundle();
bundle.putString(Constants.URL, order.getNetBankingOptions().getUrl());
bundle.putString(Constants.POST_DATA, order.getNetBankingOptions().getPostData(order.getAuthToken(), bankCode));

//Pass the bundle to start payment activity
startPaymentActivity(bundle)

Collecting EMI Details

Validating EMI Options

Similar to Card Options, EMI options might be disabled. Check EMI Options for null.

if (order.getEmiOptions() == null) {
   //seems like EMI option is not enabled. Make the necessary UI Changes.
} else{
   // EMI is enabled.
}

Displaying available EMI Options

For EMI, the user should be given an option to choose his/her Credit Card Bank.
The list of Banks enabled for EMI can be fetched as ArrayList<EMIBank> using the following code snippet.

order.getEmiOptions().getEmiBanks()

Each EMIBank has following fields

  1. Bank Name
  2. Bank Code
  3. List of rate and tenure

We recommend using a ListView to show the List of EMIBanks available.

Once the user chooses a Bank from the list, you would need to present the user with available tenure options and the interest rate for each tenure.

To fetch the tenure and tenure's interest rate, please use the following code snippet.

selectedEMIBank.getRates()

The result will fetch you LinkedHashMap<Integer, Integer> with key = tenure and value = interest rate.
The map is sorted in ascending order wrt key ie.. tenure.
We recommend you to use a ListView to show the tenure and its interest rate to the user.

Updating Order and Collecting Card Details

Once the user choose a tenure, please set the selected bankCode and tenure in order. 

order.getEmiOptions().setSelectedBankCode(selectedBank.getBankCode());
order.getEmiOptions().setSelectedTenure(<SELECTED_TENURE>);

From this point, the further steps will be same as normal Card payment.
SDK will take the EMI details from the order while generating Bundle for Juspay.

Collecting Wallet details

Validating Wallet Options

Similar to Card Options, Wallet options might be disabled. Check Wallet Options for null.

if (order.getWalletOptions() == null) {
   //seems like Wallet option is not enabled. Make the necessary UI Changes.
} else{
   // Wallet is enabled.
}

Displaying available Wallets

Enabled Wallets can be fetched from the order as a ArrayList<Wallet>.

order.getWalletOptions().getWallets();

Each Wallet object has three fields namely

  1. Wallet Name
  2. Wallet ID
  3. Wallet Image URL

We recommend using a ListView to show the list of Wallets.

Generating Juspay bundle using Wallet ID

Once the user chooses a Wallet to proceed, bundle should be generated with the selected Wallet ID.
Generate the bundle using the follwing code snippet

Bundle bundle = new Bundle();
bundle.putString(Constants.URL, order.getWalletOptions().getUrl());
bundle.putString(Constants.POST_DATA, order.getWalletOptions().getPostData(order.getAuthToken(), <Selected Wallet ID>));

//Pass the bundle to start payment activity
startPaymentActivity(bundle)

Starting the payment activity using the bundle

Add the following method to the activity which will start the payment activity with the Juspay Bundle.

private void startPaymentActivity(Bundle bundle) {
        // Start the payment activity
        //Do not change this unless you know what you are doing
        Intent intent = new Intent(this, PaymentActivity.class);
        intent.putExtras(getIntent());
        intent.putExtra(Constants.PAYMENT_BUNDLE, bundle);
        startActivityForResult(intent, Constants.REQUEST_CODE);
 }

Passing the result back to main activity

Paste the following snippet to pass the result to the main activity.

@Override
protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
        //send back the result to Main activity
        if (requestCode == Constants.REQUEST_CODE) {
            setResult(resultCode);
            setIntent(data);
            finish();
        }
}

Collecting UPI details

Validating UPI options

Similar to Card Options, UPI options might be disabled. Check UPI Options for null.

if (order. getUpiOptions() == null) {
   //seems like UPI option is not enabled. Make the necessary UI Changes.
} else{
   // UPI is enabled.
}

Initiating collect request to user's VPA

Using an EditText, collect the VPA of the user. The collect request will be sent to this VPA.
Once collected, use the below code snippet to initiate the collect request.

Request request = new Request(order, vpa, new UPICallback(){
    @Override
    public void onSubmission(final UPISubmissionResponse upiSubmissionResponse, final Exception e) {
    if (e != null || upiSubmissionResponse.getStatusCode() != Constants.PENDING_PAYMENT) {
        // seems like the request failed. Show appropriate error message
    } else {
        // request successfully sent
        // now start status check here using the following code
        Request request = new Request(order,  upiSubmissionResponse, this);
        request.execute();
    }
    
    @Override
    public void onStatusCheckComplete(Bundle bundle, boolean paymentComplete, Exception e){
     // this will called once you start status check request
    if (e != null || !paymentComplete) {
     // seems like user hasn't authorized the request yet. wait for a sec and check again
     Request request = new Request(order,  upiSubmissionResponse, this);
     request.execute();
    } else{
      // transaction is comlpete
      //return back the status to main activity
      returnResult(bundle, Activity.RESULT_OK);
    }
});
request.execute();

Returning result back to Main Activity

Once the payment is complete, you will have the bundle returned from the latest status check.
Use the bundle to return the result back to main Activity with following code.

private void returnResult(Bundle bundle, int result){
        Intent intent = new Intent();
        if (bundle != null) {
            intent.putExtras(bundle);
        }
        setResult(result, intent);
        finish();
}

Make sure that UPI activity was started with StartActivityForResult.