Programmatically Add Card into Apple Wallet in Flutter App: A Guide

Adding a card to the Apple Wallet programmatically can be a great feature for a Flutter app. This guide will walk you through the process of implementing this feature. We will cover the following topics: setting up the environment, adding the necessary dependencies, configuring the iOS project, and implementing the code to add a card to the Apple Wallet.

Setting up the Environment

Before we begin, let's make sure you have everything you need to get started:

• A Mac computer with Xcode installed
• Flutter SDK installed
• A valid Apple Developer account

Once you have everything set up, let's move on to the next step.

Adding Dependencies

To add a card to the Apple Wallet, we need to use the passkit framework. This framework is not available in Flutter by default, so we need to add it manually. To do this, we need to add the following dependency to our pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  passkit: ^0.1.0

After adding the dependency, we need to run flutter pub get to download the package. Now, we are ready to move on to the next step.

Configuring the iOS Project

To add a card to the Apple Wallet, we need to create a .pkpass file. This file contains all the necessary information about the card. To do this, we need to create a new target in our iOS project. To do this, open the ios/Runner.xcworkspace file in Xcode and follow these steps:

1. Click on the Runner project in the left-hand navigation bar
2. Click on the + button at the bottom of the screen
3. Select Target and then Passbook Pass
4. Give the target a name, such as MyCard
5. Click Finish

Now, we need to create a .json file that contains all the necessary information about the card. This file should be located in the assets/passes folder. Here is an example of what the .json file might look like:

{
  "formatVersion": 1,
  "passTypeIdentifier": "pass.com.example.mycard",
  "teamIdentifier": "ABCDEFGHIJ",
  "organizationName": "Example",
  "description": "My Card",
  "logoText": "My Card",
  "foregroundColor": "rgb(0, 0, 0)",
  "backgroundColor": "rgb(255, 255, 255)",
  "barcode": {
    "format": "PKBarcodeFormatQR",
    "message": "1234567890"
  },
  "primaryFields": [
    {
      "key": "cardNumber",
      "label": "Card Number",
      "value": "1234"
    }
  ]
}

Once we have created the .json file, we need to create the .pkpass file. To do this, we need to create a new Run Script Phase in the MyCard target. To do this, follow these steps:

1. Click on the MyCard target in the left-hand navigation bar
2. Click on the + button at the top of the screen
3. Select New Run Script Phase
4. Paste the following code into the script editor:

#!/bin/sh

if [ ! -d "build" ]; then
  mkdir build
fi

if [ ! -d "build/Passes" ]; then
  mkdir build/Passes
fi

if [ ! -d "build/Passes/com.example.mycard" ]; then
  mkdir build/Passes/com.example.mycard
fi

if [ ! -f "build/Passes/com.example.mycard/pass.json" ]; then
  cp assets/passes/pass.json build/Passes/com.example.mycard/pass.json
fi

if [ ! -f "build/Passes/com.example.mycard/icon.png" ]; then
  cp assets/passes/icon.png build/Passes/com.example.mycard/icon.png
fi

if [ ! -f "build/Passes/com.example.mycard/[email protected]" ]; then
  cp assets/passes/[email protected] build/Passes/com.example.mycard/[email protected]
fi

if [ ! -f "build/Passes/com.example.mycard/[email protected]" ]; then
  cp assets/passes/[email protected] build/Passes/com.example.mycard/[email protected]
fi

cd build/Passes/com.example.mycard

/usr/bin/openssl x509 -in cert.pem -out cert.p12 -outform DER -passout pass:

/usr/bin/openssl pkcs12 -in cert.p12 -out pass.pem -nodes -passin pass:

openssl smime -sign -in pass.json -out pass.pkpass -nodetach \
  -inkey pass.pem -signer cert.pem -certfile cert.pem \
  -outform DER -passin pass:

5. Click Close

This script will create a .pkpass file in the build/Passes/com.example.mycard folder. Now, we are ready to move on to the next step.

Implementing the Code

Now that we have everything set up, let's implement the code to add a card to the Apple Wallet. To do this, we need to use the PassKit framework. Here is an example of what the code might look like:

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:passkit/passkit.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Apple Wallet Example'),
        ),
        body: Center(
          child: RaisedButton(
            child: Text('Add Card to Apple Wallet'),
            onPressed: () {
              final url =
                  'https://example.com/pass.pkpass';
              final method = 'GET';
              final headers = {'Content-Type': 'application/vnd.apple.pkpass'};

              final request = HttpClientRequest(
                url: Uri.parse(url),
                method: method,
                headers: headers,
              );

              request.close().then((HttpClientResponse response) {
                response.transform(utf8.decoder).listen((contents) {
                  final pass = Pass.parse(contents);
                  PassKit.addPass(pass);
                });
              });
            },
          ),
        ),
      ),
    );
  }
}

This code will add a card to the Apple Wallet when the user taps the Add Card to Apple Wallet button. The card will be downloaded from the https://example.com/pass.pkpass URL. Once the card is downloaded, it will be added to the Apple Wallet using the PassKit.addPass method.

In this guide, we have learned how to add a card to the Apple Wallet programmatically in a Flutter app. We have covered the following topics:

• Setting up the environment
• Adding dependencies
• Configuring the iOS project
• Implementing the code

We hope that this guide has been helpful and that you are now able to add a card to the Apple Wallet in your Flutter app. If you have any questions or feedback, please let us know in the comments below.

References