Webview configuration

This page describes the required WebView configuration for integrating Sodexo web components.

WebView Settings

The following settings must be enabled on your WebView for the web components to work correctly.

Android

webView.settings.apply {
    javaScriptEnabled = true
    domStorageEnabled = true  // Required for local storage
    allowFileAccess = true
    allowContentAccess = true
}

iOS

let configuration = WKWebViewConfiguration()
configuration.preferences.javaScriptEnabled = true
// Local storage (DOM storage) is enabled by default on WKWebView

let webView = WKWebView(frame: .zero, configuration: configuration)

Checkout Process

During a credit card payment (badge reload or order payment), the web components will redirect to a payment gateway. After the payment is completed, the gateway will redirect back to a configured URL.

Important

Your application must:

1. Allow redirections to the payment gateway
2. Listen for the callback URL to navigate back to the appropriate web component

Examples

Android

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

        if (url.startsWith("https://webcomponents.sodexo.demo-ios/orders")) {
            // Navigate to your view with sodexo-orders-template
            this@PaymentFragment.view?.findNavController()?.navigate(R.id.nav_orders)
        } else {
            webView.loadUrl(url)
        }

        return true
    }
}

iOS

func webView(
    _ webView: WKWebView,
    decidePolicyFor navigationAction: WKNavigationAction,
    decisionHandler: @escaping (WKNavigationActionPolicy) -> Void
) {
    guard let url = navigationAction.request.url else {
        decisionHandler(.allow)
        return
    }

    if url.scheme == "webcomponents.sodexo.demo-ios",
       url.absoluteString.contains("orders") {
        // Navigate to your view with sodexo-orders-template
        self.parent.router.navigate(to: .shopOrders)
        decisionHandler(.cancel)
        return
    }

    decisionHandler(.allow)
}

File Download Handling

Web components may trigger file downloads (PDF receipts, calendar events, etc.). Since WebViews don't handle downloads natively, your application must intercept these requests and handle them.

Mechanism

The web component dispatches a downloadFile event containing:

• fileName: The suggested file name
• mimeType: The MIME type of the file (e.g., application/pdf, text/calendar)
• data: The file content as a base64 data URI

Your native application must:

1. Inject a JavaScript bridge to capture the event
2. Listen for messages from the WebView
3. Decode the base64 data and save the file
4. Open the file with the appropriate application

JavaScript Bridge

Inject this script into your WebView to capture download events:

(function () {
  window.addEventListener(
    "downloadFile",
    function (e) {
      try {
        const detail = e && e.detail ? e.detail : {};
        window.ReactNativeWebView.postMessage(
          JSON.stringify({
            type: "downloadFile",
            fileName: detail.fileName,
            mimeType: detail.mimeType,
            data: detail.data,
          }),
        );
      } catch (_) {}
    },
    false,
  );
})();

info

For non-React Native applications, replace window.ReactNativeWebView.postMessage with your platform's JavaScript-to-native bridge (e.g., window.webkit.messageHandlers for iOS WKWebView).

Supported File Types

MIME Type	Extension	Usage
application/pdf	.pdf	Receipts, invoices
text/calendar	.ics	Calendar events