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.

When a customer clicks the payment action button, you can initialize a transaction by sending a POST request from your server to our API. Include the required parameters such as email, amount, and any other relevant optional parameters when calling the Initialize Transaction API endpoint.

Request

curl https://api.lahza.io/transaction/initialize
-H "Authorization: Bearer YOUR_SECRET_KEY"
-H "Content-Type: application/json"
-d '{ "email": "[e-mail]", "amount": "10000" }'
-X POST

Response

{
  "status": true,
  "message": "Authorization URL created",
  "data": {
    "authorization_url": "https://checkout.lahza.io/keigjNjru82",
    "access_code": "jsj823JUD",
    "reference": "dj28ejU"
  }
}

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.

Flutter

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: WebView(
    initialUrl: 'https://checkout.lahza.io/akeiIjNbv23',
    javascriptMode: JavascriptMode.unrestricted,
    userAgent: 'Flutter;Webview',
    navigationDelegate: (navigation){
      if(navigation.url == 'https://api.lahza.io/close'){
        Navigator.of(context).pop(); //close webview
      }
      if(navigation.url == "https://example.ps/callback"){
         Navigator.of(context).pop(); //close webview 
      }
      return NavigationDecision.navigate;
    },
  ),
  );
}

React Native

import React from 'react';
import { WebView } from 'react-native-webview';


export default function App() {

  const authorization_url = 'https://checkout.lahza.io/kjIjs82H';
  const callback_url = 'https://yourcallback.com';

  onNavigationStateChange = state => {
 
    const { url } = state;

    if (!url) return;

    if (url === callback_url) {
// get transaction reference from url and verify transaction, then redirect
      const redirectTo = 'window.location = "' + callback_url + '"';
      this.webview.injectJavaScript(redirectTo);
    }
		
  if(url === 'https://api.lahza.io/close') {
      // handle webview removal
      // You can either unmount the component, or
      // Use a navigator to pop off the view
    }
  };

  return (
    <WebView 
      source={{ uri: authorization_url }}
      style={{ marginTop: 40 }}
      onNavigationStateChange={ this.onNavigationStateChange }
    />
  );
}

Kotlin

class MainActivity : AppCompatActivity() {

    private val authorizationUrl: String
        get() = "https://checkout.lahza.io/jdh2723JJS"
    private val callbackUrl: String
        get() = "https://yourcallback.com"

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
    }

    @SuppressLint("SetJavaScriptEnabled")
    private fun loadCheckout() {
        val webView: WebView = findViewById(R.id.webview)
        webView.settings.apply {
            javaScriptEnabled = true
            javaScriptCanOpenWindowsAutomatically = true
            domStorageEnabled = true
        }

        webView.webViewClient = object:  WebViewClient() {
            override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
                val url: Uri? = request?.url

                if (url?.host == callbackUrl) {
                    return true
                } else if (url.toString() == "https://api.lahza.io/close") {
                    finish()
                    return false
                }
                
                return super.shouldOverrideUrlLoading(view, request)
            }
        }

        webView.loadUrl(authorizationUrl)
    }
}

Swift

import WebKit

class CheckoutViewController: UIViewController, WKNavigationDelegate {
  
	..........
	
  // This is a WKNavigationDelegate func we can use to handle redirection
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, 
        decisionHandler: @escaping ((WKNavigationActionPolicy) -> Void)  {

    if let url = navigationAction.request.url {
       
    /*
        We can check here if the 3DS flow is done by checking
        the redirected URl is the one for 3DS after completition
    */
      if url.absoluteString == "https://api.lahza.io/close"{
        decisionHandler(.cancel)
      }
      else{
        decisionHandler(.allow)
      }
    }
  }
}

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., https://api.lahza.io/close).

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