How to use Apple pay with flutter?

After lots of switching packages, configuring gradles, installing pods to make it work. I am finally happy to see google putting an end to this battle with the introduction of pay library. As the name is, its really simple and straight forward, yet I felt there must be some resource out on the internet to help devs to implement such a feature in short time so that you can focus on developing something really awesome.

I am making it very simple where you can just copy paste bunch of lines below and make it work.

First off all you need the following:

• Apple Pay developer account.
• Mac Device to open Xcode.
• Real iOS device to test apple pay or (you can use the simulator but apple pay token will return null).
• Create Tester account in apple developer account to use testing cards (sandbox tester).

1- Setup Code:

• Install pay package flutter pub add pay
• add apple pay button in your screen :

import 'package:flutter/material.dart';
import 'package:pay/pay.dart';
const _paymentItems = [
PaymentItem(
label: '<Add Your merchant name or the displayName you added in the json file apple_pay.json ex:Facebook',
amount: '99.99',
status: PaymentItemStatus.final_price,
)
];
class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Apple Pay Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ApplePayButton(
              paymentConfigurationAsset: 'applepay.json',
              paymentItems: _paymentItems,
              style: ApplePayButtonStyle.black,
              type: ApplePayButtonType.buy,
              width: 200,
              height: 50,
              margin: const EdgeInsets.only(top: 15.0),
              onPaymentResult: (value) {
                print(value);
              },
              onError: (error) {
                print(error);
              },
              loadingIndicator: const Center(
                child: CircularProgressIndicator(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

• add configuration file in assets folder in the root :

{
  "provider": "apple_pay",
  "data": {
    "merchantIdentifier": "<Merchant ID from developer.apple.com , you can find how to get it in step 2>", 
    "displayName": "<Display Name>",
    "merchantCapabilities": [
      "3DS",
      "debit",
      "credit"
    ],
    "supportedNetworks": [
      "amex",
      "visa",
      "discover",
      "masterCard"
    ],
    "countryCode": "FR", // Country code
    "currencyCode": "EUR", // Currency code
    "requiredBillingContactFields": null, 
    "requiredShippingContactFields": null
  }
}

• import configuration file in pubspec.yaml:

assets:
- assets/

• update ios version in ios/Podfile to > 12.0 :

# Uncomment this line to define a global platform for your project
platform :ios, '12.0'

• update kotlin version /android/build.gradle > 1.4.21 :

buildscript {
ext.kotlin_version = '1.4.21'
repositories {
google()
jcenter()
}
dependencies {
classpath 'com.android.tools.build:gradle:4.1.0'
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
}
}

• update minSdk version /android/app/build.gradle > 19 :

defaultConfig {
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
applicationId "com.example.flutter_apple_pay_example"
minSdkVersion 19
targetSdkVersion 30
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
} 

2- Add the payment in xcode:

• open ios folder with xcode:

• open Runner:

• go to signing & Capabilities then pres + Capability and search about Apple Pay

• make sure your are sign in with apple developer account to selected your Merchant IDs or you can press + to create new one from xcode:

3- add tester account to apple developer to use testing card in real device:

- open tester sandbox link App Store Connect (apple.com) and add the new email.

4- Get Response from Button After payment:

you must use real device with tester account to get this response.

you will find the response in the onPaymentResult function will return the response.

{
billingContact: null,
paymentMethod: { displayName: "Visa ", network: Visa, type: 1 },
token: {
version: "EC_v1",
data: "fsad=...",
signature: "QOR3akEN/xKkPDHn1XAAAAAAAAA==...",
header: {
ephemeralPublicKey: "QucAbDPA==...",
publicKeyHash: "3JBIYAnJ9qDchG3Xk=...",
transactionId: "ea68b299b7c9fcb3fe...",
},
},
shippingMethod: null,
shippingContact: null,
};

and you can use token data to complete your process with payments gate ex:(Stripe, Payfort, etc…).

you can find full example code in github just follow this link : Apple Pay With Flutter.

If the button doesn’t show in the real device:
1- make sure you have a testing account on the device.
2- When you add testing account select available country for apple pay.
3- Region in your device should be in available country for apple pay.
4- Add testing cards to (My wallet app) using apple testing cards.

I completed this article with Alaa Alzibda
You can find us on Github (Hassan Al-Najjar, Alaa Alzibda)