/

to search

#Android integration with your own payment gateway

This quickstart explains how to integrate when you opt for your own payment gateway. Use this guide for Setu’s default UPI payment option.


Setu provides ready to use URLs for the Android integration. Contact Setu to update your logo, colours, fonts as per your branding. You can reach out to billpay.support@setu.co for any further clarifications.


#Step 1 — Implement web view in your app

The following steps need to be taken for Android integration—

  1. Get link from the backend
  2. Open a webview and attach the android interface
  3. Handle payment flow

Get link from the backend

This step gives a one time Setu URL to be used by your customer for the bill fetch or payment flow. The Create link API needs to be called when Android app wants to obtain a one time link to load Setu’s screen flow inside a webview.

None of the parameters aside from mobile number are mandatory, but depending on what is passed the returned link will display different UI.


You can have the following scenarios—

  • If no other input is passed, it will take the user to the home page with all BBPS categories.
  • If category code is passed, it will show user a list of billers in that category.
  • If category code and biller ID is passed, it will show the bill fetch form where a customer can enter their identifers (biller specified parameters)
  • If the category code, biller ID and parameters are passed, it will show the bill directly.

All query parameters should be url-encoded to escape special characters


The above request will return URL based on the input params. Here’s a sample—

{
"link": "https://billpay-qa.setu.co/1238993883748223",
"sessionId": "1238993883748223",
"success": true,
"traceId": "GHSUU99128DBVU"
}

Switch control from your app to Setu

The link returned by the API should be loaded within Android in an activity class with a webview component.

public class DisplayWebView extends AppCompatActivity {
WebView myWebView;
public static final String LINK = "com.example.axispayemulator.LINK";
private class MyWebViewClient extends WebViewClient {
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
if (Uri.parse(url).getHost().contains(".setu.co")) {
return false;
}
// Otherwise, the link is not for a page on my site, so launch another Activity that handles URLs
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
startActivity(intent);
return true;
}
}
@Override
public void onBackPressed(){
if(myWebView.canGoBack()){
myWebView.goBack();
} else {
super.onBackPressed();
}
}
@Override
public boolean onKeyDown(int keyCode, KeyEvent event) {
// Check if the key event was the Back button and if there's history
if ((keyCode == KeyEvent.KEYCODE_BACK) && myWebView.canGoBack()) {
myWebView.goBack();
return true;
}
// If it wasn't the Back key or there's no web page history, bubble up to the default
// system behavior (probably exit the activity)
return super.onKeyDown(keyCode, event);
}
@SuppressLint({"SetJavaScriptEnabled", "AddJavascriptInterface"})
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_display_web_view);
Intent intent = getIntent();
myWebView = findViewById(R.id.pswebview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
MyWebViewClient client = new MyWebViewClient();
myWebView.setWebViewClient(client);
myWebView.setWebChromeClient(new WebChromeClient());
// Please make sure to keep the interface name Android
myWebView.addJavascriptInterface(new WebAppInterface(this), "Android");
String link = intent.getStringExtra(DisplayWebView.LINK);
myWebView.loadUrl(link);
myWebView.setDownloadListener(new DownloadListener() {
public void onDownloadStart(String url, String userAgent,
String contentDisposition, String mimetype,
long contentLength) {
Intent i = new Intent(Intent.ACTION_VIEW);
i.setData(Uri.parse(url));
startActivity(i);
}
});
}
}

Here is a sample of the Java Interface class needed by the webview—

public class WebAppInterface extends AppCompatActivity {
Context mContext;
/** Instantiate the interface and set the context */
WebAppInterface(Context c) {
mContext = c;
}
/** Show a toast from the web page */
@JavascriptInterface
public void initiatePayment(String orderId, String beneVpa, String amount, String callback, String remarks, String mobileNumber, String refId, String customerId, String allowedPaymentModes) {
Intent intent = new Intent(mContext, PaymentScreen.class);
intent.putExtra("BENE_VPA", beneVpa);
intent.putExtra("ORDER_ID", orderId);
intent.putExtra("AMOUNT", amount);
intent.putExtra("CALLBACK_URL", success_url);
intent.putExtra("REMARKS", remarks);
intent.putExtra("MOBILE_NUMBER", remarks);
intent.putExtra("REF_ID", refId);
intent.putExtra("CUSTOMER_ID", customerId);
intent.putExtra("ALLOWED_PAYMENT_MODES", allowedPaymentModes)
mContext.startActivity(intent);
}
/** Show a toast from the web page */
@JavascriptInterface
public void unload() {
Intent intent = new Intent(mContext, MainActivity.class);
mContext.startActivity(intent);
}
}

The interface will contain 2 methods—

  • unload This should be used by your app to dismiss the webview
  • initiatePayment This should be used by the parent app to initiate the payment

Special use case: This unload function can also be used for dismissing the webview and redirecting a user back to your native app once a bill payment journey is completed (i.e. payment is successful) via a CTA from the Setu webview. Please let our team know if you would like to enable this use case for your app.


Handle payment flow

initiatePayment on the Android interface takes the following parameters

  • orderId on the Setu COU System. Example— COUWLZ7pFtTgr9LtO
  • amount to be paid by the customer: Example— 3522.20
  • callback which needs to be loaded if the payment is completed. Example—https://billpay.setu.co/cou/payment-callback/68c7217b-8fa7-4c1f-8e5f-317ff3027668
  • beneVpa to which amount is to be transferred—this is relevant only if you can transfer in real time using UPI rails.
  • remarks used to communicate information between mobile app and webview
  • mobileNumber mobile number used for the session. Example - 9876543210
  • refId BBPS reference ID linked to a particular bill (only available for fetch billers). Example - CMA0I65RCU2I32C3L0H0KNYQYAG40021831
  • customerId linked to a particular session. Example - cust@1234
  • allowedPaymentModes comma separated list of modes allowed for this payment. One of these should be sent in the paymentMode in the payment confirmation webhook.

When initiatePayment is called by the webview, your app needs to do the following—

  1. Remove the webview
  2. Initiate the payment flow
  3. Send Setu the webhook event for payment. Documented here. This need not be done for UPI transfers in real time.
  4. Once payment is executed, load the webview again for callback URL

#Step 2 — Optionally configure webhook

You may optionally want to listen to user events—like successful or failed bill fetch, bill payment status and more—through webhooks. Refer to this guide for more information.


#Step 3 — Get Production credentials and go live

Once you are done testing your integration, ensure that all KYC and legal agreements are submitted. Contact Setu for getting enabled on production.


Was this page helpful?