Integrate WebView for Mobile Apps
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.
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();
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);
}
} 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());
}
}
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 5 months ago