Apple Wallet & Google Pass Visual Code Architect

Draft native smartphone wallet card layouts visually to instantly export clean, compliant JSON manifest configurations.

Enterprise Configurator

Core Layout
Theming
Typography & Content
Lock Screen Geofencing
Triggers pass to appear on Lock Screen when near coordinates.
iOS App Store Integration
Links the pass to a native iOS App on the back of the card.
Live Barcode Generator
SFO
San Fran
JFK
New York
PASSENGER
JOHN DOE
CLASS
FIRST
GATE
B4
SEAT
12A
TICKET-JW902-JOHNDOE
A .pkpass file is simply a standard .zip file containing your images, pass.json, and a cryptographic signature. Apple strictly requires a valid PKCS#7 signature to install the pass on an iOS device.
1. Prepare Certificates
You must download your Pass Type ID Certificate from the Apple Developer Portal, and the WWDR Intermediate Certificate. Convert your `.p12` to a `.pem` file.
# Convert Apple p12 to PEM format openssl pkcs12 -in pass_cert.p12 -clcerts -nokeys -out pass_cert.pem openssl pkcs12 -in pass_cert.p12 -nocerts -out pass_key.pem
2. Generate Manifest
Create a manifest.json that contains the SHA1 hashes of every file in your folder (excluding the manifest and signature itself).
{ "pass.json": "00085a1112443c21a41...", "icon.png": "3f4a47b...", "logo.png": "8a32b9f..." }
3. Cryptographic Compile
Sign the manifest.json using OpenSSL to generate the detached signature file, then ZIP the folder.
# Generate the PKCS#7 signature file openssl smime -sign -signer pass_cert.pem -inkey pass_key.pem -certfile WWDR.pem -in manifest.json -out signature -outform DER -binary # Zip the payload into the final .pkpass file zip -r mypass.pkpass manifest.json signature pass.json icon.png logo.png

What is an Apple Wallet .pkpass file?

A .pkpass file is the standard file format used by Apple Wallet (and widely supported by Google Wallet/Google Pay apps). Despite the unique extension, a .pkpass file is simply a standard ZIP archive. Inside this archive, there are no HTML or CSS files—only raw image assets (like logo.png, icon.png, strip.png) and a strict pass.json manifest file.

Apple's iOS parses this JSON file natively and uses native Swift UI components to render the digital card on the user's screen. Because you cannot use custom CSS in a real Wallet Pass, building the JSON structure visually using an architect tool is critical to ensure your typography, transit icons, and colors look correct before deployment.

Geofencing & Lock Screen Triggers

One of the most powerful contextual features of Apple Wallet is its ability to trigger notifications based on the user's physical location. By supplying a locations array in your pass.json, you can define specific GPS Latitude and Longitude coordinates.

When the user's iOS device enters the radius of these coordinates (a geofence), iOS will automatically display the pass on the user's Lock Screen alongside the relevantText you define (e.g., "Welcome to SFO Airport! Tap to access your boarding pass."). This provides immense UX value without requiring the user to download a full native application.

The pass.json Architecture Anatomy

The pass.json dictionary is highly structured. At the root, you define your Apple Developer teamIdentifier, the passTypeIdentifier, and visual strings like logoText, backgroundColor, and foregroundColor.

Inside the root, you must declare a dictionary mapping to the "Style" of the pass (e.g., boardingPass, coupon, storeCard). Inside that specific dictionary, you define Arrays of Fields: Primary Fields (large header text), Secondary Fields (medium text), Auxiliary Fields (small text), and Back Fields (metadata displayed when the user taps the info button).

Transit Types & Layout Constraints

Different pass types have different layout constraints hardcoded into iOS. For example, if you build a boardingPass, Apple's JSON specification strictly requires you to define a transitType (e.g., PKTransitTypeAir, PKTransitTypeTrain, or PKTransitTypeBoat).

This tells the OS to render the corresponding transit icon between the Primary fields. If you choose a storeCard or coupon, you cannot use transit types, and the card layout relies heavily on a central strip.png image rather than a split primary header.

Cryptographic Compilation (How to Deploy)

You cannot simply ZIP a pass.json and email it to an iPhone. Apple strictly enforces cryptographic security to prevent malicious or spoofed passes. To compile the pass, you must first generate a manifest.json containing the SHA1 hash of every file in the directory.

Then, you use your Apple Developer Pass Type ID Certificate and the Apple WWDR Intermediate Certificate to cryptographically sign that manifest, generating a detached PKCS#7 signature file (literally named signature). Finally, you ZIP the payload together. Our Compiler CLI tab provides the exact OpenSSL commands for this process.

Push Notifications & Live Updates (APNs)

One of the most powerful features of Apple Wallet is live updates (e.g., changing a flight gate or updating a loyalty point balance). To enable this, your pass.json must include a webServiceURL (pointing to your HTTPS API endpoint) and an authenticationToken.

When the user installs the pass, Apple Wallet automatically makes a POST request to your API to register the device. When you need to update the pass, your backend sends an Apple Push Notification (APN) to the device. The device silently wakes up, hits your webServiceURL to download the new .pkpass bundle, and dynamically updates the UI.

Frequently Asked Questions

File Formats

What is a .pkpass file?
A `.pkpass` file is a digital pass format originally introduced by Apple Wallet. It is essentially a ZIP archive containing a JSON dictionary (`pass.json`), images, and cryptographic signatures that define boarding passes, coupons, and event tickets.

Tool Features

How does the visual code architect assist in building passes?
The visual architect allows you to drag-and-drop fields, barcodes, and images onto a live preview of a wallet pass. It automatically generates the complex `pass.json` structure, ensuring all required keys and formatting conform to Apple and Google specifications.

Security & Signing

Does this tool handle the cryptographic signing process?
This tool focuses on structurally designing the pass and generating the valid JSON and asset manifest. You will still need to use your developer certificates to sign the `.pkpass` bundle on your server before distribution.

Rate Apple Wallet & Google Pass Visual Code Architect

Help us improve by rating this tool.

4.7/5
279 reviews