Integrate WebView for Mobile Apps

Suggest Edits

You can collect payments from your mobile apps by opening the the PayU checkout form in a WebView. This allows you to reuse your PayU Hosted Checkout integration and get started quickly.

Configure WebView for Android
Configure WebView for iOS

WebView integration for Android

Add WebView configurations

To open the PayU checkout page in a WebView, add the following configurations in your Android project to allow JavaScript, DOM, and other features.

webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.setVerticalScrollBarEnabled(true);

Create postData

Build a string with the payment parameters and pass it as postData. For more information on the payment parameters, refer to Collect Payment API - PayU Hosted Checkout.

 
“key=xxxxx&txnid=1686124341291&amount=1.0&firstname=John&productinfo=PayU&[email protected]&phone=7879311111&surl=https://payu.herokuapp.com/success&furl=https://payu.herokuapp.com/failure&hash=8e083ea3ec9c8d50ea9c77e157e95f91701f720c7a67f6b26bafd9c4bfd879b1c38e807285de77807ad9d5281ad56c7bf0faeb2b45a8b2f80f635a242a0fa054”

Note: We recommend that you compute the hash at your server so to prevent cyber attackers from tampering your requests.

Load PayU Checkout form in WebView

 webView.postUrl("URL", postData);

Pass the postData to load the PayU checkout form with the transaction data using postUrl() method.

URL	String. The endpoint of the API. Test URL: https://test.payu.in/_payment Production URL: https://secure.payu.in/_payment
postData	byte. Create the postData and send it in this field. The value of this parameter cannot be null.

Set MyWebViewClient

Set the MyWebViewClient of the WebView object to a new instance of the MyWebViewClient class to manipulate the loading of the URLs in the WebView.

Display alert message (Optional)

Add the following configuration to display an alert message when user clicks on the back button on the browser:

 webView.setWebChromeClient(new WebChromeClient());

WebView integration for iOS

Create postData

Build a string with the payment parameters and pass it as postData. See Collect Payment API to learn more about the payment parameters.

 
“key=xxxxxx&txnid=1686124341291&amount=1.0&firstname=John&productinfo=PayU&[email protected]&phone=7879311111&surl=https://payu.herokuapp.com/success&furl=https://payu.herokuapp.com/failure&hash=8e083ea3ec9c8d50ea9c77e157e95f91701f720c7a67f6b26bafd9c4bfd879b1c38e807285de77807ad9d5281ad56c7bf0faeb2b45a8b2f80f635a242a0fa054”

Note: We recommend that you compute the hash at your server so to prevent cyber attackers from tampering your requests.

Load PayU checkout form in WebView

Make a POST request to PayU endpoint by creating a URLRequest object and set its httpMethod property to “POST”.

Build a postString with the payment parameters and set the httpBody property of the URLRequest object to the postString. Set the javaScriptCanOpenWindowsAutomatically property of the webView object to true to allow the webView object to open new windows automatically. Finally load the URLRequest object in the webView.

var request = URLRequest(url: URL(string: "https://secure.payu.in/_payment") !)
request.httpMethod = "POST"
let postString = "key=Ux7giI&txnid=9sbcsjhsf9637&productinfo=iPhoneXS&amount=1&email=admin%40gmail.com&firstname=John&lastname=&surl=https%3A%2F%2Fpayu.herokuapp.com%2Fios_success&furl=https%3A%2F%2Fpayu.herokuapp.com%2Fios_failure&hash=3547411bc86e1a96bbb9985debc8786b14f43b2a7604f08a82420d2d0336f708dfa54734332c91418400bbfdf6249761567e3281d28589a8c6748ce40e367fb5"
request.httpBody = postString.data(using: .utf8)
webView.configuration.preferences.javaScriptCanOpenWindowsAutomatically = true
webView.load(request)

Display alert message (Optional)

Add the following configuration to display an alert message when user clicks on the back button on the browser:

 func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping(Bool) - > Void) {
     let alertController = UIAlertController(title: nil, message: message, preferredStyle: .alert)
     alertController.addAction(UIAlertAction(title: "OK", style: .default, handler: {
         (action) in completionHandler(true)
     }))
     alertController.addAction(UIAlertAction(title: "Cancel", style: .default, handler: {
         (action) in completionHandler(false)
     }))
     present(alertController, animated: true, completion: nil)
 }

UPI intent for WebView – Android

To support UPI intent for PSP apps:

Step 1: Add WebViewClient class in WebView

Set the WebView’s client to a new instance of the WebViewClient class. Add the following methods of the WebViewClient class or handling interactions with the WebView:
shouldOverrideUrlLoading()_—_method is called when the WebView is about to load a URL. The method is used to override the default behavior and handle the URL request to support UPI intents.
onPageFinished()_—_method is called when the WebView has finished loading a page. The method is used to handle the success and failure scenarios of the request.
onPageStarted()_—_method is called when the WebView starts loading a page. The method can be used to show a loading indicator or perform any other necessary actions before the page starts loading.

private class MyWebViewClient extends WebViewClient { 
 @Override 
 public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) { 
 String url = request.getUrl().toString(); 
 //Generic Intent flow   
 if (url.contains("upi://pay")) { 
 try { 
 Intent intent = new Intent(Intent.ACTION_VIEW); 
 intent.setData(Uri.parse(url)); 
 startActivity(intent); 
 }catch (Exception e){ 
 view.loadUrl(url); 
 } 
 // Handling the Specific Intent flow  
 }else if (url.startsWith("intent://pay")) {
       try {
        Context context = view.getContext();
        Intent intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
         if (intent != null) {
            PackageManager packageManager = context.getPackageManager();
            ResolveInfo info = packageManager.resolveActivity(intent, PackageManager.MATCH_DEFAULT_ONLY);
             if (info != null) {
               context.startActivity(intent);
              } else {
                 String fallbackUrl = intent.getStringExtra("browser_fallback_url");
                  view.loadUrl(fallbackUrl);
               }
          return true;
      }
   } catch (URISyntaxException e) {
         Log.e(TAG, "Can't resolve intent://", e);
     }
 }
 else { 
 view.loadUrl(url); 
 } 
 return true; 
 } 
 
 @Override 
 public void onPageFinished(WebView view, String url) { 
 Log.d(TAG, "onPageFinished: " + url); 
 } 
 
 @Override 
 public void onPageStarted(WebView view, String url, Bitmap favicon) { 
 super.onPageStarted(view, url, favicon); 
 Log.d(TAG, "onPageStarted: " + url); 
 Log.d(TAG, "onPageStarted: " + view.getUrl()); 
 if (url.equals("https://apiplayground-response.herokuapp.com/")) { 

 Log.d(TAG, "success: " + url.toString()); 
 finish(); 
 } else if (url.equals("https://apiplayground-response.herokuapp.com/")) { 

 Log.d(TAG, "failure: " + url.toString()); 
 } 
 } 
 
 @Override 
 public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) { 
 super.onReceivedError(view, request, error); 
 Log.d(TAG, "onPageFinished: " + error.toString()); 
 } 
}

Step 2 Add the PSP apps package Name inside the manifest file

Please add the below line of code from the manifest file, outside of the application tag.

<queries>
    <intent>
       <action android:name="android.intent.action.VIEW" />
       <category android:name="android.intent.category.BROWSABLE" />
         <data
            android:host="pay"
            android:scheme="upi" />
    </intent>
</queries>

UPI intent for WebView – iOS

To support UPI intent in WebView:

Step 1: Add LSApplicationQueriesSchemes

To allow your application to support UPI intent, you must add the PSP applications for which you want to enable UPI intents to the LSApplicationQueriesSchemes in the info.plist file of your project.

<key>LSApplicationQueriesSchemes</key> 
<array> 
<string>phonepe</string> 
<string>gpay</string> 
<string>paytm</string> 
<string>bhim</string> 
</array>

Each string in the array is the name of the PSP apps (in lowercase) for which you want to enable the UPI intent.

Step 2: Handle DeepLinks

Here, the decidePolicyFor method checks if the URL in the naviagtion action is an HTTP or HTTPS schema. If it is not, then the code checks if UIApplication can open the URL.

func webView(_ webView: WKWebView, 

                 decidePolicyFor navigationAction: WKNavigationAction, 

                 decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) { 

  

        // if the request is a non-http(s) schema, then have the UIApplication handle 

        // opening the request 

        print("url.........\(navigationAction.request.url)") 

        if let url = navigationAction.request.url, 

              !url.absoluteString.hasPrefix("http://"), 

              !url.absoluteString.hasPrefix("https://"), 

              UIApplication.shared.canOpenURL(url) { 

  

              // have UIApplication handle the url (sms:, tel:, mailto:, ...) 

              UIApplication.shared.open(url, options: [:], completionHandler: nil) 

  

              // cancel the request (handled by UIApplication) 

              decisionHandler(.cancel) 

          } 

          else { 

              // allow the request 

              decisionHandler(.allow) 

          } 

    }

Updated 2 months ago