---
page_source: https://juspay.io/in/docs/hyper-checkout/web/resources/webview-sdk
page_title: Webview SDK
---


# WebView SDK for Intent flows



Merchants integrating payment page via Juspay and rendering the same on webviews run into a restriction of not having UPI Intent support. This is because Android’s webview, by default, doesn’t provide intent support and hence we would not be able to either check for intent apps in the user’s device or make an intent switch to the corresponding app. 

To work around this inherent restriction from Android and to have a near-native experience on WebView, we have made a lightweight SDK solution, which adds a JavaScriptInterface to register functionalities to fetch available UPI apps, and make payment with them natively, instead of handling the Intent URI. These functions are then called from the our existing code running in hyper-sdk-web. Listing below the steps to integrate the same


### Step 1.1 Getting the SDK


**Android** 

1. Add the SDK maven repository to the **allprojects**  repository in the root build.gradle file:
2. Add the SDK dependency in your app’s build.gradle:


#### build.gradle Code Snippet:

```build.gradle
implementation 'in.juspay:webview.sdk:1.0.3'

```


**iOS** 

1. Add the SDK dependency in Podfile:
   
   
   #### Pod Code Snippet:
   
   ```pod
   pod 'HyperWebView', '1.0.2'
   
   ```
2. 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>
   
   ```



#### Code Snippets: -

#### Java Code Snippet:

```java
maven {
            url "https://maven.juspay.in/jp-build-packages/hyper-sdk/"
        }
```



### Step 1.2 Integrating the SDK


**Android** 

1. Create an object of `HyperWebViewServices`, which takes activity and webview as parameters when WebView object is created.
2. Call attach method of HyperWebViewServices when URL is loaded in the WebView:
   
   
   #### Java Code Snippet:
   
   ```java
   HyperWebViewServices hyperWebViewServices = new HyperWebViewServices(activity, webView);
   hyperWebViewServices.attach();
   
   ```
3. Pass the activity result to SDK by overriding the onActivityResult method in the activity passed in Step-1:
   
   
   #### Java Code Snippet:
   
   ```java
   @Override
   protected void onActivityResult(int requestCode, int resultCode, Intent data) {
      super.onActivityResult(requestCode, resultCode, data);
      if (requestCode == HyperWebViewServices.UPI_REQUEST_CODE) {
          hyperWebViewServices.onActivityResult(requestCode, resultCode, data);
      }
   }
   
   ```

**iOS** 

Create instance of `HyperWebViewServices` in **didCommit**  callback of WebView, initialise the instance with following arguments and call `attach` method on it.

* `webview` : Reference to your webview
* `isIframeIntegration` : Send true if integrationType is iFrame (Juspay payment page is rendered inside an iFrame) otherwise send false.


#### Shell Code Snippet:

```shell
sample_payload/infoplist.jsonclass WebViewController: UIViewController, WKNavigationDelegate, WKUIDelegate{
    var webView: WKWebView!
    var hyper: HyperWebViewServices?
    ...
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    ...
    
    
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        if (hyper == nil) {
            hyper = HyperWebViewServices(webView: webView, isIframeIntegration: false)
        }
        hyper?.attach()
    }
}

```



Note: Ideally **hyper.attach**  should be called on the page where Juspay’s payment page is loaded.