Questions about (and checklist for) for Apple Pay and Google Pay on Flutter

Question

I'm trying to install Apple Pay and Google Pay on my app. I just want to do Payments, not In-App Purchases or Subscriptions.

Are there any other payment processing options for a web app? Stripe? PayPal? (Apple doesn't allow iOS apps to use any payment processor other than Apple Pay. Google Pay is recommended as the best payment processor for Android.)

What I've done:

|√| Read the documentation.

|√| Create an Apple Merchant ID.

|√| Create an Apple Payment Processing Certificate.

|√| Create a Google Pay Merchant ID.

|√| Make two files in your assets directory: assets/applepay.json and assets/googlepay.json.

|√| Configure pubspec.yaml to read the assets directory.

|√| Put a JSON object in assets/applepay.json that looks like this:

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

QUESTION: Where do I get this JSON object? Is it generated by Apple?

| | Put a JSON object in assets/default_payment_profile_google_pay.json that looks like this:

{
  "provider": "google_pay",
  "data": {
    "environment": "TEST",
    "apiVersion": 2,
    "apiVersionMinor": 0,
    "allowedPaymentMethods": [
      {
        "type": "CARD",
        "tokenizationSpecification": {
          "type": "PAYMENT_GATEWAY",
          "parameters": {
            "gateway": "stripe",
            "stripe:version": "2020-08-27",
            "stripe:publishableKey": "<stripe publishable key, eg pk_.......>"
          }
        },
        "parameters": {
          "allowedCardNetworks": [
            "VISA",
            "MASTERCARD"
          ],
          "allowedAuthMethods": [
            "PAN_ONLY",
            "CRYPTOGRAM_3DS"
          ],
          "billingAddressRequired": false
        }
      }
    ],
    "merchantInfo": {
      "merchantId": "<Merchant ID from pay.google.com/business>",
      "merchantName": "<Display Name>"
    },
    "transactionInfo": {
      "countryCode": "FR",
      "currencyCode": "EUR"
    }
  }
}

QUESTION: Where do I get that JSON object?

QUESTION: My company's credit card processor is Payflow (PayPal's credit card processor). Why is Google's Payments Service Providers (PSPs) list have dozens of Russian and Chinese PSPs I've never heard of but the only American PSPs are Square and Stripe? Why don't I see Payflow or Wells Fargo?

|√| Add this to pubspec.yaml under dependencies:

pay: 1.0.7

|√| Import the package pay.dart:

import 'package:pay/pay.dart';

|√| Run flutter get pub to get the package.

| | Check Android Studio > Preferences > Plugins to see if the package loaded.

QUESTION: I don't see pay.dart in my installed plugins. What's wrong?

|√| Make your Apple Pay and Google Pay buttons:

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

const _paymentItems = [
  PaymentItem(
    label: 'Total',
    amount: '99.99',
    status: PaymentItemStatus.final_price,
  )
];

void onApplePayResult(paymentResult) {
  // Send the resulting Apple Pay token to your server / PSP
}

void onGooglePayResult(paymentResult) {
  // Send the resulting Google Pay token to your server / PSP
}

class Donate extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[

            ApplePayButton(
              paymentConfigurationAsset: 'default_payment_profile_apple_pay.json',
              paymentItems: _paymentItems,
              style: ApplePayButtonStyle.black,
              type: ApplePayButtonType.buy,
              width: 200,
              height: 50,
              margin: const EdgeInsets.only(top: 15.0),
              onPaymentResult: onApplePayResult,
              loadingIndicator: const Center(
                child: CircularProgressIndicator(),
              ),
            ),

            GooglePayButton(
              paymentConfigurationAsset: 'default_payment_profile_google_pay.json',
              paymentItems: _paymentItems,
              style: GooglePayButtonStyle.black,
              type: GooglePayButtonType.pay,
              margin: const EdgeInsets.only(top: 15.0),
              onPaymentResult: onGooglePayResult,
              loadingIndicator: const Center(
                child: CircularProgressIndicator(),
              ),
            ),

          ],
        );
  }
}

QUESTION: I'm getting two error messages:

Unhandled Exception: Unable to load asset: assets/default_payment_profile_google_pay.json
Unhandled Exception: Unable to load asset: assets/default_payment_profile_apple_pay.json

You made two buttons but you'll only see one. In your iOS simulator you'll see only the Apple Pay button. In your Android simulator you'll see only your Google Pay button.

| | Enable Apple Pay in Xcode.

QUESTION: What? How? I'm using Android Studio. I can't open my project in Xcode.

| | Set up your items, prices, labels, etc.

QUESTION: What else is needed?

Answer 1

Another step is to add the Apple Pay Capability in Xcode.

But I'm using Android Studio! I can't open my project in Xcode!

But you can open your Android Studio project in Xcode. In Android Studio select the folder ios > Runner. Now go to Tools > Flutter > Open iOS module in Xcode.

Open Setting Up Apple Pay. Scroll down to Enable Apple Pay Capability in Xcode. I just told you how to do the first step.

The second step is "choose the target for you app." What this means is click on the Runner in the upper left corner. Yes, there are three Runner items in the upper left corner. Click on the topmost Runner, next to the blue Xcode icon. Then in the second column, under TARGETS, click the Runner next to the Flutter icon.

Now you can do step three. Signing & Capabilities is in the menu bar in the middle of the screen, four rows down from the top.

Step four is to click the + in the top row on the right side of the middle panel. If you hover your mouse over the + the tooltip is "Library."

A modal window opens. It says Capabilities at the top. Select Apple Pay.

For step five look in the middle of your screen. You should see Apple Pay.

Step six, select your Merchant ID, then check the checkbox that appears.

You should see this when you're finished:

Now you can put on your resume that you know how to use Xcode. :-)

Answer 2

From what I've read it seems like everyone is using Stripe as their PSP. There's a Stripe Flutter SDK package that sets up ApplePay and GooglePay as Payment Sheets, Card Payments, Wallets, and Regional Payment Methods. The Stripe Flutter SDK also has a GitHub repo that includes a complete example payment app.

Answer 3

Here a solution to this problem for two error you get;

Check Pubspec.yaml file and add these lines

assets:
  - assets/