How to generate iOS passes with Passbook JS

This story describes how one can generate iOS passes with the help of an npm module `Passbook`.

One of the reasons to write this up is the challenges I had to come across to collate all details with minimal documentation available online.

Hopefully, this article helps one to generate iOS passes with no much confusions.

Demystifying Pass Jargons:

Passes can be of types boardingPass, coupon, eventTicket, storeCard or generic. Here I will generate a pass of type `storeCard`.

To do so, the mandatory data required comprises passTypeIdentifier, serialNumber, description, teamIdentifier and other optional fields - backgroundColor, foregroundColor, organizationName, webServiceURL etc.

Passbook npm module also requires you to have images for your passes.

A store card must have logo, icon and strip images.

passTypeIdentifier and teamIdentifier should match the ones corresponding in the certificate used to sign the pass issued by Apple.

Serial number has to be a unique Id.

passTypeIdentifier and serialNumber together identify a pass uniquely.

Prerequisite: Generate Certificates. This section is out of scope for this article since we are here to talk about using the npm module Passbook only.

Step 1: Install Passbook

npm i --save passbook

Step 2: Preparing ‘keys’ directory

`keys` directory in this project is the heart and soul to generating valid passes. Thus it is important to ensure the steps are followed correctly. Often, people are seen struggling to extract keys from Apple Certificate. This is a 3 step procedure (thanks to Passbook!!).One - Download Apple WorldWide Developer Certificate (WWDR Certificate) from here.Two - Extract a .p12 from you Apple Certificate that was issued on your passbook type ID. (Just double click on your certificate to add to your keychain. Now goto keychain, locate the certificate, right click to export to .p12 . Tadaon!! It's done!)Three - Place WWDR Certificate and .p12 in keys directory in your project. Four - Traverse to passbook directory in node_modules. Execute this magical command. `./bin/node-passbook prepare-keys -p <path to your keys directory in your project>`
This asks for Import Password. This is the password used while adding Apple Certificate in keyChain.
It also asks for PEM pass phrase. Enter any secure Passphrase and remember this. Let's call it PASS_PHRASE.
Five - Step Four would generate two more files in your keys directory i.e., CertificatesPass.pem and wwdr.pemSix - Rename CertificatesPass.pem to `<passTypeIdentifier>.pem` and we are done! Phew!Well I broke this down to 6 steps for easy reading.

Step 3: Creating Template

import passbook from 'passbook';let template = passbook('storeCard', {
passTypeIdentifier: <PASS_TYPE_IDENTIFIER>,
teamIdentifier: <TEAM_IDENTIFIER>,
organizationName: <ORGANISATION_NAME>,
description: <DESCRIPTION>
});
template.loadImagesFrom(<directoryToImages>);
template.fields.barcode = {
'format': <BARCODE_FORMAT>,
'message': <MESSAGE>,
'messageEncoding': <BARCODE_MESSAGE_ENCODE>
};
template.fields.serialNumber = <serialNumber>;
template.keys(<pathToKeysFolder>, <PASS_PHRASE>);

Step 4: Generate Pass

let pass = template.createPass();
//You can add secondary fields if any on your pass after this.

Step 5: Render Pass

app.get("/mypass", function(request, response) {
pass.render(response, function(error) {
if (error)
console.error(error);
});
});

Step 6: Test your Pass

Use Postman to hit your route. Click on `Send and Download`. Save the file with .pkpass extension. Double click on it to view or use iPhone simulator

Debugging Passes

Open `Console` (on Macbook), search for PROCESS passbook to view logs.