Creating a WebView in a Mobile App

Handle callback URLs in the native iOS mobile environment.


When integrating with Standard Checkout, you can also pass a callback_url for redirection-based flow. If popup creation fails for some reason, the browser is redirected to an external page (bank/3D secure page) for customers to fill in OTP/PIN. At the end of the payment, the control is returned to the callback_url previously created by you on which the payment results will be submitted.

If you reuse your web integration of Razorpay Checkout inside a web view on iOS, the Checkout Form may not open.

However, in certain scenarios, you might want to reuse web integration in a mobile app. You can do so by passing the callback_url along with other checkout options to process the desired payment.

Razorpay Checkout screen showing various Cards, UPI and more payment methods like Wallet, EMI, Pay Later and Instant Bank Transfer for amount payable ₹6000.

var options = {
... // existing options
callback_url: 'https://your-server/callback_url',
redirect: true
}

The script that the callback_url points to should handle incoming POST requests. The callback URL will have razorpay_payment_id for all successful payments.

If your server is integrated with Orders API,razorpay_order_id and razorpay_signature are returned in the Request body. To learn about Orders API, refer to our

.

Handy Tips

You can set query parameters with callback_url to map it with entities at your end. An example of a valid callback URL: https://your-site.com/callback?cart_id=12345.

ParameterPresent?Example
errorAlways present
error [code]Always presentBAD_REQUEST_ERROR
error [description]Always presentPayment failed due to incorrect card number
error [field]Present if the payment fails due to basic validation errorcard [number]

If you are loading the Checkout Form directly to the WebView on your native mobile app without using Razorpay iOS SDK, you must provide a callback_url in Razorpay Checkout parameters. After the successful payment, users are redirected to the specified URL.

You can enable the handover control from the page loaded at callback_url to your native app code.

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

Adding the JavascriptInterface to the webView

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

The JavaScript code loaded into the webView will be able to call native methods of PaymentInterface class by calling PaymentInterface.success() and PaymentInterface.error().

WKWebView framework acts as a bridge between the JavaScript and the native code. UIWebView does not provide this functionality.

The bridge is implemented by passing an instance of WKScriptMessageHandler and a string (which is the name of the bridge).

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.

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.

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

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.


Is this integration guide useful?