How can I add pass to apple wallet after generating it from my web application

[mbappai]

I intend of generating a pass for a purchased event ticket of my platform. I plan on generating a new pass for the user whenever they click on the paid event ticket in the tickets page. So my question here is; after I successfully generate the pass from my web application, how can I add a button for the user to add the recently generated pass to their wallets so they don't have to come back to the web app when they're about to redeem the pass?

[alexandercerutti]

Hi @mbappai, thanks for using passkit-generator!

It is not very clear in which context you are, but I assume you are using it on Safari iOS.

The general rule is to show a button "Add to Apple Wallet" (check for iOS HIG for all the details) when the user lands on the tickets page. Once the button is clicked, you should ping the server, generate the pass and serve it back. You can safely use an HTMLAnchorElement with download attribute to request for pass downloading.

It is not required to have a button "Add to Apple Wallet". I mean, it is better because you can let the user choose what to do and not receive an unexpected ticket-adding request (not everyone might know what Apple Wallet is and where to find it).

I'm saying this because, if you are in a same-origin context, you can think to make something like this with Javascript:

Object.assign(document.createElement("a"), {
    href: <your server url>,
    download: "file-name.pkpass",
}).click();

And it will automatically download the pass and show the Safari PKPassViewController. That's not very good in terms of UX.

I hope I've been able to answer your doubt. If not, may you give me more details, please?

[mbappai]

Thank you very much for the quick response and yes you are totally right about providing a button that reads "Add to your wallet" in the ticket page. I was just a bit confused as to how the flow would look like after I generate the pass.
I noticed your assumption that users will be on safari, but what if they are accessing that site from a another browser? How would that look like?

[alexandercerutti]

As long as they are on iOS you might have heard that all the browsers in iOS must be Safari under the hood, so there are no changes. The flow will be the same as long as:

• The browser will be Safari / Webkit (you may have heard that things might change in the future due to some new European Union laws)
• You are not using .pkpasses but just serving one .pkpass. At the moment, only Safari supports PKPasses.

If you are on MacOS, I'm not very sure. I mean, maybe only Safari and Mail have the capability to understand that you are requesting a pass and hence show the Pass preview on MacOS. I'm not sure about Chrome or Firefox.

[mbappai]

Oh really?! that's interesting, didn't know that all browsers in iOS are using safari under the hood. Anyways, I can just as easily hide that button and show only to users that are using iOS if I observe any inconvenience.

Thank you sooo much Alexander for the quick response and all your efforts creating this amazing library. I'll be sure to have a write a post about it and share the link. I really appreciate it!

Cheers

[alexandercerutti]

Thanks to you! I expect to receive the link to your post here when it will be ready! 😉

Cheers

[mbappai]

You sure will!