> ## Documentation Index
> Fetch the complete documentation index at: https://razorpay-881012b3.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Integration Steps

> Steps to integrate with Razorpay WebView for Mobile Apps.

<div style={{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"0.35rem 0.9rem",border:"1px solid rgba(128,128,128,0.28)",borderRadius:"0.5rem",padding:"0.45rem 0.75rem",margin:"0 0 1.25rem",fontSize:"0.875rem"}}>
  <span style={{fontWeight:600}}>Available in</span>
  <span>🇮🇳 India</span>
</div>

## Create a WebView on Mobile App

#### Code Sample

```javascript JavaScript theme={null}
var options = {
  ... // existing options
  callback_url: 'https://your-server/callback_url',
  redirect: true
}
```

The script that `callback_url` points to should to handle incoming `POST` requests.

For a successful payment, the callback URL will have **razorpay\_payment\_id**. In addition, **razorpay\_order\_id** and **razorpay\_signature** will be returned in the request body, provided your server-side has been integrated with Orders API. Know more about [Orders API](/docs/api/orders).

<Info>
  **Handy Tips**

  You can set query parameters with `callback_url` to map it with entities at your end. For example, following is a valid callback URL: `https://your-site.com/callback?cart_id=12345`
</Info>

#### Failed Payment

| Parameter             | Present?                                               | Example                                     |
| --------------------- | ------------------------------------------------------ | ------------------------------------------- |
| `error`               | `Array` Always present                                 |                                             |
| `error [code]`        | Always present                                         | BAD\_REQUEST\_ERROR                         |
| `error [description]` | Always present                                         | Payment failed due to incorrect card number |
| `error [field]`       | Present if payment fails due to basic validation error | card \[number]                              |

## Hand Over Payment Result to Native App

If you are loading the checkout form to WebView on your native mobile app without using the Razorpay SDK, provide a `callback_url` in the Razorpay Checkout parameters. After a successful payment, a redirect is made to the specified URL. You can enable the handover control from the page loaded at **callback\_url** to your native app code.

## Payment Callbacks to Android Native Code

The webpage will be loaded into a WebView class. To communicate anything from the webpage loaded into WebView to native code, you would need to add a JavaScriptInterface to the WebView.

#### Add JavascriptInterface to WebView

```java theme={null}
webView.addJavascriptInterface("PaymentInterface", new PaymentInterface());
```

```java theme={null}
class PaymentInterface{
  @JavascriptInterface
  public void success(String data){
  }

  @JavascriptInterface
  public void error(String data){
  }
}
```

The JavaScript code loaded into WebView calls the native methods of **PaymentInterface** class, **PaymentInterface.success()** and **PaymentInterface.error()**.

## Enable Cookies

You should enable cookies on your app to access features such as **saved cards**. Know more about [saved cards](/docs/payments/dashboard/account-settings/checkout-features#flash-checkout).

## Code to Enable Cookies

Add the following code to your WebView to enable cookies.

```java Enable Cookies theme={null}
if (android.os.Build.VERSION.SDK_INT >= 21) {   
     CookieManager.getInstance().setAcceptThirdPartyCookies(mWebView, true);
} else {
     CookieManager.getInstance().setAcceptCookie(true);
}
```

<Info>
  **Handy Tips**

  Use `setAcceptThirdPartyCookies` for API level 21 and above.
</Info>

## Payment Callbacks to iOS Native Code

**WKWebView** framework is used to implement a bridge between JavaScript and the native code as **UIWebView** does not provide this functionality. The bridge is added by passing an instance of **WKScriptMessageHandler** and a string (which is the name of the bridge).

```swift swift theme={null}
webView.configuration.userContentController.add(self, name: "PaymentJSBridge")
```

The instance of WKScriptMessageHandler which is passed needs to implement a function userContentController(WKUserContentController, WKScriptMessage). Once the function is implemented, the data is sent by JavaScript and can be retrieved inside the function.

```swift swift theme={null}
public func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
  if let messageBody = message.body as? [AnyHashable:Any]{

  }
}
```

At the JavaScript end, data is sent to the iOS native code by evaluating the following JavaScript.

```javascript JavaScript theme={null}
window.webkit.messageHandlers.PaymentJSBridge.postMessage(messageBody)
```

<Note>
  **Handy Tips**

  Only the function `userContentController` can be called from the JavaScript by evaluating the above-mentioned script. The `messageBody` passed by the script must contain the appropriate data to control the flow of the native code.
</Note>