Generic passes

[kh3m-7714]

Hi sir,
I have generate Generic passes successfully it is working fine.
But i just need to modify it and update it many times as per my project requirements

I have gone through documentation and examples also.
still i am not able to get it. How upload procedure work for this.

Could you please guide me?

[alexandercerutti]

Hi @kh3m-7714, thanks for using passkit-generator!

The phase of updating a pass cannot be achieved by using passkit-generator alone. You must integrate it Apple Wallet web services, notifications (apns) and a database.

In order to listen to the routes of Apple Wallet Web Services, I've created another package that abstracts them in different frameworks (express, fastify, hono, ...). You can find it here: https://github.com/alexandercerutti/passkit-webservice-toolkit
If you are using a framework that is not supported, you can use the toolkit to implement yours, or submit a PR or let me know there, so I can try supporting it.

These two packages alone, tho, won't let you achieve the full pass update functionality.

I suggest you to give a look at this Apple Developer page, which will give you more details about how you should proceed in the implementation and how to integrate the several pieces of the puzzle.

Let me know if I can help you in any other way

[kh3m-7714]

sir,
i am integrating updating functionality in existing code by making request via axios.
I am getting this error :- Error sending push notification: AxiosError: Parse Error: Expected HTTP/

here is my code

const jwt = require("jsonwebtoken");
const fs = require("fs");
const axios = require("axios");

const teamId = "";
const keyId = "";

const privateKey = fs.readFileSync("./certs/AuthKey.p8", "utf8");

const jwtoken = jwt.sign({}, privateKey, {
    algorithm: "ES256",
    expiresIn: "24h",
    issuer: teamId,
    header: { alg: "ES256", kid: keyId },
});

module.exports = {

    updatePass: async (req, res) => {


        let serialNumber = '9876543210'

        try {

            const pushToken = ""; // 

            const bundleId = "pass.walletpass"; // 

            const apnsURL = `https://api.sandbox.push.apple.com/3/device/${pushToken}`;


            const response = await axios.post(
                apnsURL,
                {},
                {
                    headers: {
                        "Authorization": `Bearer ${jwtoken}`,
                        "apns-topic": bundleId,
                        "Content-Type": "application/json"
                    }
                }
            );

            console.log(response);

        } catch (error) {
            console.error("Error sending push notification:", error);
        }


        console.log(`Push notification sent for pass ${serialNumber}`);
        res.send("Pass update triggered.");
    }
}

[alexandercerutti]

I never integrated notifications, so I cannot help you with this, I'm sorry.

FWIW, I'd attach a node debugger and go check step by step what went wrong.

If you solve, if you could share the solution, I'd be grateful!

Tho, someone seemed to have the same problem:

https://stackoverflow.com/questions/76781648/axios-parse-error-expected-http-when-request-against-apple-push-sandbox-api

[kh3m-7714]

@alexandercerutti sir, i have successfully integrated update wallet functionality also.
I have used apn package for this to notify apple there is updates for pass but still i am not able to get notifications on phone.
Here is code :-

Whenever i need to update the pass functionality. I am calling this function to notify apple with passId, There is update in pass.

 sendPassUpdateNotification: async (data) => {
        const pushToken = 'demo token' //Getting this token after adding pass into wallet in webservice url

        if (!pushToken) {
            console.log("❌ No push token found for device:", deviceLibraryIdentifier);
            return;
        }

  
        const notification = new apn.Notification({
            alert: "Your pass has been updated.",
            topic: "pass.SamplePass",
            sound: "ping.aiff",
            badge: 1,

        try {
            let response = await apnProvider.send(notification, pushToken);
            console.log("🔔 Push notification sent:", response.failed);
        } catch (error) {
            console.error("❌ Error sending push notification:", error);
        }
    }

after this Apple is calling its own predefined routes, which we need to define on our app,
This route has been called by apple to get SerialNumber for which we need to update our pass.

router.get("/v1/devices/:deviceLibraryIdentifier/registrations/:passTypeIdentifier", (req, res) => {
  try {
    console.log("V1 DEvice get api")
    console.log(req.params)
    console.log(req.query)
    console.log(req.body)
    let serialNumber = ['your serial which you have used while generating pk.pass file']
    const lastUpdated = new Date().toISOString();  // Make sure to send this 

    res.status(200).json({
      serialNumbers: serialNumber || [],
      lastUpdated: lastUpdated
    });

  } catch (error) {
    console.log(error)
  }
})

After this apple will call a route to get Updated pk.pass file for that particular serialNumber

router.get("/v1/passes/:passTypeIdentifier/:serialNumber", async (req, res) => {
  try {

    console.log("pass type for pk pass file")

    console.log(req.params)
    console.log(req.query)
    console.log(req.body)



    await controllers.updatePass(req, res)  // inside this function i am calling same process which i had use while creating the apple pass so only add it like this there and share updated pk.pass file. 
     **response.set({
                "Content-Type": pass.mimeType,
                "Content-Disposition": `attachment; filename=${passName}.pkpass`,
                "Last-Modified": lastUpdated,  // Add the Last-Modified header

            });**


  } catch (error) {
    console.log(error)
  }
});

By following this process you will be able to see latest changes on wallet.

[alexandercerutti]

I suggest you using https://github.com/alexandercerutti/passkit-webservice-toolkit to handle the routes, if you can, because it handles several cases of codes and answers and might be helpful to you.

For what concerns notification, did you verify if your pass got updated?
APN notifications for Apple Wallet are silent. It triggers notification for the field that changed, only if the change reflected a field AND the field in the pass has the changeMessage field with a valid placeholder.

[kh3m-7714]

For what concerns notification, did you verify if your pass got updated?
Yes sir, it is getting updated. But i think there is something missing for notifications. Will share with you, whenever i am done.

[kh3m-7714]

Hey sir,
i am making storeCards.
where i need to add image like this :- https://snipboard.io/UlBHmr.jpg
I have tried but i am unable to add image here like the ss above attached.

Code

async function createPassTemplate(data) {
    try {
        const certificates = await getCertificates();

        let icon_url = bucket_baseurl + process.env.IMAGE_URL
        let thumbnail_url = bucket_baseurl + data?.imgLink


        const icon_image_promise = axios.get(icon_url, {
            responseType: 'arraybuffer'
        });

        const thumbnail_image_promise = axios.get(thumbnail_url, {
            responseType: 'arraybuffer'
        });

        let [icon_resp, thumbnail_resp] = await Promise.all([icon_image_promise, thumbnail_image_promise])
        const icon_buffer = Buffer.from(icon_resp.data, 'binary');
 

        const background_buffer = await sharp(thumbnail_resp.data)
            .png()
            .resize(1032, 336) // 
            .toBuffer();

        let PassData = {
            "pass.json": JSON.stringify({
                "formatVersion": 1,
                "passTypeIdentifier": passId,
                "serialNumber": data.serial_no,
                "teamIdentifier": team_id,
                "webServiceURL": `${process.env.webServiceURL}`,
                "authenticationToken": `test${data.serial_no}`,
                "organizationName": "Test",
                "description": "test card",
                "logoText": "Sample",
                "foregroundColor": "rgb(255, 255, 255)",
                "backgroundColor": "rgb(255, 161, 38)",
                "storeCard": {

                }
            }),
            "icon.png": icon_buffer,
            "[email protected]": icon_buffer,
            "logo.png": icon_buffer,
            "[email protected]": icon_buffer,
           "background.png": background_buffer,

        };

        return new PKPass(PassData, {
            wwdr: certificates.wwdr,
            signerCert: certificates.signerCert,
            signerKey: certificates.signerKey,
            signerKeyPassphrase: certificates.signerKeyPassphrase,
        });

    } catch (error) {
        return error
    }
}

I think i am missing something, but i am unable to figure it out, Please help me achieve it.

[alexandercerutti]

You didn't attach the current result, so I can only try to guess.

What you are trying to achieve, is a storeCard. Store cards, by default, do not accept a background.png picture, but they use the strip.png image.

You can refer to Human Interface Guideline documentation page here: https://developer.apple.com/design/human-interface-guidelines/wallet#Store-cards

You might want then to try to replace your background.png with a strip.png.

---

Furthermore, I can also suggest you to not compose storeCard like you did:

"pass.json": {
    ...
    "storeCard": {
    
    }
}

but to use passkit-generator API:

const pass = new PKPass(PassData, { ... });

pass.type = "storeCard";

/** Add fields here like: **/
pass.primaryFields.push(...);

return pass;

Let me know if this solves your issue.

[kh3m-7714]

I have achieved it sir,

"[email protected]": strip_buffer,

This one needs to add, this thing i was missing.

Thank you so much.

[alexandercerutti]

You are welcome.

If you could leave a ⭐ to the project, it would be great 🚀