System Frameworks • iOS, watchOS • 31:02
Passbook is now Wallet. Wallet stores your coupons, boarding passes, event tickets, and even the credit and debit cards you use with Apple Pay. In iOS 9, Wallet makes the Apple Pay experience even better and integrates more with Apple Watch. Learn about the Wallet app, new kinds of passes, and how your app can integrate and interact with Wallet.
Speaker: Danvin Ruangchan
Unlisted on Apple Developer site
Downloads from Apple
Transcript
This transcript has potential transcription errors. We are working on an improved version.
[Danvin Ruangchan]
All right, good morning, everyone, and welcome to session 701. My name is Danvin, and I'm really excited to be here today to talk to you guys about Wallet, the app formerly known as Passbook. All right. With a new name, we also have a new logo! And you may have seen our icon if you installed iOS 9, this is now our new icon, but beauty is more than skin deep. We have been working on a lot of features for Wallet over the past few years. We will talk about a few of those today. So let's take a look at our agenda and take a look at what we will be talking about today.
First we're going to take a glance at what we've been up to and then a quick history lesson and review all of Wallet's features. We will talk about what is a Pass. We will talk about PassKit, our framework inside iOS and we're going to talk about Apple Pay and then there's more! So stick around.
We have a lot of content to talk about today. So what have we been up to? Well, Apple Pay is what we have been up to and Apple Pay was introduced last fall, and the responses have been great! Consumers have loved its ease of use. And merchants have loved its higher conversion rates.
And now with Apple Pay we have now enabled contactless payments on our phones, our watches. We even released an API so you can take Apple Pay inside your apps as well. But to understand the essence of Wallet, to understand what we are about, we need to take a look back. Take a look back and see how we got here.
Does this ring a bell? Does this look familiar to anyone. Does anyone have a wallet that looks like this? I'm sure someone out there who has a wallet that looks like this. This is a real problem. We stick our gift cards in here, our debit cards and credit cards and our coupons and then when we try to find something, we can't find it.
The overstuffed wallet is a real problem. And we are trying to solve that problem with Wallet. We do so with passes. We have beautiful passes inside Wallet. We have passes for coupons, for event tickets for store cards, and even for boarding passes as well. But all the things that these passes have in common, is that they all allow us to take action in the real world.
And now, with Apple Pay, we have your credit cards and debit cards inside Wallet as well. But we went beyond that. We want to solve the problem where we can't find the thing at the right place at the right time so we built in relevancy inside our passes as well. And they look like this.
If you come to the airport, your boarding pass is right there waiting for you. All I do is swipe on the lock screen and my boarding pass is ready to use. It's so great! It's that great surprise in the light factor that this brings. But let's take a look at these passes.
In essence, these passes contain information. On the top left-hand corner you will see there's a logo. It clearly states the entity that this pass belongs to. In this particular case we are looking at a United boarding pass. So their logo is predominantly up there in the top left-hand corner. We put our important information in our header field.
In this case, our gate information is present there. Our users will know exactly what gate they need to go to, when boarding time arrives. We put our important information down in our primary fields. And this particular case, we have a flight that takes off from Newark and arrives in Stockholm.
We also have auxiliary and secondary fields and this is where we put our nice go to know pieces of information, things like the seat number. And, of course, we have our bar code. And this is that link. It's the message that connects the users to your system, to be able to take action in the real world, and in this case, this boarding pass will allow the user to board a flight. And we can flip this to the back. We call this the back of the pass.
And you'll notice right away on the very top you can associate an app with this pass, and appropriately we have the United Airlines app associated with this pass. There are two options for users here as well. To be able to automatically update this pass, that's very important we're going touch on that a little bit later in our presentation to be able to update these passes to keep information up to date.
We can also turn on and off relevancy on and off on the back of the pass as well. That's the option there, Suggest Pass on Lock Screen. And along with that, on the back of the pass, with he have some other nice to know pieces of information, things like terms can go open the back of the pass. What makes a pass a pass? Let's take a look at this beautiful MLB event ticket.
The pass is made from a pass.json file. The contents and the layout of this pass is defined in that file. And it just your standard JSON file with keys and values. In this case the keys and values determine the content and the styling and the layout of this pass. And this MLB pass also has some really beautiful images. We have a logo that's an image on the top left-hand corner and we have a strip image that spans that pass. It really makes that pass come to life.
And when we package all of these things up together we get what is called a PKPass file. And the file hierarchy looks something like this. Your PKPass file will contain the pass.json and those images we talked about and there are a couple of other files in there I want to point out. First of all, there are localized strings in here. Yes, passes can be localized, I will encourage you guys to do so.
You'll also notice on the bottom, the manifest file and a signature file. Our passes are cryptographically signed so that their authenticity can be verified and that the users know that the pass came from a known entity. This is great. So now with a PK pass file and this is now just a generic pass file.
How do we make this unique? How do we make this your pass? Well we use three different values to be able to determine the uniqueness of your pass. The first one is the teamIdentifier and this is just a 10 character string that you can find in the developer portal and we use this to entitle apps to gain access via PassKit, our framework.
The second value we use is a passTypeIdentifier. And now this defines the class or the category of passes that this particular pass is. You register for this in the developer portal as well. We also use this value to group passes together. And lastly, we have the pass serialNumber. And now, this is unique for every single pass. And it's completely chosen by you, and opaque to us.
Now, when we combine this value, the serialNumber with a passTypeIdentifier, we get our guaranteed global uniqueness for your pass. Along with all of these values, the pass.json is also where you declare your pass' relevancy. Let's take a look at relevancy now. Relevancy can be determined by three different categories.
You can use date. You can use location. And you can use beacons. And it's the combination of these categories that make these passes really, really powerful. So let's take a look at how we implement relevancy on our pass.json. We have a few keys. First of all, we're going to take a look at the locations key.
That takes an array of dictionaries and that dictionary will contain in it a latitude, a longitude and an optional relevantText. This relevant text will then appear when your users in that locate or near that location. So it's good to declare those to be able to clarify to your user exactly why that's shown to the user. And then we have the relevantDate, and that's just your standard W3C format, relevantDate, and then we have our beacons.
The beacons key is an array. Inside that array are dictionaries, the proximityUUID will uniquely identify your beacon. Again, we have that relevantText and the optional name field here as well. Again, it's when you combine all of these relevancy categories together is when you make your passes really, really powerful. And it's a great surprise in the live feature for your users as well.
Passes are only interesting to the user when the information on them is up to date. So how do we keep our passes up to date? Now, I'm going to give a very high level glance at how this works, and I'm going to refer to a WWDC talk we gave back in 2012 that goes really in-depth into this topic. Let's take a look at this now.
So your server will implement the Apple Push Service. And we utilize the Apple Push Service to start a pass' update. We get pass down, a passTypeIdentifier. That's what we talked about a couple of slides earlier. With that passTypeIdentifier, we then look at your pass.json and look for the webService key.
That webService key will contain a URL that we can hit and ask for updated passes. And then we get brand new .pkpass files with updates on them sent down to our devices and we update the user's pass. Now that's a very high level view of how this works.
I would highly recommend going back to that WWDC talk from 2012 and dig into how to implement a web service for your passes. Okay. This is great. Now, let's take a look at how we can programmatically get to these passes. We do have PassKit after all inside iOS. Let's see how we use it.
The main class that we're going to be using in PassKit is PKPassLibrary. This is your link. This is what you are going to use to be able to query your user's passes, and access to it is gated by entitlements. We talked about that a little bit earlier, using your passTypeIdentifier. Let's take a look at some of the methods inside PKPassLibrary.
First we have a function that asks, is the PassLibrary available on this device. This is a very good question to ask. When we get a positive answer back, you can then get passes. When you call passes, you will get back an array of PKPass. And these are all the passes that you are entitled to see.
You can also find a particular, a specific pass that you are looking for by calling passWithPassTypeIdentifier, serialNumber, passing it the identifier string and the serial number string. That will get you the exact pass that you are looking for. We also have another one called passesOfType, passing a PKPassType. And you may wonder what are all the different pass types? Well here they are there's Barcode, there's Payment and there's Any.
So you may ask yourself, Danvin, why would you want to get passes? Why do you want to see your user's passes. Well as a developer you may want to know -- any of your passes that your users already have on the system so you don't duplicate things again.
For payment passes, we're going talk about earlier, banks and other merchants may want to be able to activate payment passes from your users' pass library. We will get into that when we get into the Apple Pay section. Now we have our passes together, they're beautiful, they're relevant, they're up to date, how do we get them in the hands of our users.
Well the PKPass file is pretty portable, so you can host them on a website, you can email them to your users, you can even include them inside your apps. And I want to point one neat little feature, we give special treatment to PKPass files inside our iOS apps like Mail.
When we receive a PKPass file in our email Mail will give it some special treatment with this action button and you can see exactly what PKPass file is in that email. And if you host this on a website or put this on an app, we even have a banner for you, you can include inside your sites and on your apps.
But you may be telling me, Danvin, you know that says Passbook. I know. I know this says Passbook. This is a good little transition for me to talk about. We are in the middle of a transition. We are moving from Passbook to Wallet. And for now, in the public, we are still known as Passbook. So be aware of that.
But please stay tuned as we get closer and closer to iOS 9's release, we will keep you up to date on this topic. I'm really glad we got to talk about that. But let's say we want to add these passes programmatically, how would you do that? Well, PKPassLibrary does that. We have a function in there called addPasses.
That's right, multiple passes. Why would you want to do this? Well, consider a flight with multiple segments and you want to be able to ingest all the passes all at once. This is a great way to do that. So addPasses withCompletionHandler will alert the user with a small and very subtle dialog to add these passes into their library. Please make sure before you call this that you already denoted to the user that they are about to add a pass.
We do have one more way to add passes into the pass library and that's using PKAddPassesViewController. you may have seen this before if you have added passes to Mail. It looks something like this, you tap on a pass, they call PKAddPassesViewController and we get this nice beautiful view controller fully rendered out with an action up top for the user to choose.
How does this work. PKAddPassesViewerController has a function that checks can you add passes to this device? And then like before, you can add a single pass, or multiple passes. So you knit one of these guys and then you just show this view controller and we take care of rendering that pass for you.
Great. Now we can add passes. We can keep them updated. We can keep them relevant. But how do we keep these passes engaging? All right. We want our users to keep coming back and take a look at our passes. So I have a few tips for you to keep our passes engaging. As I mentioned before relevancy is a big deal. Relevancy will give that big surprise in the life, kind of feel for the users. You want to keep our passes updated. For example, this pass, this boarding pass, it's useless unless we have the latest gate information.
Users want to come back and keep looking at your passes. Images are great. For example, this MLB pass that we looked at has this strip image that spans the entirety of the pass. It really brings life and also brings clarity as to what this pass is actually for and what it does. This is called a strip image. You notice that there's no extra information there. It's just for context. It's beautiful! And lastly, I want to talk about formatting.
Formatting is tricky. But we take care of this for you. And now we know we have different devices with different screen sizes. And so what I recommend is you take a look at our HI guidelines on the website follow them and we will do our very best to make your passes look really great on all of our devices.
Great. These passes have been really, really useful. They really let us take action in the real world. But they are not as slick as what that experience with Apple Pay is yet. So how do we make that experience a lot better? Well, let's talk about where we go from here.
Let me give you a scenario. So the other day, I go to my local neighborhood grocery store, and I pick up my things and I'm ready to check out. Great, they take Apple Pay. As I head to the terminal, the clerk is ringing up my things and I get my phone ready to pay with Apple Pay.
All right. They are done ringing up my things and I bring my phone to the terminal and... do you have a loyalty pass with us? I think I do. The clerk is really -- really adamant about this loyalty card. I think it's in that big fat wallet of mine. Oh, I can't find it right now. I know it's on my phone number. It's got to be registered with my phone number. I blurt my phone number to the clerk.
Nope. It's not registered with that phone number. I'm frustrated and the line is two or three deep. I just blurt out my mom's phone number because I know my mom has one of these things. Great. That works! And I now can Apple Pay and I grab my things and I'm out the door.
So a lot of bad things happen there. For me as a consumer, I just want to pay. I want to get my things and be done. For the merchant, they just got the completely wrong loyalty information. They got my mom's loyalty information, not mine. So we want to make this better. And that's why we are introducing passes that work with Apple Pay. Passes that work with Apple Pay transmit your loyalty information, contactlessly along with your Apple Pay transaction.
We use the Value Added Services Protocol and we have been working with major terminal manufacturers for the adoption of this new protocol. So now, my scenario looks more like this. I go to my friendly neighborhood Walgreens. They take Apple Pay, great, I use the new iOS feature and double tap on my home button and I can prearm my card. I can get my card ready before I even head up to the terminal.
Great. My card is ready and I head up to pay for my things. When I put my phone on the terminal, my Walgreen's loyalty information is transmitted contactlessly, along with my Apple Pay information, all in one tap. That's it! I give a friendly smile and a thank you to the clerk and I'm out the door.
That is great! That makes the process a lot more smooth. So how do we do this? How do we add this feature into your passes? We have a new key. It's pass.json. It's nfc. Nfc is a a dictionary that takes a message. Just kind of like a bar code, this is the loyalty information or anything that links this user, this identity to your system. We have an optional encryptionPublicKey.
And this guarantees authenticity, this is something handshake yourself between merchant and your terminal. So this is how you implement passes that work with Apple Pay on your passes. And now if you are a merchant or a terminal maker and you are interested by this, please come see us. Our developer relations team will be here this week and you can contact them. I will give you the contact information after this talk. And let them know you are interested and we will get you started with passes that work with Apple Pay.
Speaking of Apple Pay, Apple Pay has been great, like I mentioned before. We have now enabled contactless payment on our phones, on our watches, and even we have enabled APIs so you can take Apple Pay inside your apps. And Apple Pay is great because there's a seamless payment experience for your users. And merchants are seeing higher conversion rates across the board so we want to encourage our users to add Apple Pay cards into their devices.
How do we do that? We are giving you a couple of APIs to enable this. There's two. The first one will take your users directly to our Wallet app and start setup from there. And a second one, that allows you to set up these cards from within your app. Let's take a look at that first one. It's in PKPassLibrary and it's very simple.
We call openPaymentSetup. And that will take your user directly into Wallet, and start the setup flow. And now with our new features in iOS 9, your users can go really easily back into your app and we leave a little bread crumb for them to tap on and go back into your app and do continue to do whatever they were doing. Hopefully shopping.
And if you are a bank or if you are a merchant with a store card or a private label card, you want to have this happen inside your own app, we have an API for that as well. It's actually a view controller, it's PKAddPaymentPassViewController. And of course we need to check whether this particular device can add a payment pass or not.
When we find out it can, we set one of these up, we can knit it with a requestConfiguration and we pass into it a delegate. Now this delegate that you implement inside your app, will form together using those pieces of information, like the nonceSignature, will form up a AddPaymentPassRequest.
We can really dig into this for a long time. I really don't have time in this particular session to dig into this. So please refer to your documentation if you have any questions about how to use this class. And this class will be entitled. So please let us know as well if you want to use this inside your app. Another necessary step that our users might need to take when they are adding a payment pass inside Apple Pay is a payment pass verification or second factor auth as some people know it.
And along with the typical flow, like using SMS or a phone call or email, another option we offer is using an app. We see here Capital One using their app to verify their user's identity. How do we do this? Well, we give you guys a couple of APIs to be able to allow this inside of your apps.
It's also in PKPassLibrary. You check first, is there a payment pass activation available? Remember when we were pulling PKPasses out of the user's library? Well this is where it's useful. You can pass into this call, that PKPaymentPass and pass into it some activation data and you'll get a completion back whether that activation was successful or not.
That's how you can implement verification inside your apps. So our phones have been really, really popular and there's awesome and really, really great accessories out there. Some of them emit a field and we want to be good players with those accessories. We are announcing with iOS 9, a contactless interface suppression API. What this will do is temporarily disable the user interface. It's the sheet of passes that you see and this will require a user's permission.
Let's take a look at how we do this. It's in that PKPassLibrary again. PKPassLibrary has a new function called requestAutomaticPassPresentation SuppressionWithResponseHandler. It's a mouthful! And what you will get back is a response result of what the user decides, whether or not they will allow suppression inside your app.
You also get back a request token. Then you can use that request token for this next call to endAutomaticPassPresentation. Pass into it, that requestToken, and the payment UI will appear again inside your app. You can also check whether automaticPassPresentation Suppression is already occurring by using this function right here.
As I mentioned before, it is temporary. So if your app is suspended, the payment pass UI will appear again for the user or if it's been 24 hours after your last requests, you will need to re-request your user's permission again. These classes and these calls are entitled. So please let us know if you would like to use them.
Along with Apple Pay, last fall we also introduced Apple Watch. And now I'm really happy to announce that in watchOS 2, we are bringing full PassKit support to Apple Watch. And this is really great because now on Apple Watch, you can add, you can remove, you can query passes just like up doing on our phones previously.
So full PassKit support is coming to Apple Watch and watchOS 2, there's another thing I want to talk about in regards to Apple Watch and that's the screen size. Working with a lot smaller real estate space on Apple Watch, and I want to point this out, because passes are drawn a little differently on Apple Watch.
This is a pretty cool graphic. This is what a pass rendered on Apple Watch looks like. As you can see this is our MLB pass from a couple of slides back. And you will notice right away it looks a little different. That strip image is no longer there. And, in fact, we don't even have a back of the pass.
So take a look and remember, passes do look different on different devices, especially on Apple Watch. So consider that when you are designing your passes and implementing them. But, of course, if you follow the HI guidelines, we will promise and do our best to make your passes look great on every single one of our devices.
So that's PassKit and Apple Watch. There's one more thing I do want to talk about. And that's 1D bar codes. We have been getting a lot of requests for 1D barcodes and I'm really glad to say that iOS 9, we are bringing 1D Barcode support to Wallet. Yeah.
[ Applause ]
I'm glad you are glad. So we have a new barcode format. It's PKBarcodeFormatCode128. You may ask what about my users that are who are still on iOS 8 and below, are they going to get this? Well, no. That's why you will have this fallback. We still have that barcode key. That barcode key is very, very important but we have here is implementing that 2D barcode. We have a new barcodes, plural, key that is an array that takes in a dictionary of barcodes.
So, as you can see, we have a new barcodes array here that has in the first dictionary, a barcode with PKBarcodeFormatCode128. And that's the 1D barcode. So please, please, as you are implementing this, do me a favor, please verify your system supports 1D barcodes and what I really mean is optical scanners.
And please remember to fall back to 2D barcodes so that your users on iOS 8 and below have a barcode on their passes. All right. I have done a lot of talking this morning. If I had to say that you should remember something from this session, it's these things: We're solving that overstuffed wallet problem.
We don't want that wallet anymore. We don't want to see that wallet anymore. We do that with passes. Passes allow us to take action in the real world. They are really easy to integrate into your apps, into your flow. And passes when they are engaging really keep your users interactive and interested in your systems. And I want to remind you to integrate Apple Pay into your apps. Encourage your users to use Apple Pay into their apps. Remember you want that smooth and seamless checkout flow and we also want the higher conversion rates for our merchants.
I didn't even talk about integrating Apple Pay as a payment inside apps at all. This session cannot contain that awesomeness. We have our own session immediately following this one, give by my colleagues Nick and Rachel, and it's going to be really, really amazing. They will solve that abandoned cart issue. They're going to help integrate Apple Pay into your apps.
Remember, please use Wallet and use Apple Pay. Go out there and redeem coupons. Go out there and spend money! I mentioned a lot of resources during this talk and I want to point a couple of them out to you. First, we have Passbook for Developers specific site on our developer website. We also have one specific to Apple Pay as well. And I mentioned a couple of talks from previous WWDCs.
Here's one from 2012, it's called "Introducing Passbook Part 1 & 2" that's really going to go in depth into designing passes and updating passes as well. And then "Integrating Passbook Into Your Ecosystem" which is WWDC 2013. These are really great resources for you guys to check out. And of course we have our developer forum that you guys can utilize as well.