Embedding checkout in your Flutter mobile app consists of multiple steps.

📘

To support Apple Pay on Embedded Checkout, follow these instructions.

Configure your WebView with a valid origin (base URL). If this is missing, the checkout page can keep loading indefinitely after a customer selects a payment method.

Google Pay and Samsung Pay can fail in WebView if wallet-specific settings are not enabled:

For Google Pay, ensure you're using webview_flutter_android version 4.10.0+ and set paymentRequestEnabled to true on the AndroidWebViewController. See Google Pay in Android WebView for more information.

For Samsung Pay, see Samsung Pay WebView integration for more information.

Flutter app steps

❗
Never store or use your Peach Payments credentials from your mobile app. Doing so is a security risk since all your mobile app users gain access to your credentials and can perform actions on your behalf.

To show a WebView containing Embedded Checkout, you must install the webview_flutter_android package.

🚧
For Embedded Checkout to work as expected, ensure that your backend serves an HTTPS page with Embedded Checkout on it. It cannot be a localhost address to avoid issues with payment methods. Also ensure you load the checkout URL with a full URI (for example, loadRequest(Uri.parse(checkoutUrl))) and allow the checkout origin in your WebView settings.

The following Flutter example component calls your API to begin the Checkout process. It assumes that your API accepts a JSON object that contains an array of basket items.

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart'
    as webview_flutter_android;

class WebViewPage extends StatefulWidget {
  final String entityId;
  final String checkoutId;
  final String checkoutUrl;

  const WebViewPage({
    super.key,
    required this.entityId,
    required this.checkoutId,
    required this.checkoutUrl,
  });

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController _controller;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _initializeWebView();
  }

  void _initializeWebView() async {
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white)
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (String url) {
            setState(() {
              _isLoading = true;
            });
          },
          onPageFinished: (String url) {
            setState(() {
              _isLoading = false;
            });
          },
          onWebResourceError: (WebResourceError error) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text('Error loading page: ${error.description}'),
                backgroundColor: Colors.red,
              ),
            );
          },
        ),
      );

    // Enable features required for Google Pay
    if (defaultTargetPlatform == TargetPlatform.android) {
      await _controller.enableZoom(false);

      // Enable additional Android webview settings for Google Pay
      final androidController = _controller.platform
          as webview_flutter_android.AndroidWebViewController;
      final bool paymentRequestEnabled =
          await androidController.isWebViewFeatureSupported(
              webview_flutter_android.WebViewFeatureType.paymentRequest);

      if (paymentRequestEnabled) {
        await androidController.setPaymentRequestEnabled(true);
        await androidController.setMediaPlaybackRequiresUserGesture(false);
      }
    }

    // Load the checkout URL
    await _controller.loadRequest(Uri.parse(widget.checkoutUrl));
  }
  // Build the rest of the page

}

📘
The Flutter WebView configuration includes the following key settings:

JavaScriptMode.unrestricted: Required for Embedded Checkout to function properly.

setPaymentRequestEnabled(true): Critical Android-specific setting required to support Google Pay. This must be called on the AndroidWebViewController instance.

NavigationDelegate: Allows you to handle navigation events and errors in the WebView.

Make sure you have the following packages installed in your pubspec.yaml:
dependencies:
  webview_flutter: ^4.10.0
  webview_flutter_android: ^4.10.0
  http: ^1.1.0