Field zones | laravel-mobile-pass | Spatie SPATIE Laravel Mobile Pass ====================== spatie.be/open-source [Docs](https://spatie.be/docs) [Laravel-mobile-pass](https://spatie.be/docs/laravel-mobile-pass/v1) Apple-wallet Field zones Version v1 Other versions for crawler [v1](https://spatie.be/docs/laravel-mobile-pass/v1) Field zones - [ Introduction ](https://spatie.be/docs/laravel-mobile-pass/v1/introduction) - [ Support us ](https://spatie.be/docs/laravel-mobile-pass/v1/support-us) - [ Requirements ](https://spatie.be/docs/laravel-mobile-pass/v1/requirements) - [ Installation & setup ](https://spatie.be/docs/laravel-mobile-pass/v1/installation-setup) - [ Getting credentials from Apple ](https://spatie.be/docs/laravel-mobile-pass/v1/getting-credentials-from-apple) - [ Getting credentials from Google ](https://spatie.be/docs/laravel-mobile-pass/v1/getting-credentials-from-google) - [ Questions and issues ](https://spatie.be/docs/laravel-mobile-pass/v1/questions-issues) - [ Changelog ](https://spatie.be/docs/laravel-mobile-pass/v1/changelog) - [ About us ](https://spatie.be/docs/laravel-mobile-pass/v1/about-us) Basic usage ----------- - [ Generating your first pass ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/generating-your-first-pass) - [ Delivering passes to users ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/handing-out-passes) - [ Adding images ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/adding-images) - [ Adding barcodes ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/adding-barcodes) - [ Updating a pass ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/updating-a-pass) - [ Retrieving mobile passes ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/retrieving-mobile-passes) - [ Expiring passes ](https://spatie.be/docs/laravel-mobile-pass/v1/basic-usage/expiring-passes) Available pass types -------------------- - [ Introduction ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/introduction) - [ Boarding pass ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/boarding-pass) - [ Event ticket ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/event-ticket) - [ Coupon ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/coupon) - [ Loyalty card ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/loyalty) - [ Generic ](https://spatie.be/docs/laravel-mobile-pass/v1/available-pass-types/generic) Apple Wallet ------------ - [ Field zones ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/field-zones) - [ Apple-specific methods ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/apple-specific-methods) - [ Pass relevance ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/pass-relevance) - [ NFC passes ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/nfc) - [ Attaching Wi-Fi credentials ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/attaching-wifi-credentials) - [ Storing mobile passes ](https://spatie.be/docs/laravel-mobile-pass/v1/apple-wallet/storing-mobile-passes) Google Wallet ------------- - [ Pass classes ](https://spatie.be/docs/laravel-mobile-pass/v1/google-wallet/pass-classes) - [ Object methods ](https://spatie.be/docs/laravel-mobile-pass/v1/google-wallet/object-methods) - [ Hosting pass images ](https://spatie.be/docs/laravel-mobile-pass/v1/google-wallet/hosting-images) Advanced usage -------------- - [ Handling errors ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/handling-errors) - [ Customizing actions ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/customizing-actions) - [ Customizing models ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/customizing-models) - [ Reading stored passes ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/reading-stored-passes) - [ Events ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/events) - [ Testing your passes ](https://spatie.be/docs/laravel-mobile-pass/v1/advanced-usage/testing-your-passes) Field zones =========== ### On this page 1. [ The add methods ](#content-the-add-methods) Apple splits the fields on a pass across five zones. Each zone sits in a different spot on the pass and gets its own typography, so pick the zone that matches how visible the information needs to be. See Apple's [PassKit Programming Guide](https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/PassKit_PG/Creating.html) for the full design rationale. - Header fields sit at the top right of the pass. They stay visible even when passes are stacked in Wallet, so use them for glanceable information only (a flight number, a balance). Up to three per pass. - Primary fields are the prominent ones on the front of the pass, rendered at the largest size. Use them for the main identity of the pass (origin and destination on a boarding pass, event name on a ticket). Up to three, or two on a boarding pass. - Secondary fields sit below the primary fields on the front, at a smaller size. Use them for the next layer of important information. Up to four. - Auxiliary fields are below the secondary fields, smaller still. Use them for less important front-of-pass details (a seat number, a gate letter). Up to four, five on boarding passes. - Back fields appear on the back of the pass, behind the info button. They have no length limit and support line breaks, URLs, and phone numbers (which Wallet turns into live links). Use them for the long stuff: terms, customer service, refund policy. The add methods ----------------------------------------------------------------------------------------------------- Every Apple builder exposes one `add` method per zone: ``` addHeaderField(string $key, string $value, ?string $label, ?string $changeMessage, ?DateType $dateStyle, ?TimeStyleType $timeStyle, ?bool $showDateAsRelative) addField(string $key, string $value, FieldType $type = FieldType::Primary, ...) addSecondaryField(string $key, string $value, ...) addAuxiliaryField(string $key, string $value, ...) addBackField(string $key, string $value, ...) ``` `$key` is a free-form identifier you pick. It's unique within the pass, and you'll reference it later when you want to update that field. `$label` defaults to a title-cased version of the key. Pass a custom label when the key doesn't read nicely on the pass. `$changeMessage` is the notification the user's device shows when the value of this field changes. Use `:value` as a placeholder for the new value (for example, `'Your gate has changed to :value'`). `$dateStyle` and `$timeStyle` let you format a value Apple recognises as a date. Pass a `DateType` (none, short, medium, long, or full) and/or a `TimeStyleType` case. Combine with `$showDateAsRelative: true` to render the date as "in 2 hours" rather than an absolute timestamp. A good match? ------------- ### What we do best - All things Laravel - Custom frontend components - Building APIs - AI-powered features - Simplifying things - Clean solutions - Integrating services ### Not our cup of tea - WordPress themes - Cutting corners - Free mockups to win a job - "Just execute the briefing" In short: we'd like to be a **substantial part** of your project. [ Get in touch via email ](mailto:info@spatie.be?subject=A%20good%20match%21&body=Tell%20us%20as%20much%20as%20you%20can%20about%0A-%20your%20online%20project%0A-%20your%20planning%0A-%20your%20budget%0A-%20%E2%80%A6%0A%0AAnything%20that%20helps%20us%20to%20start%20straightforward%21)