logo-dp-on-tp

iOS integration#

Setu provides ready to use URLs for iOS 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. This quickstart page provides the sample code for the following specs—

  • Programming language — Swift 5.* (Latest version 5.3)
  • Interface — Storyboard
  • Life Cycle delegation — UI Kit
  • iOS versions supported — 12+ (Latest version 14.4)

Step 1 — Implement web view in your app#

The following steps need to be taken for webview integration—

  1. Get link from the backend
  2. Open a webview and attach the iOS interface

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://cou-whitelabelled-dev.setu.co/cou/categories/5f1fb0db-b2ed-4222-bb2f-53d238df370a"
}

Switch control from your app to Setu#

The link returned by the API should be loaded within WKWebView in a ViewController which implements UIViewController, and WKScriptMessageHandler. The controller must also extend and use a custom WKNavigationDelegate class to intercept and download PDF files.

The userContentController will need to implement two functions—

  • initiate_payment — Used to initiate payment and transfer control from webview to iOS application
  • unload — Used by the parent app to dismiss the webview
// The iOS observer function
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
guard let dict = message.body as? [String : AnyObject]
else { return }
let functionToPerform:String = dict["function"] as? String ?? ""
switch functionToPerform {
case "initiate_payment":
let successLink = dict["data"]?["callback"] as! String
let remarks = dict["data"]?["remarks"] as! String
let billAmount = dict["data"]?["amount"] as! String
let transactionID = dict["data"]?["txnId"] as! String
let beneficiaryVPA = dict["data"]?["beneficiaryVPA"] as! String
let vc = PaymentViewController(
successLink: successLink + successParams,
remarks: remarks,
billAmount: billAmount,
transactionID: transactionID,
beneficiaryVPA: beneficiaryVPA)
let navVC = UINavigationController(rootViewController: vc)
present(navVC, animated: true)
case "unload":
closeView()
default:
break
}
}

The WKWebviewDownloadHelper which downloads our PDF file is used as below

override func viewDidLoad() {
super.viewDidLoad()
let mimeTypes = [MimeType(type: "pdf", fileExtension: "pdf")]
helper = WKWebviewDownloadHelper(webView: webView, mimeTypes:mimeTypes, delegate: self)
...
webView.configuration.userContentController.add(self, name: "ios_observer")
}

WKWebviewDownloadHelper is dependent on the custom WKNavigationDelegate class

extension WebViewController: WKWebViewDownloadHelperDelegate {
func fileDownloadedAtURL(url: URL) {
DispatchQueue.main.async {
let activityVC = UIActivityViewController(activityItems: [url], applicationActivities: nil)
activityVC.popoverPresentationController?.sourceView = self.view
activityVC.popoverPresentationController?.sourceRect = self.view.frame
activityVC.popoverPresentationController?.barButtonItem = self.navigationItem.rightBarButtonItem
self.present(activityVC, animated: true, completion: nil)
}
}
}

Step 2 — Implement and test webhook (optional)#

This step is only required if you want to get real-time payment status and related details after bill payment is done by customer.

Setu provides a webhook that can be configured, for which you need to do the following

  1. Share the webhook URL
  2. Handle the notification

Share the webhook URL#

This step requires setting up and sharing a webhook URL to Setu which is capable of receiving the transaction notifications. The URL to setup this webhook must be shared with Setu via email to billpay.support@setu.co.


Handle the notification#

The notification consists of body an authentication header as well as a body/payload. The authentication header will be sent as X-BILL-WEBHOOK-API-KEY. The value for the same shall be communicated over email.

The following data will be sent as the payload via a POST call on the URL shared to receive the API notification. It will be triggered on completion of a transaction be it either success or failure.

{
"txnId": "ABC000000123",
"mobileNumber": "1234567890",
"status": "PAYMENT_SUCCESS",
"amount": "100.00"
}

The status field will contain one of the following values:

  • PAYMENT_SUCCESS Transaction completed successfully.
  • PAYMENT_FAILURE Transaction failed. Any money if deducted will be refunded.

The amount field will contain one of the following values:

  • A string value of the amount, rounded to two decimal places.
  • Empty value (null) for failed transactions where no amount is received.

All the values in the response payload are strings


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?