with Web SDK

Last Updated: 17 March 2025

Flutter integration with Web SDK

Overview

The integration consists of using web_flutter (the Flutter equivalent of an iframe) to display a HTML form, which uses the Access Checkout Web SDK to interface with the Flutter layer.

Integration

  1. Follow one of our guides (e.g. create a session to pay with a card) to integrate the Access Checkout Web SDK into a HTML page.
  2. Add the webview_flutter package to your application by following the webview_flutter installation steps.
  3. Your iOS folder Podfile must be set up to automatically source an additional dependency called webview_flutter_wkwebview.
    • if you have a Podfile, make sure that it contains the same code as in the webview_flutter example application Podfile
    • if you don't have a Podfile under the ios folder, you must generate one and it should be correctly set up by default. Run flutter run and select an iOS device as the destination or, run flutter build ios and follow the instructions
  4. Import the webview_flutter package in your stateful widget using import 'package:webview_flutter/webview_flutter.dart';.
  5. Create an instance of WebViewController in your widget's state and set the JavaScript mode as unrestricted:
class _WebViewState extends State<AccessCheckoutWebWidget> {
   late WebViewController controller;
   // ...

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

      // ...

      controller = WebViewController()
         ..setJavaScriptMode(JavaScriptMode.unrestricted)
         ..setNavigationDelegate(
            NavigationDelegate(
               onProgress: (int progress) {},
               onPageStarted: (String url) {},
               onPageFinished: (String url) {},
               onHttpError: (HttpResponseError error) {
                  print(error.response);
               },
               onWebResourceError: (WebResourceError error) {
                  print(error.description);
               },
            ),
         );
   }
}
  1. Add a JavaScript channel with a message listener to the WebViewController. The JavaScript channel intercepts the messages that is sent to Flutter from the JavaScript layer:
controller = WebViewController()
   ..addJavaScriptChannel(
      'flutterWebView',
      onMessageReceived: (dynamic message) {
         setState(() {
            sessionToken = message.message;
         });
      },
   )
   // ...
  1. In WebViewController, load the URL of the HTML page that contains your card form. At this stage, you should be able to see your card form displayed in your Flutter application:
controller = WebViewController()
   // ...
   ..loadRequest(
      Uri.parse("..."),
   );
  1. Use the Flutter 'postMessage' function from the JavaScript channel in your JavaScript code to communicate from the JavaScript layer to the Flutter layer. It is available in the JavaScript context as a variable that has the same name as the name used when defining the JavaScript channel in the Flutter code:
Worldpay.checkout.init(
 {
   ...
 },
 function (error, checkout) {
   // ...

   form.addEventListener("submit", function (event) {
     event.preventDefault();

     checkout.generateSessionState(function (error, sessionState) {
       // the session is sent to the Flutter layer using the Flutter postMessage mechanism 
       flutterJSChannel.postMessage(sessionState)
     });
   });
   
   // ...
 }
);

Full integration example

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class AccessCheckoutWebWidget extends StatefulWidget {
  const AccessCheckoutWebWidget({super.key});

  @override
  State<AccessCheckoutWebWidget> createState() => _WebViewState();
}

class _WebViewState extends State<AccessCheckoutWebWidget> {
  late WebViewController controller;
  String sessionToken = "";

  @override
  void initState() {
    super.initState();
    checkoutId = widget.checkoutId;
    iframeBaseUrl = widget.iframeBaseUrl;

    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel(
        'flutterJSChannel',
        onMessageReceived: (dynamic message) {
          setState(() {
            sessionToken = message.message;
          });
        },
      )
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (int progress) {},
          onPageStarted: (String url) {},
          onPageFinished: (String url) {},
          onHttpError: (HttpResponseError error) {
            print(error.response);
          },
          onWebResourceError: (WebResourceError error) {
            print(error.description);
          },
        ),
      )
      ..loadRequest(
        Uri.parse("<replace-with-your-url-to-form.html>"),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
                width: 400,
                height: 450,
                child: WebViewWidget(controller: controller)
            ),
            if (sessionToken != "") Text(sessionToken),
          ],
        )));
  }
}

Tips for Android emulators

Tips for Android emulators

On Android emulator devices, localhost points to the emulated device. If you want the iframe to load a page hosted in your local environment you must use the 10.0.2.2 IP address. More information is available on the official Android Emulator networking page.

The use of the https protocol has been enforced since Android 6.0. As this can be impractical for local development, you can configure an exception to allow plain text http on 10.0.2.2. Note that this is for development only, and that you must always use https in Production.

  1. Create a network_config.xml in the res/xml folder with the following content:
 <?xml version="1.0" encoding="utf-8"?>
 <network-security-config>
   <domain-config cleartextTrafficPermitted="true">
     <domain includeSubdomains="true">10.0.2.2</domain>
   </domain-config>
 </network-security-config>
  1. Configure your Android app to use this file as network security configuration by adding the android:networkSecurityConfig="@xml/network_config" attribute to the <application> node of your AndroidManifest.xml file.