Wallet and Apple Pay: Creating Great Customer Experiences
Get the latest news and updates from the Wallet and Apple Pay team. Learn how iPhone and Apple Watch can power innovative commerce experiences. Hear about the latest design best practices for Apple Pay. And discover how to create your own contactless passes for rewards cards, gift cards, tickets and more.
Welcome, and hello. I'm Ben Chester, a software engineer on the Wallet and Apple Pay team. And, I'm here today to talk to you about how to create great customer experiences using Wallet and Apple Pay. And to do that, we're going to cover four topics, and see a fantastic demo from my colleague. Firstly, we're going to cover some of the key things that have happened in the last year.
Secondly, how to create great experiences with Apple Pay, using some of the new enhancements we're announcing today.
Thirdly, how to get the most from passes. There's some updates to designs, and some new changes you can adopt for richer content. Finally, we will talk about digital to physical commerce. And, to do that I'm going to show you an example that we use every day at Apple Park, the Caffe Mac's app, and some others. So, let me first start by telling you about Apple Pay Cash.
Apple Pay Cash makes it easy to get paid, and pay friends and family using iMessage. Now, you can pay in-store, with apps, and on the web. And, it's available in the U.S. Most importantly for you, ensure you accept Discover debit in your apps, and with your payment processor, so you can take Apple Pay Cash.
Another feature that we announced last year, that is even a greater option, is inline setup.
Now, inline setup lets your users with no cards set up one, and then return to the purchase in one step. All you have to do is always show the Apple Pay button if the device supports it. If the user has no cards, you can use the Set Up with Apple Pay button, shown here, to make it even clearer to the user.
Now, when the user taps that button, the setup flow is presented inside of your app, which reduces the risk of users leaving your experience. And, this is commonly known as abandonment.
And, to support this, no additional work is required from you.
Once the card is set up, it returns the user to the purchase immediately. We even automatically activate the card via SMS.
Now, even with all of this, it's still faster than manual entry. And, you should adopt this in your apps, if you haven't already, for a great user experience.
That's not the only feature we announced in the last year. To help with faster checkout, we also introduced error handling, and that's been great for developers. Error handling gives you control over nonfatal errors in the Apple Pay Sheet. And, this allows you to provide your own custom error messages to the user for billing and shipping issues. And, that's so they can more easily resolve those issues, and get back to purchasing. And, that's great for higher conversion. Now, some tips for error handling. One thing we want to make clear, is that it's still important to expect fuzzy data. The user has one set of data in Apple Pay, and that's shared across many apps and websites. And, we don't want the user-- don't want to force the user to conform to everybody's individual business logic, as that requires the user to reenter information, which just increases friction, and will reduce your overall conversion rate. Instead, you should do your best to accept a range of inputs. For example, Zip and Zip + 4.
And, infer what details you can from other fields such as city and state from Zip.
Now, that's not all the features that we announced. We also launched in some new countries.
And, you may remember this slide from last year. Well, this year, we're introducing the following countries, and we're also coming to Norway and Poland soon.
Now, that's a great range. But, one country I want to talk about in particular, is China.
This year, we've taken Express Transit to China, launching with Beijing Transit, and Shanghai Transit. Now, this works fantastically. You can buy a card directly from Wallet, and get going straightaway. But, Transit is not limited to China alone. You can use Apple Pay to ride throughout the world, anywhere credit and debit cards are accepted, such as Moscow and London. Well, that's it from updates from the last year. Let's talk about creating great Apple Pay experiences.
What is a great experience with Apple Pay? Well, it's one that is easier, by allowing the user to checkout as early as possible, with what we call upstreaming. It's one that is faster, by making Apple Pay the default payment option, with what we call defaulting.
And, clearer by making the Apple Pay flow as simple as possible, with what we call streamlining.
Now, I want to go through each of these, starting with streamlining.
Here we see a fantastic example of streamlining. The Apple Pay button is directly placed on the product page. And, this makes it so easy, as Apple Pay is the user's flow as possible. Now, if your experience instead is focused on multi-item checkout, then placing the Apple Pay directly on a product page might not work so best for you. Instead, you should focus on Express Checkout. In this example, the customer has the option to checkout with Apple Pay right from the basket, and the user should be able to reach this checkout from anywhere in your flow.
And, you can combine both of these experiences for the best results, if that does make sense for you.
Whenever you use this Apple Pay button, it's critical to use the one provided in the SDK. Let me tell you why.
Well, it's localized in all device languages. And, it's available in a number of styles and colors.
It scales across all the supported devices, and any changes that we make, you're going to get for free in the future. It's also supported all the way back to iOS 8.3, and WebKit 10.1 on iOS, and macOS 10.12.1.
However, we're heard that the button does not always fit all of your needs, and so today, we're announcing three new types in iOS 12. And, I want to show you them now.
The first one is Book with Apple Pay. Now, you should use this when booking a hotel, or with a ride-sharing service, for example.
Simply pass the new Book type to start using it.
Secondly, Subscribe with Apple Pay. Use this for subscription-based purchases. Pass the subscribe type. And, thirdly, Check out with Apple Pay. This is best used if you have multiple references to checkout on the same page. Now, this really makes it clear to the user exactly which checkout performs Apple Pay. That's not all the changes to the button. You know that we love rounded corners and continuous curves, but we understand that not everybody shares exactly the same feelings, and so this year, we're allowing you to control the corner edits of the button. You can configure this however you see fit to match existing styles of your apps or websites.
If you want square corners, simply set the button radius to 0. And, if you set no value, our existing corner radius will be used.
Now, similarly, on older versions, the button will fallback to using the current rounded corner radius, ignoring any value that you've set.
The new types and corner radius are available in iOS 12 today. And, they're coming to WebKit in a future release.
Most importantly, fallback to using older types on unsupported versions. Consider that cascade. Using the new types will help your customers purchase more easily and clearer than ever before. Now, the placement and use of the Apple Pay button is one way to make checkout easier. But, that benefit to customer experience can be multiplied if you combine this with guest checkout.
Now, you should think about guest checkout as your user's first experience. Now, blocking first-time purchase increases friction, which can lead to abandonment, as we described earlier.
The user should want to create an account with you, not have it forced upon them. Apple Pay offers you a great way to do this.
You can use data from the Apple Pay sheet post-purchase to make account creation easy. I want to show you an example of that.
As soon as the purchase is complete, and the confirmation is displayed, account creation is now offered. User's email address from the Apple Pay transaction has been used, and all the user has to do is enter a password to confirm the creation of the account.
You can make this even easier, using password AutoFill, and the enhancements that we've added in iOS 12.
So, that's everything for upstreaming. Now, let's cover making things faster with defaulting.
Most important thing about defaulting is that your users will look for and expect Apple Pay.
So, you should make purchasing faster by setting Apple Pay as the default option.
And, Apple Pay is a great default option, because it has the user's most up-to-date customer information.
Even if the user has no card set up in Apple Pay, as we showed earlier, it still makes a great option.
Let's see an example of defaulting in action.
Here we see Apple Pay as the default option right at the top, and the Buy with Apple Pay button is clearly visible, and easily reachable by the user.
If you apply these guidelines, you can make it faster than ever for your users to checkout with Apple Pay. So, that's easier and faster ways, but let's look at how to make things clearer with Streamlining. Most important piece of information about Streamlining for you, is to prefer customer information from Apple Pay.
Users have this data already set up, and you can make their experience clearer by using it. When you request user's data, it's important to only request relevant fields. Any additional fields that you add will only make things more difficult. If data is needed that Apple Pay does not support, you should collect this before checkout begins. For example, the number of items of a particular product, or a voucher code. Now, this year, we've helped to streamline the Apple Pay experience even further, by making two changes. The first one I want to talk about is zero total support, and I want to show you why that's important.
Here we see the Apple Pay sheet with a discount being applied, and the total is above zero. But, if that discount had brought that all the way down to zero, we've previously not been able to present this sheet. Well, now we do. You can see the discount has brought the total to zero. Apple Pay sheet can still be used to collect the necessary shipping details, and other information you need for the purchase. And, zero totals also work well with subscriptions. If the introductory month is free, you can make this clear to the user with a zero total.
Now, remember, it's important to clearly state the price of the subscription, as well as the promotional discount they can receive.
Zero total support is available in iOS 12 today. And, it's coming to WebKit in a future release.
Make sure to fallback to existing behavior on older versions, where zero total is not supported. Now, the second way we have made the experience more streamlined in iOS 12, is with three new supported networks. And, this means you can filter the cards in the Apple Pay sheet more granularly.
And, there are three new networks: Electron, Maestro, and VPay.
It's important for the best possible experience to accept as many networks as you can.
These are available in iOS 12, and coming to WebKit in the future.
So, we've covered ways to make things easier, faster, and clearer with Apple Pay.
I hope you will try these all out, and make your experiences better than ever, using our new enhancements.
Let's compare the benefits of using one over the other. The Payment Request API is a cross browser solution, however, it's important to know that Apple Pay is only supported on Safari.
If you choose the Payment Request API, you do miss out on some of the following features.
Error handling with custom error messaging, as I showed you earlier. But also, automatic selection of affiliated and cobranded cards. And, therefore, your ability to adjust prices of the user's selection of these cards.
In markets and regions where it's important, phonetic name collection is also not supported.
The demo page walks you through all the steps required to get set up. And, it all starts with the Apple Pay button.
You can configure sizes, and styles, and locale, and see how they change in real time. The code required to drill the button is dynamically updated below. And the page even allows you to test out the Apple Pay purchase flow.
Simply configure the JSON in the request inside the page, and the Apple Pay button there will be used to present the payment sheet.
The results of the authorization and success or failure are displayed to you directly. Now, it's important to note, your cards will not be charged when you do this.
It's a great resource to get started, and I hope you try it out.
The demo page is available here online today. And, that's everything we have for covering Apple Pay today. So, now I want to move on to talking about getting the most from passes.
Passes are where it all began for us, and they hold a very special place in our hearts. And, we have some fantastic improvements I'm going to tell you about. But first, I just wanted to recap what makes passes so special.
They are so easy to use contactlessly or with a bar code. And, they're synced across all your devices using iCloud. And, we're able to intelligently show them on the lock screen and in Search for quick access. And, they continue that seamless Apple Pay experience into the physical world, which works great for tickets, movie passes.
Those are great reasons why you should use passes. But, how do you get the most from passes for your users? Well, to do that we're going to cover four topics. And, we're going to start by talking about adding passes to Wallet. And, we have some best practices that you can follow.
Secondly, making passes look great. There's some new design options, and some tips for making passes work across all your devices.
Thirdly, rich pass content. New ways to make your passes more deeply integrate with the system. And, finally, contactless passes, and how you can get started. So, let's begin with adding passes to Wallet. Many of you have seen or experienced the full model UI that was presented to add passes. But, there's a better way.
For almost all situations, we recommend using our automatic pass adding API.
To use this, simply call the addPasses function in PKPassLibrary, with the array of passes you intend to add.
Now, this presents a simple alert to the user, requesting them to add or to review those passes. And, that's much less friction compared to the full-screen model UI. And, the user still has the option to review the passes in full. And, you should handle that in the completion, and present that viewController if requested.
In the demo you're going to see later, you'll see how this improves the experience. So, let me tell you about some other best practices to follow for adding passes.
Now, we suggest adding passes that were created outside of your experience, when the user enters the app for the first time, if they're coming from an unsupported platform. They've not previously had the opportunity to add those passes, and that's a great time to offer it to them.
And, you should add related passes to Wallet in a group, to reduce the friction. And, you can make it easy for people to quickly add passes that they do not have from your order history views, or previous transactions, for example.
And, from those same views, if your user has a pass in Wallet already, you should link them directly to it. So that no matter where the user starts their journey, in Wallet, or your experience, they can get to the pass. If you follow all these tips, and use automatic pass adding, your users will love passes. But, how do you make a pass that looks great? Most important information for you is that the pass fields that you display to the user should have the relevant and critical information on them. And, there're things that the user definitely needs. And, you can make them stand out by using vibrant colors. And, you should design a pass that looks great across all your devices. Now, to do that, you want to avoid reproducing existing passes, physical ones. We have some great templates, and layout options to make these fields stand out and make sure that your entire audience can work with these passes as they're accessible.
And, secondly don't encode user information inside the strip image that we can see here. You should reserve that for the fields. That's particularly important on Apple Watch. Because there's no space to display that. And, the fields are front and center.
Similarly, the thumbnail image is also not displayed, and the user cannot access the pass details.
So, but we know sometimes there's information that's difficult to put all on the front of pass. And so, today we want to make things a little bit easier for you by adding additional row support. Let me show you that in action first. Here we see a new third row enabled, showing the section and the start number.
Now, that's a great way to layer additional content, when your existing information is already a little bit long.
And, this is really easy to add to your passes. Let me show you how to do it with a pass JSON.
Here we see the new row key be using the auxiliaryFields, by setting a 0 or a 1. You can indicate that the field should be split over the two locations on the front of pass.
"Row" can only be used in the auxiliary fields, and only for event ticket-type passes. We support values of 0 and 1, and that's going to be coming to you in a future seed.
On older versions, "row" will be ignored. And, in that case, auxiliary fields will be displayed on one row, up to a limit of 4 fields per row.
So, make sure you consider this when designing your passes. And, test across supported devices and versions.
So now, we've got passes in Wallet, looking great. How do we make that content even richer? Let's get the most from a pass. You can include information that the system can leverage to provide the user enhanced experiences. And, one of those you may already know about, is relevancy. You can add relevancy by setting the locations, relevantText, and relevantDate pass JSON fields. And, this allows the system to present the pass to the user just at the right moment. We handle multiple relevant passes. And, if you're issuing passes for a single journey, multiple ones, then you should make sure to add relevancy information for each pass. And, allow the system to correctly present them one at a time to the user. It's not a problem at all. Now, it feels like magic when their passes are so easy to access. And, to date we're looking at making passes even richer, with something we call semantic tags.
The fields that we showed earlier in the pass JSON are a great mechanism for display. And, as the developer, you have full control over the field names, and the format of that content. However, that means it's difficult for iOS to reason about every field. As everybody uses unique key and label names.
Semantic tags changes that by providing a structured way for you to augment the display data with a fixed format data. Let me show you how easy it is to add to an existing pass for an upcoming film I'm going to see.
Here we see a sample of primary, secondary, and auxiliary fields from the pass JSON.
This film's called "Revenge of the Passes." It's showing at Apple Park, and it's running for two hours and 45 minutes in theater F5. Now, that's all the information I'm going to need when I get there to see the film. And, it's going to be readily available to me.
So, let's take that event field at the top, and add some semantic tags to it.
To do that, we add a semantics dictionary to the field. And, inside that dictionary, you can have relevant key names from my documentation to provide machine-readable content.
For example, with the movie, the name used for display may differ from the full official name used internationally. And the same might apply to your venue name. These should be the official names that are different from display.
You're also able to add additional related data that is not important for display, but associated with that field. For example, the phone number. Now, sometimes, you have semantic data that is not associated with fields. And, to capture that, we can use a top-level semantics dictionary. Here, I've added a semantic tag indicating that while this pass is relevant, silence should be requested. I've also indicated the duration of the event in seconds, and specified the event type. You may have seen this in the Keynote, Siri will then be able to offer the user the ability to quickly enable do not disturb at the right time. It just works. And, it's great for things like movie tickets, or event passes.
Now, in summary, semantic tags are a great way to add machine-readable content to your passes. And, we have over 70 supported transit and event tags. All these keys will be available in our online documentation soon.
And, one important thing to note, relevancy information works in combination with semantic tags. And so, you should add both to your passes for the best experience.
Now, bringing all this together, I want to talk to you about contactless passes.
Contactless passes are a great way for users to interact with Wallet. And, it's a much improved experience over scanning a barcode.
I want to show you one of our favorite uses of contactless passes.
Internationally renowned, Wembley Stadium in London had famous football players record an advert just to show how easy it is to use. It really couldn't be any easier. And, that contactless feels like magic when you combine it with relevancy for lock screen access, swiping down for notification.
Contactless passes do require an NFC certificate to get started.
Now, you should contact us for access if you have a great use case. One other important thing to remember is that contactless readers you select must support Apple's value-added services protocol.
However, that's easier than ever. You can find readers from any of these companies that support this protocol.
Now, one final use of contactless passes you may have seen in the Keynote, is student ID cards. Students will be able to use these to access and pay anywhere physical student ID cards are used today, right from Wallet. We worked closely with two companies to bring student ID cards to educational institutions across the U.S. Now for a demo of some of the features that we've covered here today. I would like to welcome to the stage, my colleague, Katie.
Thanks, Ben. Hi, my name is Katie, and I'm an engineer on the Wallet and Apple Pay team. Today, I'm going to be showing you a Swift application, where a user can purchase an event ticket for a party that I'm throwing this weekend for my team. My colleagues will be able to use the app in order to purchase a ticket, and make me a little money on the side. This app will demonstrate two things. First, how to use the best practices and new API's that Ben had mentioned earlier in order to create the most seamless Wallet and Apple Pay experience. And, second, how to structure your pass's JSON in order to enhance your customer's experience.
So, let's go ahead and take a look at this app. So, here we're presented with a summary about the event, a date, a time, a location, and a cost.
Here's an example of upstreaming, where we place the Buy with Apple Pay button directly on the product page.
So, let's go ahead and purchase this ticket. You can see, we're presented with the Apple Pay sheet, and this is a good example of streamlining, asking the user for the least amount of information possible. In this case, only their email address. So, let me go ahead and Face ID in order to complete this purchase.
Here, we're shown more information about what we just bought, about the event. And, here at the bottom we have a QR code, and all the way below that, obstructed from view, is an Add to Apple Wallet button. You might have seen many apps in the App Store today do something like this, embedding a QR code in their app. If you have a QR code on the front of your pass, there's no need to embed it within your app. So, let's go ahead and add this pass to Wallet.
You can see, we're presented with the pass for the user to review. It has information about the event, and a QR code.
So, let's add it.
Now, let's go over to the JSON, and-- for this pass, and see what changes we can make in order to enhance the customer's experience.
There are two major changes I want to make here. First, when people come to my event, I want to check them in using a contactless reader. And, second, when the user gets close to my event location, and in this case, Discovery Meadow, I want the pass to become relevant on the lock screen. So, let's first take a look at this barcode dictionary here. Since I'm going to be checking people in using a contactless reader, there's no need to have a QR code on the front anymore. So, let's remove this dictionary.
And, instead, let's replace it with an NFC dictionary.
Here, this dictionary contains information that we've passed from the device to the reader in order to identify them when they check in. Next, let's add location data to this pass, so it can become relevant on the lock screen.
Here, we set a latitude, a longitude, in this case it's Discovery Meadow, and relevant text that will be displayed in the notification on the lock screen.
Now, let's take a look at the Swift application, in order to see what changes we can make there as well.
Let's first take a look at this presentAddPass method. This was called when we tapped the Add to Wallet button.
Here, we got the pass from a function we called, called eventPass. Let's go ahead and replace this with our newly modified pass.
We then instantiated a PKAddPassesViewController with that pass, and presented it. But, as Ben had mentioned earlier, there's a better API we can use in order to automatically add passes to Wallet. So, let's go ahead and remove these two lines of code, and replace it with that API.
That API's on the PKPass library, so let's create an instance of that.
And, let's call the API.
The function's called addPasses. Takes an array of passes, has a completion handler with a status. And, there are three possible statuses that can be returned. DidAddPasses, which means the user wants to add the pass to Wallet. DidCancelAddPasses, which means the user does not want to add the pass to Wallet. And, shouldReviewPasses. In this case, the user wishes to be presented with a preview of the pass before deciding to add it to Wallet or not. And, if this is the case, you should do what we did previously and instantiate a PKAddPassesViewController and present it.
Now, let's go up to the viewDidLoad method. As we saw, there was a QR code here. Again, if your pass has a QR code on the front, there's no need to have it in your app. And, since our pass is now NFC-capable, we don't need this view anymore. So, let's go ahead and remove these lines of code.
Here is the PKAddPassButton, or our Add to Wallet button. In order to-- another way to enhance the user's experience is when the summary view is presented right after they've purchased the ticket, we immediately ask them if they want to add the pass to Wallet, rather than having a button onscreen. Of course, you can have this Add to Apple Wallet button somewhere else in your app, if the user decides to add the pass later.
So, let's go ahead and remove this button. And, instead, we're going to replace it with a View in Wallet button.
That way, the user can tap this button, and they'll be brought directly to a Wallet, and be shown the pass that they just added.
And, finally, when the view is presented, let's immediately ask them if they want to add the pass.
Now, that we've made these changes, let's deploy to the device, and see what it looks like.
Again, we're presented with the same view, a summary about the event. I'll go ahead and purchase this pass again.
And now, you can see we're immediately asked if we want to add the pass to Wallet. And, you can see in the background code, the QR code is no longer there. And, the Add to Apple Wallet button is replaced with the View in Wallet button. So, I want to add this pass to Wallet. And, let's go ahead and view it.
You see, we're immediately taken to the pass, and you can see the QR code is no longer on the front. And, instead we have a Hold Near Reader displayed at the bottom, meaning that our pass is now contactless, and I could scan it a reader when I arrive at the event.
Now, let's lock the device, and since we're close to Discovery Meadow here in San Jose, let's see if the pass is relevant on the lock screen.
Here's the notification for the pass with the text that we set in the JSON. Let's tap our notification.
The pass is immediately displayed, and I happen to have a contactless reader here on stage, so let's simulate me arriving at the event.
And, it's as simple as that.
We hope that you can adopt these simple changes in order to enhance your customer's experience when they interact with Wallet and Apple Pay in your app. And now, I'll hand it back over to Ben. Thank you Katie, for that fantastic demo. What an improvement those changes made to the experience. So, the final topic we want to cover today is digital to physical commerce. Now, using Apple Pay is a great way to buy, but that's not where the user's journey ends. It's important to carry through that seamless experience into the physical world.
Now, to do that, I want to show you two examples. Starting with the Caffe Macs app, that's used by thousands of employees every day at Apple Park.
Here, I launched the app, and I'm immediately presented with the best offers on offer today.
It's a great way to engage me. It doesn't require me to browse through all the items in the app. You might be wondering why you don't see the Apple Pay button immediately. And, that's because I'm not inside Caffe Macs.
As soon as I get close, using GPS and Bluetooth beacons, the app detects that change, and the button appears. This allows me to buy right from the starting page. It's a great example of upstreaming.
Sometimes I order more than one thing, and Caffe Macs has me covered.
They support both the multi-item express checkout, as well as a single-item purchase flow right from the product page.
I can also check out from anywhere in the app, using the Pay tab below. Now, this is a great pattern to follow to make checkout easy.
When I'm ready to pay, I Face ID, and I'm done. Here, you can see that following our guidelines, and requesting as little information as possible. I'm already logged in across multiple Apple apps, so no additional fields are required. However, if I wasn't, this would be a really great place for you to request the minimal information to make collection of the items easier.
Finally, a confirmation to let me know that the order's been done, and I should wait for a notification. As I walk over to the pizza station, the notification arrives to let me know that it's ready.
And, when I get there, my lunch is waiting for me. A ticket with my name on it, and a member of the Caffe Macs staff confirms me by name, and I'm away to devour my pizza.
Now, that's a great experience from start to finish. And, another experience that we love is a food ordering app from China, . Now, they start with using the iPhone's camera to scan a QR code when entering the restaurant. And, that takes them straight to the menu in the app. They use images in their menu to make it easy to know what you want, and how to checkout fast.
In the checkout flow, the app offers the user a virtual payment credential, issued by , which uses our in app provisioning flow to put a card directly into Wallet. Now, this works great even if the user has no cards at all, in Wallet or otherwise. They can set one up, and order right away.
And, the card that's provisioned can be used in all e-commerce, and in-store merchants anywhere in China that takes Apple Pay.
If you use a provisions card into Wallet, Apple Pay's the exclusive option to checkout. Fantastic example of defaulting.
As soon as I Face ID, the food is ordered.
That's a fantastic experience bringing together all of these technologies: GPS, beacons, the camera, in-app provisioning, and notifications. If you combine that with a great physical customer experience-- you know, if you leverage everything we've shown you here today, you too can build digital to physical commerce experiences. So, I have one piece of final housekeeping.
If you are a payment processor, or a merchant, most of you don't need to worry, but you should just check your server-side certificate expiry dates in the developer portal. They are easy to renew, and you should renew before expiry to avoid disruption taking Apple Pay. That's everything we have to talk about today. If you want to learn more, our online documentation can be found here. And, if you have any questions about Wallet, Apple Pay, or Core NFC, you can join us immediately after this session in Technology Lab 1 at 10 A.M. Thank you all for coming today, and I hope you've had a great WWDC. Bye. [ Applause ]
Looking for something specific? Enter a topic above and jump straight to the good stuff.
An error occurred when submitting your query. Please check your Internet connection and try again.