Checkout in a Mobile WebView

Why use a WebView?

There are several compelling reasons to consider utilizing the hosted checkout in a WebView rather than integrating directly with the mobile SDK. It is important to note that regardless of the chosen method, the payments are still processed by the same underlying APIs. The distinction lies in the payment experience that you provide to your customers. Here are some advantages of using a WebView:

  1. By utilizing our hosted checkout, Lahza takes complete control of the payment experience. This relieves you from the burden of building a checkout UI within your mobile application, significantly reducing the amount of code required for seamless payment integration.

  2. While the mobile SDK only supports card payments, the checkout offers a broader range of non-card payment options. This includes USSD, QR, EasyLife, and Pay-with-Bank, providing a wider array of payment choices for your customers.

Generating the checkout URL

To begin the integration process, the first step is to initialize the transaction, which will generate a checkout URL for further processing.

-H "Authorization: Bearer YOUR_SECRET_KEY"
-H "Content-Type: application/json"
-d '{ "email": "", "amount": "10000" }'

Displaying Checkout in Your WebView

Once the API call is successful, Lahza will provide an authorization URL in the response. You should then retrieve this URL and pass it back to your frontend application. Load the obtained URL in the WebView widget to display the payment interface. Refer to the sample code below for an example implementation:

Allow Redirect

Enable redirects in the WebView widget to ensure smooth bank and 3DS authorization. Blocking redirects may prevent customers from completing transactions.

Widget build(BuildContext context) {
  return Scaffold(
    body: WebView(
    initialUrl: '',
    javascriptMode: JavascriptMode.unrestricted,
    userAgent: 'Flutter;Webview',
    navigationDelegate: (navigation){
      if(navigation.url == ''){
        Navigator.of(context).pop(); //close webview
      if(navigation.url == ""){
         Navigator.of(context).pop(); //close webview 
      return NavigationDecision.navigate;

Keep in mind

  • When using the WebView, listen for URL redirects to handle customer actions during the payment process.

  • Successful payments in the WebView are redirected to the callback URL specified in your Lahza dashboard, but you can override it with a custom callback URL.

  • If you have webhooks set up, Lahza will send a charge.success event to your webhook URL. Utilize this event in your backend to deliver value to the customer.

  • In the frontend, after the WebView redirects to the callback URL, make a call to the Verify Transaction API to confirm the payment status.

  • For card transactions with 3DS authentication, the page doesn't close automatically in the WebView as it does in a web browser.

  • Implement a workaround by having the WebView listen for the redirection to a specific URL (e.g.,

  • Once the WebView detects this URL, continue processing as usual by checking the callback function and any other necessary processes.

By following these steps, you can ensure proper handling of customer actions, confirmation of payment status, and handling of card transactions with 3DS authentication in the WebView.

Last updated