API ReferenceIntegrationsKnowledge Base

Standard Web Integration - Webview for Mobile Apps

If you intend to accept payments on your Android or iOS apps and do not want to integrate with our native SDKs, you can reuse your Razorpay Checkout web integration code. This opens the Checkout in a webview on your mobile app.

To do this, pass the callback_url parameter along with other checkout options to process the desired payment.

Webview in Mobile App

Handy Tips
When you use webview, several features such as UPI Intent are not supported. We recommend integrating with our native Android and iOS SDKs instead.

Create a WebView in the Mobile App🔗

Copyvar 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. For more details, refer the Orders API document.

Note:
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

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 the Payment Result to Native App🔗

If you are loading the checkout form directly to WebView on your native mobile app without using our Razorpay SDK, you must provide a callback_url in the Razorpay Checkout parameters. After the 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 the 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.

Example🔗

Adding JavascriptInterface to webView

CopywebView.addJavascriptInterface("PaymentInterface", new PaymentInterface());
Copyclass PaymentInterface{ @JavascriptInterface public void success(String data){ } @JavascriptInterface public void error(String data){ } }

Now the JavaScript code loaded into webView will be able to call native methods of PaymentInterface class by calling 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.

Add the following code to your webview to enable cookies.

Copyif (android.os.Build.VERSION.SDK_INT >= 21) { CookieManager.getInstance().setAcceptThirdPartyCookies(mWebView, true); } else { CookieManager.getInstance().setAcceptCookie(true); }

Handy Tip
setAcceptThirdPartyCookies should be used for API level 21 and above.

Payment Callbacks to iOS Native Code🔗

WKWebView framework is used to implement a bridge between the 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).

CopywebView.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.

Copypublic 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.

Copywindow.webkit.messageHandlers.PaymentJSBridge.postMessage(messageBody)

Note:
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.

×