Demo Creator

Learn how to use the AI Pass Designer at design.walletpass.ai to visually create and test wallet passes with your tenant credentials.

Overview

The AI Pass Designer is a visual tool that lets you:

• Design pass styles with colors, images, and branding
• Create demo passes to test your designs
• Generate real passes for existing members
• Preview passes in real-time for both Apple Wallet and Google Wallet

Prerequisites

Before using the AI Pass Designer, you need:

• Tenant ID: Your tenant UUID (e.g., ec6e0ae4-49c5-5e5a-bad3-0a7bcf15e3ad)
• API Key: Your tenant API key (starts with wp_, e.g., wp_xxxxxxxxxxxxxxxxxxxxxxxxxx)

If you don't have these yet, see Getting Started to obtain a tenant account.

Step-by-Step Guide

Step 1: Access the Designer

1. Open design.walletpass.ai in your browser
2. You'll see the Pass Designer interface with:
   • Left side: Live preview of your pass
   • Right side: Configuration controls

Step 2: Connect to Your Tenant

1. Click the "Connect to Tenant" button in the top navigation
2. Enter your Tenant ID (UUID format)
3. Enter your API Key (starts with wp_)
4. Click "Connect"

What happens:

• Your credentials are saved locally (persists across page refreshes)
• The status indicator turns green and shows "Connected"
• Style management and pass generation sections become visible
• Your existing pass styles are automatically loaded

Example:

Tenant ID: ec6e0ae4-49c5-5e5a-bad3-0a7bcf15e3ad
API Key: wp_xxxxxxxxxxxxxxxxxxxxxxxxxx

Step 3: Design Your Pass Style

The designer allows you to customize every aspect of your pass:

3.1 Basic Colors

• Background Color: Main pass background (hex, rgb, or color picker)
• Text Color: Foreground text color
• Use the color picker buttons to select colors visually

3.2 Images

• Logo: Your company/brand logo (upload or select from existing assets)
• Strip Image: Header/strip image for the pass (upload or select)
• Hero Image: For Google Wallet passes (optional)

You can:

• Upload images directly
• Use images from your existing pass styles
• Images are automatically optimized for wallet passes

3.3 Pass Fields

Configure what information appears on the pass:

• Primary Field: Main text displayed over the strip
• Secondary Fields: Additional information below the strip
• Back Fields: Information on the back of the pass

Each field can use:

• Static text
• Template variables: {points}, {tier}, {member_name}, {member_id}

3.4 Barcode Configuration

• Barcode Type: QR Code, Code128, PDF417, or Aztec
• Barcode Source:
  • Member ID (automatically uses member's ID)
  • Custom data (enter your own value)

3.5 Advanced Features

• Locations: Add location-based notifications
• Beacons: Add iBeacon support for proximity triggers
• AI Prompt: Describe your design and let AI fill in the fields

Step 4: Save Your Style

1. Enter a Style Name in the "Style Management" section
2. Click "Save Style" or "Create New Style"
3. Your style is saved to your tenant and can be reused

What happens:

• Style is saved with all your design choices
• Style ID is generated and stored
• Style appears in the dropdown for future use

Step 5: Generate a Demo Pass

Demo passes let you test your design without creating real members:

1. In the "Generate Pass" section, ensure "Demo Pass" tab is selected
2. Fill in demo member information:
   • Member ID: Optional (auto-generated if empty)
   • Member Name: e.g., "Demo User"
   • Member Email: e.g., "demo@example.com"
   • Points: e.g., 1000
   • Tier/Level: e.g., "Gold"
3. Select Pass Type: Apple Wallet or Google Wallet
4. Click "Create Pass" button at the bottom

What happens:

• Your style is automatically saved (if not already saved)
• A demo pass is generated using the Pass Generation API
• Download link appears for the .pkpass file (Apple) or Google Wallet URL
• You can test the pass in your wallet app

Step 6: Generate a Real Member Pass

To create a pass for an existing member:

1. Switch to "Member Pass" tab in the "Generate Pass" section
2. Click "Select Existing Member" or "Create New Member"
3. If creating new:
   • Fill in member details (ID, name, email, phone)
   • Click "Create Member"
4. If selecting existing:
   • Search by email or member ID
   • Select from the list
5. Once a member is selected, click "Create Pass"

What happens:

• Pass is created using the member's actual data
• Pass is linked to the member in your system
• Member can add the pass to their wallet
• Pass updates automatically when member data changes

Step 7: Test Pass Updates with Member Management

After creating a member pass and adding it to your wallet, you can test the pass update functionality:

1. Switch to Member Management View

   • Click the "Member Management" tab in the top navigation
   • You'll see a list of all members for your tenant

2. Find Your Member

   • Use the search function to find the member you created a pass for
   • Click on the member to view their details

3. Update Member Points

   • In the member details, you can add or redeem points
   • Click "Add Points" or "Redeem Points"
   • Enter the amount and description
   • Click "Update Points"

4. Watch Your Pass Update

   • If the pass is already in your wallet (Apple Wallet or Google Wallet), it will automatically update
   • The points balance on the pass will reflect the new value
   • This demonstrates the real-time pass update functionality

Example Workflow:

1. Create member pass → Add to wallet
2. Go to Member Management
3. Find member → Add 100 points
4. Pass in wallet automatically updates to show new points
5. Redeem 50 points
6. Pass in wallet automatically updates again

Why This Matters:

• Tests the complete pass lifecycle
• Verifies pass update notifications work correctly
• Demonstrates real-time synchronization between your system and wallet passes
• Shows how member data changes are reflected in passes

Visual Workflow

1. Connect Tenant
   ↓
2. Design Style (colors, images, fields)
   ↓
3. Save Style
   ↓
4. Generate Demo Pass (test design)
   ↓
5. Generate Member Pass (real pass)

Using Template Variables

Template variables are replaced with actual member data when generating passes:

• {points} → Member's current points balance
• {tier} → Member's current tier (bronze, silver, gold, etc.)
• {member_name} → Member's name
• {member_id} → Member's ID

Example:

• Field Label: "Points"
• Field Value: {points}
• Result: Shows the member's actual points on the pass

Style Management

Loading Existing Styles

1. Select a style from the "Select Style" dropdown
2. All design elements (colors, images, fields) are loaded
3. You can modify and save as a new style

Creating New Styles

1. Design your pass
2. Enter a new style name
3. Click "Create New Style"
4. Style is saved and available for future use

Tips and Best Practices

1. Start with Demo Passes: Test your design with demo passes before creating real member passes
2. Use Template Variables: Use {points}, {tier}, etc. for dynamic content
3. Save Styles Frequently: Save your styles so you can reuse them
4. Test Both Platforms: Generate both Apple and Google passes to ensure compatibility
5. Preview in Real-Time: The preview updates automatically as you make changes

Troubleshooting

"Tenant Not Connected" Error

• Ensure you've clicked "Connect to Tenant" and entered valid credentials
• Check that your Tenant ID and API Key are correct
• Try disconnecting and reconnecting

"Failed to Generate Pass" Error

• Verify your API key is valid and active
• Check that all required fields are filled
• Ensure your style is saved before generating

Preview Not Updating

• Check browser console for errors
• Try refreshing the page
• Ensure images are valid URLs or base64 data

Style Not Loading

• Verify the style exists in your tenant
• Check that you're connected to the correct tenant
• Try refreshing the styles list

API Integration

The AI Pass Designer uses the following APIs behind the scenes:

• Pass Generation API: /v1/passes/create-from-member
• Pass Styles API: /v1/pass-styles
• Member Data API: /v1/members

All API calls are made automatically when you use the designer. You can see the API calls in your browser's developer console (Network tab).

Member Management

The designer includes a built-in Member Management interface for testing:

Accessing Member Management

1. Click the "Member Management" tab in the top navigation
2. You'll see a search interface and member list

Features

• Search Members: Find members by email or member ID
• View Member Details: See points, tier, passes, and transaction history
• Add Points: Increase member's point balance
• Redeem Points: Decrease member's point balance
• View Passes: See all passes associated with a member

Testing Pass Updates

1. Create a member pass and add it to your wallet
2. Go to Member Management
3. Find the member and update their points
4. The pass in your wallet will automatically update

This is the best way to test the pass update functionality and verify that your passes stay synchronized with your system.

Next Steps

After creating passes in the designer:

1. Integrate into Your App: Use the same API calls in your application
2. Customize Further: Modify styles programmatically via API (including partial updates with PUT)
3. Manage Members: Use the Member Management section in the designer
4. Test Updates: Update member points and watch passes update in real-time
5. Monitor Usage: Track pass generation in your dashboard

For API details, see the API Reference.