About Webview for Mobile Apps
Reuse web integration code to accept payments via WebView on your Android and iOS mobile apps.
If you want to accept payments on your Android or iOS apps without integrating with our native SDKs, reuse your Standard Integration code. This opens the checkout form in a WebView on your mobile app. Pass the callback_url parameter along with other checkout options to process payments.
var options = {... // existing optionscallback_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
.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
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 Curlec 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.
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.
webView.addJavascriptInterface("PaymentInterface", new PaymentInterface());
class PaymentInterface{@JavascriptInterfacepublic void success(String data){}@JavascriptInterfacepublic void error(String data){}}
The JavaScript code loaded into WebView calls the native methods of PaymentInterface class, PaymentInterface.success() and PaymentInterface.error().
Add the following code to your WebView to enable cookies.
if (android.os.Build.VERSION.SDK_INT >= 21) {CookieManager.getInstance().setAcceptThirdPartyCookies(mWebView, true);} else {CookieManager.getInstance().setAcceptCookie(true);}
Handy Tips
Use setAcceptThirdPartyCookies
for API level 21 and above.
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).
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?