Skip to main content
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)
  • Android Native (Java/Kotlin)
  • iOS Native (Swift)
  • React Native

​
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");
}

​
WebView Keyboard Handling

When embedding the checkout page inside a mobile WebView, the WebView often shrinks when the keyboard opens, which results in a poor user experience. Input fields or the Pay button may get hidden, forcing the user to scroll in awkward ways. To ensure a smooth experience, configure the WebView so that the keyboard pans over the WebView instead of shrinking it. This allows the WebView to remain in place, keeps input fields properly focused, and ensures that critical actions like completing payment stay visible. For Example in Flutter, you can configure the Scaffold to prevent the WebView from shrinking. 
Scaffold(
  resizeToAvoidBottomInset: false, // Prevents WebView from shrinking
  body: WebViewWidget(controller: controller),
)

​
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)
  • Android Native (Java/Kotlin)
  • iOS Native (Swift)
  • React Native

​
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

PlatformRequirement
AndroidDeclare intent filters inside <queries> tag in AndroidManifest.xml
iOSDeclare 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.