iOS 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 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 the link in WKWebView and attach a userContentController
  3. Execute payment flow and redirect back to the WKWebView on success/failure

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 orderID = dict["data"]?["orderId"] as! String
let beneficiaryVPA = dict["data"]?["beneficiaryVPA"] as! String
let vc = PaymentViewController(
successLink: successLink + successParams,
remarks: remarks,
billAmount: billAmount,
orderID: orderID,
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")
}

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

Handle payment flow#

The initiate_payment case in the the userContentController takes the following parameters

  • orderId on the Setu COU System. Example— Z7pFtTgr9LtO
  • amount to be paid by the customer: Example— 3522.20
  • callback which needs to be loaded if the payment is completed. Example—//bills.setu.co/cou/payment-callback/68c7217b-8fa7-4c1f-8e5f-317ff3027668
  • beneficiaryVPA 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

When initiate_payment case 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—this need not be done for UPI transfers in real time
  4. Once payment is executed, load the webview again for callback URL

Note that any ViewController relating to the payment flow, will need to set the property isModalInPresentation as true—to prevent user from scrolling back to the previous screen while the transfer of control is in process.


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?