People use the Wallet app to view and manage passes—digital representations of information that is otherwise printed on small pieces of paper or plastic and kept in a physical wallet. Passes are used to take action in the real world, such as to board a plane, enter a venue, or receive a discount. Wallet also stores transit cards, and credit, debit, and store cards used by Apple Pay.
Types of Passes
The PassKit framework makes it easy for apps to access, create, distribute, and update passes. This framework implements several templates, each of which defines the layout and fields for a specific style of pass.
|Boarding pass||Train tickets, airline boarding passes, and other types of transit passes. Each pass usually corresponds to a single trip with a specific starting and ending point.|
|Coupon||Coupons, special offers, and other discounts.|
|Event ticket||Entry into concerts, movies, plays, sporting events, or other events. Typically, each pass corresponds to a specific event, but you can also use a single pass for several events as with a season ticket.|
|Store card||Store loyalty cards, discount cards, points cards, and gift cards. If an account related to a store card carries a balance, the pass usually shows the current balance.|
|Generic pass||Any other type of pass, such as a gym membership card or coat-check claim ticket.|
Designing Great Passes
Design a pass that looks great on all devices. Be mindful that passes appear differently on different devices. For example, strip and thumbnail images aren’t displayed on Apple Watch. Don’t put essential information in elements that might be unavailable on certain devices. Note that, even if you don’t create a watch-specific app, people can add your passes to their Apple Watch.
To the extent possible, avoid reproducing existing physical passes. Wallet matches the general design aesthetic of iOS to build trust and familiarity. Instead of replicating the appearance of a physical item, take this opportunity to design a clean, simple pass that follows the form and function of Wallet.
Avoid using a plain white background. A pass looks best when its background is a vivid, solid color or an image with strong, vibrant colors. As you design the background, make sure it doesn’t interfere with the readability of the content.
Use pass fields to display text. Each pass style defines fields that give your pass a consistent look and work with accessibility features. Avoid embedding text in images because not all images are displayed on all devices. Avoid using custom fonts that make text difficult to read.
Avoid using device-specific language. You can’t predict the device people will use to view your pass, so don’t include language that might not make sense on a particular device. For example, text that tells people to “slide to view” content doesn’t make sense when it appears on Apple Watch.
Be selective about the information on the front of a pass. People expect to glance at a pass and quickly get the information they need, so the front of a pass should be uncluttered and easy to read. Show important information, like an event date or account balance, in the upper-right field of the pass so users can see the information when the pass is collapsed in Wallet. If there’s additional information you think people might need, put it on the pass information screen. Note that passes don’t include an information screen on Apple Watch.
Use the logo text field for your company name. Text in this field is rendered in a consistent font on all passes. To avoid clashing with other passes in Wallet, consider entering text here instead of using a custom font.
Update passes when appropriate. Even though physical passes don’t typically change, digital passes should be updated to reflect real-world events. An airline boarding pass, for example, should be automatically updated to reflect flight delays and gate changes.
Display barcodes only when necessary. When a contactless pass can be strictly accepted using Near Field Communication (NFC), there’s no reason to show barcodes. Instead of scanning barcodes, people just hold their devices near your readers.
Prefer rectangular barcodes. A square barcode creates empty gutters on both sides and can vertically crowd the fields above and below it. Because of the layout of a pass, a rectangular barcode—such as a PDF417-style barcode—typically looks better.
Optimize images for performance. People often receive passes via email or Safari. To make downloads as fast as possible, use the smallest image files that still look great.
Adding Passes to Wallet
Automatically add new passes to Wallet. Anytime a user action results in a new pass—like when checking into a flight, purchasing an event ticket, or registering for a store reward program—your app should immediately ask for permission to add the pass to Wallet. Generally, this should occur when the user reaches a confirmation page, and without the user needing to click an Add to Wallet button.
Suggest adding passes that were created outside of your app. After a user creates a pass using your website or another device, suggest adding it to Wallet the next time the user opens your app. If the user declines to add the pass, don’t ask them again.
Add related passes to Wallet as a group. If your app generates multiple passes, such as boarding passes for a multi-connection flight, add all passes at the same time so the user doesn’t need to add each one individually.
Make it easy for people to quickly add passes that aren’t already in Wallet. A pass may not exist in Wallet if the user previously declined to add it, if they removed it from Wallet, or if they generated the pass outside of your app—such as on your website. When a pass doesn’t exist in Wallet, display an Add to Wallet button wherever the corresponding pass information appears in your app. This button should be discoverable with minimal navigation. For developer guidance, see addPasses(_:withCompletionHandler:).
Let people jump to their passes in Wallet. When a pass exists in Wallet, display a link to View in Wallet wherever the corresponding information appears in your app.
Enable passes to contextually appear at appropriate times and locations. Whenever possible, passes should automatically appear so people don’t need to manually locate them. When you tag a pass with date, time, and location information—it’s best to provide all three—the system automatically displays the pass when the user needs it, like the moment of purchase or when checking into an event.