---
page_source: https://docs.test.juspay.io/resources-barclays/docs/common-resources/upi-intent-support-on-webview
page_title: UPI Intent Support on WebView
---


# UPI Intent Support on WebView




---



## Overview



For merchants opening the Payment Page in a WebView in Android, UPI Intent does not work out of the box, as any android Intent needs the app containing the WebView to handle the Intent URI (**upi://pay** )

To have a near-native experience on WebView, we have made a lightweight SDK solution, which adds a JavaScriptInterface to your webview and thereby provides functionalities to fetch available UPI apps, and make payment with them natively


## Android




#### Getting the SDK(Android)



Add the SDK maven repository to the allprojects repository in the root build.gradle file:


#### SDK Maven Code Snippet:

```sdk maven
allprojects {
   repositories {
        mavenCentral()
        google()
        maven { 
            url "https: maven.juspay.in/jp-build-packages/hyper-sdk/" 
        } 
    }
}
```


Add the SDK dependency in your app’s build.gradle:


#### SDK Dependency Code Snippet:

```sdk dependency
implementation 'in.juspay:webview.sdk:1.0.3'

```



### Integrating the SDK(Android)



**Step-1** 

Create an object of HyperWebViewServices, which takes activity and webview as parameters:


#### HyperWebViewServices Object Code Snippet:

```hyperwebviewservices object
HyperWebViewServices hyperWebViewServices = new HyperWebViewServices
(activity, webView);
```


**Step-2** 

Call attach method of HyperWebViewServices:


#### Attach Method - HyperWebViewServices Code Snippet:

```attach method - hyperwebviewservices
hyperWebViewServices.attach();
```


**Step-3** 

Pass the activity result to SDK by overriding the onActivityResult method in the activity passed in Step-1:


#### onActivityResult Code Snippet:

```onactivityresult
@Override
protected void onActivityResult(int requestCode, int resultCode, Intentdata) { 
    super.onActivityResult(requestCode, resultCode, data);
    if (requestCode == HyperWebViewServices.UPI_REQUEST_CODE) {
        hyperWebViewServices.onActivityResult(requestCode, resultCode,data); 
    }
}
```



## iOS




### **Getting the SDK (iOS)** 



Add the SDK dependency in Podfile:


#### Podfile Code Snippet:

```podfile
{"success":false,"message":"No Data found for the given path"}
```


Add URI Schemes for required UPI Apps in Info.plist :


#### info.plist Code Snippet:

```info.plist
<key>LSApplicationQueriesSchemes</key>
<array>
	<string>credpay</string>
	<string>phonepe</string>
	<string>paytmmp</string>
	<string>tez</string>
	<string>paytm</string>
	<string>bhim</string>
	<string>myairtel</string>
</array>

```



### **Integrating the SDK(iOS)** 



Create instance of `HyperWebViewServices` in didFinish callback of WebView, initialise the instance with webview as an argument and call `attach` method on it.


#### HyperWebViewServices Code Snippet:

```hyperwebviewservices
class WebViewController: UIViewController, WKNavigationDelegate, WKUIDelegate{
    var webView: WKWebView!
    var hyper: HyperWebViewServices?
    ...
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    ...
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        if (hyper == nil) {
            hyper = HyperWebViewServices(webView: webView)
        }
        hyper?.attach()
    }
}

```


> **Note**
> Ideally **hyper.attach**  should be called only when url loaded matches with Juspay Payment Page URL. Please add a check for URL match if needed.