Mastering Apple Pay in Flutter

You know what is fun about building applications? Making money with them. One way to do that is to accept payments within the application.

Apple Pay is the most seamless way for people using iOS devices to pay for something.

Setup

You will need an Apple Developer account for this.

1. Register an App ID

Go to Certificates, Identifiers, & Profiles section on the Apple developer portal, select Identifiers and make sure you are on the App IDs filter.

Click the blue plus icon, to add a new App ID, select the App IDs option, and an app type. Once you get to the below screen, it’s very important that you put the same bundle identifier as the bundle identifier on the actual app you’re building (you can find it in XCode). Specifically for implementing Apple Pay, you need to select the Apple Payment Processing option.

2. Create a Merchant ID

After you register it will lead you back to the Certificates, Identifiers, & Profiles page where you should switch to the Merchant IDs filter.

And once again, click the blue plus icon to create a new Merchant ID. Make sure the Merchant IDs option is selected and you’ll be taken to the registration screen. This time you can choose whatever identifier you want, but it is recommended to follow Apple’s convention.

3. Create an Apple Pay Processing Certificate

For the certificate, you need to switch to the Certificates and once again click the blue plus icon. Under Services select the Apple Pay Payment Processing Certificate, select the Merchant ID we just created and it will lead you to this screen, where you will need to create the certificate.

4. Create a CSR for a certificate

Once you have clicked the button highlighted above, you will need to upload a Certificate Signing Request (CSR) file from your Mac. To do this you need to open the Keychain Access application which should be installed on your Mac by default.

In the toolbar select Keychain Access > Certificate Assistant > Request a Certificate from a Certificate Authority and you should see the below screen. Add your email and name, select Saved to disk and Let me specify key pair information.

Click continue and for the key pair information change Algorithm to ECC and Key Size to 256 bits

This will save a CSR file to your specified location.

Upload it to our Apple Pay Processing Certificate.

5. Add Apple Pay ability in XCode Project

Now this last part is a bit easier. Open up your XCode project, select Runner and then Signing & Capabilities.

Select Apple Pay and choose the Merchant ID that corresponds with this project.

Note: The Bundle Identifier for this specific project must be a registered App ID on the apple developer site. That was what we did in Step #1, so make sure that’s the same app, or redo step #1 for this specific app.

What is a Merchant ID and Certificate?

What the heck did we just even do? To be able to accept payments you need to have an Apple Developer account and be a “verified” merchant able to accept payments. The Payment Processing Certificate is tied directly to that Merchant ID and is used for encrypting the payment data that is being sent. The Apple Pay servers use the certificate to encrypt that payment data, and then your payment service provider can use it to decrypt that data. So all of this was done in the name of security.

Add it to your Flutter App

The first thing you will need is to add the pay package to your Flutter application. You will need to create an Apple Pay configuration.

You can find an example default configuration here. To get this configuration working you need to update the merchantIdentifier and displayName to the Merchant Identifiers we set up in Step #2. You can find the complete list of parameters in the Apple Pay Documentation.

The very last step is to add the Apple Pay button that is provided by the pay package to your application. Here is a basic one, but check out the pay package for more details.

ApplePayButton(
    paymentConfiguration: PaymentConfiguration.fromJsonString(defaultApplePay),
    paymentItems: const [
        PaymentItem(
            label: 'Total',
            amount: '0.01',
            status: PaymentItemStatus.final_price,
        )
    ],
    style: ApplePayButtonStyle.black,
    type: ApplePayButtonType.book,
    onPaymentResult: (result) {
        //add what you want to happen after purchase is made
    },
    loadingIndicator: const Center(
        child: CircularProgressIndicator(),
    ),
),