Mobile App Integration

Learn how to embed your webpage inside a mobile WebView and properly handle deep links across different frameworks.

If you’re embedding our hosted webpage inside a mobile app using a WebView, you must ensure that external deep links are properly handled by opening them in their respective apps.

This guide walks you through the setup for major mobile frameworks:

---

Framework-Specific Setup

Flutter (Android & iOS)

Dependencies

flutter pub add webview_flutter url_launcher

Code Sample

if (checkoutUrl != null) {
  controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..setNavigationDelegate(
      NavigationDelegate(
        onNavigationRequest: (NavigationRequest request) async {
          if (request.url.startsWith("myapp://payment-callback")) {
            _handleCallbackUrl(request.url);
            return NavigationDecision.prevent;
          }
          Uri url = Uri.parse(request.url);
          if (url.scheme != "http" && url.scheme != "https") {
            await launchUrl(url, mode: LaunchMode.externalApplication);
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ),
    )
    ..loadRequest(Uri.parse(checkoutUrl!));
} else {
  throw Exception("Failed to get checkout URL");
}

---

Google Pay Integration

Chrome Custom Tab (CCT) Integration

Chrome Custom Tabs provide a seamless way to display web content within your Android app while maintaining the native look and feel. For Google Pay integration on Android, we strongly recommend using CCT instead of WebView for better performance, security, and native user experience.

Flutter (Android & iOS)

Dependencies

flutter pub add flutter_inappwebview url_launcher

Code Sample

import 'package:url_launcher/url_launcher.dart';

// Launch payment URL in Chrome Custom Tab (Android) or Safari (iOS)
Future<void> launchPaymentUrl(String paymentUrl) async {
  final Uri uri = Uri.parse(paymentUrl);
  
  if (await canLaunchUrl(uri)) {
    await launchUrl(
      uri,
      mode: LaunchMode.externalApplication,
      webViewConfiguration: const WebViewConfiguration(
        enableJavaScript: true,
        enableDomStorage: true,
      ),
    );
  } else {
    throw Exception('Could not launch payment URL');
  }
}

WebView Integration with Google Pay

Note: While CCT is the recommended approach for Google Pay on Android, if you must use WebView instead, refer to the Google Pay Android WebView guide for complete integration details.

---

Android & iOS Requirements

Android

If your app wants to check if other apps are installed or can handle specific intents (like deep links or custom schemes) before launching them, you need to declare those intents inside the <queries> tag in your app’s AndroidManifest.xml.

This is mandatory starting Android 11 (API 30) for privacy reasons.

Without this, calls like PackageManager.queryIntentActivities() or launching those intents may not work as expected.

iOS

If your app wants to check whether other apps are installed that support certain custom URL schemes before opening them (using canOpenURL), you must declare those schemes inside the LSApplicationQueriesSchemes array in your Info.plist.

Without this, canOpenURL will always return false for those schemes (except for some system schemes).

This is required since iOS 9 for privacy reasons.

Summary

Platform	Requirement
Android	Declare intent filters inside <queries> tag in AndroidManifest.xml
iOS	Declare URL schemes inside LSApplicationQueriesSchemes in Info.plist

Example

Android (AndroidManifest.xml)

<queries>
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="cashme" />
    </intent>
</queries>

iOS (Info.plist)

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>cashme</string>
</array>

---

If deep links are not handled as described, your app may not open apps like Cash App or klarna from within the WebView.