Native Applications Configuration

This page describes the required WebView configuration for integrating Sodexo web components into your native mobile application.

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)

Callback URL Interception

Certain actions within the web components redirect the WebView to an external page (payment gateway, authentication provider, etc.). Once the external flow is complete, the user is redirected back via a callback URL.

Since the WebView does not know how to map this callback URL back to the correct native screen, your application must intercept it and manually navigate to the view that hosts the appropriate web component.

The following actions require this interception:

Action	Description
Badge reload	Redirects to a payment gateway; callback must navigate back to the reload component
Order payment	Redirects to a payment gateway; callback must navigate back to the orders component
Authentication	Redirects to the Auth0 login page; callback must navigate back to the authenticated view

info

The callback URL is configured directly in the web components concerned.

Authentication

See the Authentication page for details on handling Auth0 redirections in your WebView.

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