Ionic 4 Adding Ticket/QRImage to Apple Wallet

Question

I'm Generating QR codes after a ticket purchase. I want to store these QR codes to Apple Wallet.

I've used ionic-native apple-wallet plugin, But the documentation doesn't give enough info on how to store QR image in apple wallet.

import { AppleWallet } from '@ionic-native/apple-wallet/ngx';

this.appleWallet.isAvailable()
 .then((res: boolean) => {
    Expect res to be boolean
  })
 .catch((err) => {
    Catch {{err}} here
 });

The documentation lets add/remove a card, but doesn't have documentation on adding a QR to Apple Wallet.

Answer 1

You do realise that in order to create a valid Apple Wallet Pass, you need to create a bundle, then sign it, compress and distribute?

This link to apple dev docs will help to get basic understanding of the process. And according to this comment there are considerations to not to create passes directly in the app.

---

We met similar issue as yours - we have Ionic application for transportation tickets selling and we wanted to add the ability on iOS to add tickets to the Wallet. All of the research I've done seems to show that currently (December 2019) it cannot be done.

Although, there is a workaround that you can use

It involves opening the link externally in system browser, so one may find this solution unsuitable.

1. You need to have an endpoint (your API or a third-party service) that will return a generated and signed .pkpass file. It doesn't have to specifically return a file, but a response containing bundle with such headers:

Content-Type: application/vnd.apple.pkpass
Content-Disposition: attachment;filename=your_file_name.pkpass

2. In your Ionic application install In App Browser native plugin

ionic cordova plugin add cordova-plugin-inappbrowser
npm install @ionic-native/in-app-browser

3. Add it to your AppModule providers

import { InAppBrowser } from '@ionic-native/in-app-browser/ngx';

@NgModule({
  ...
  providers: [
    ...
    InAppBrowser
  ],
})
export class AppModule {}

4. In component inject InAppBrowser and call method create with second parameter (target) as _system. This command will open external native device browser with provided url. If endpoint configured correctly, browser will automatically start download and then present to user UI for adding Ticket/Pass to the Wallet. Here is a good example of the UI: Link to the image

constructor(private inAppBrowser: InAppBrowser) {
}

downloadApplePass(ticket) {
  const url = `https://your.api/endpoint/${ticket.id}`;

  this.inAppBrowser.create(url, '_system');
}

Answer 2

The plugin that you are referring to doesn't seem to be designed for that purpose.

The documentation says at the top that its for credit/debit cards:

This plugin provides support for adding your credit/debit cards to Apple Wallet. It also can check if the credit/debit card exists in Wallet or any paired device e.g. Apple Watch

Looking at the Apple Wallet documentation it uses a specific class PKPaymentPass for managing cards, whereas tickets are handled by different classes:

• https://developer.apple.com/documentation/passkit/wallet

Looking at the source code for the native plugin that you are using shows to me that every time it uses a PKPass it casts it to PKPaymentPass, so it doesn't look like it is a documentation issue, it's just not supported.

The IOS code can be viewed here:

• https://github.com/tomavic/cordova-apple-wallet/blob/master/src/ios/CDVAppleWallet.m

Unfortunately, you seem to be out of luck unless you want to write the code yourself.

I've done some searching and can find a few little bits of discussion around this topic but they are all threads that go nowhere.