Adding Apple Wallet Passes
A Digital pass can be added to Apple Wallet in a Capacitor app by downloading the pass from your backend, and using a Capacitor plugin to add it. These steps and code needed are outlined below.
A sample project is available if you would like to see adding a pass in action.
Downloading a Pass
You can download a pkpass file in a Capacitor app using this function called get:
_10 async function get(url: string): Promise<string> {_10 const response = await fetch(url);_10 const blob = await response.blob();_10 const base64 = await blobToBase64(blob);_10 if (!base64 || base64 instanceof ArrayBuffer) {_10 throw new Error(`Unable to get ${url}`);_10 }_10 return base64;_10 }
pkpass data must be base64 encoded, create a helper function called blobToBase64:
_10function blobToBase64(blob: Blob): Promise<string | ArrayBuffer | null> {_10 return new Promise((resolve, reject) => {_10 const reader = new FileReader();_10 reader.onerror = reject;_10 reader.onload = () => {_10 resolve(reader.result);_10 };_10 reader.readAsDataURL(blob);_10 });_10}
Adding to Apple Wallet
After downloading the pass we need to add it using a plugin. In this tutorial we'll use capacitor-pass-to-wallet which you can install by running these commands:
_10npm install capacitor-pass-to-wallet_10npx cap sync
We can call the addToWallet function of the plugin with the result of our get call:
_10import { CapacitorPassToWallet } from 'capacitor-pass-to-wallet';_10..._10 const data = await get('https://url-to-get-pass');_10 await CapacitorPassToWallet.addToWallet({ base64: data });
You should see a standard Apple Add Pass dialog with details of your pass (example below). The user can click Add to add to Apple Wallet.
