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

📘

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

To support Google Pay in a Flutter app:

Ensure you're using the webview_flutter_android package, version 4.10.0+.

Set paymentRequestEnabled to true by calling the setPaymentRequestEnabled method on the AndroidWebViewController.

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.

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