How-To
How to Create a Digital Stamp Card: Branding, Apple & Google Wallet, AI Generator, and 70+ Customizations
Step by step: how to set up your first program in reloop — from brand colors and stamp icons to the Wallet pass. Three ways, 70+ options, live preview.
When you create a digital stamp card, you're really building two Wallet passes at once behind the scenes: an Apple Wallet .pkpass and a Google Wallet loyalty object. Both are generated from a single configuration in the reloop dashboard. This article walks you through all three ways to set up a program and explains every one of the 70+ configuration options — from branding and stamp mechanics to anti-fraud features. Before you start: you'll find the full dashboard overview in the pillar article.
Three ways to your first stamp card
You have three options for creating your first program — and they all land in the same editor in the end:
- AI generator from your homepage URL — fastest route, ~10 seconds
- Create manually — full control, blank form
- Copy from an example — use one of our demo examples as a template
Option 1: AI generator
You click "Create with AI," enter your website's URL, and the system scrapes your homepage. Within 10–15 seconds you get a draft that includes:
- Business name (from the
<title>or main heading) - Primary color (from Tailwind tokens, CSS variables, or the dominant logo color)
- Accent color (complementary or second-strongest UI color)
- Logo (extracted from
<link rel="apple-touch-icon">or the hero section) - Industry detection ("café," "restaurant," "hair salon," etc.) as a suggestion for the program name
- Suggested reward text based on your industry
The draft is cached for 10 minutes in your sessionStorage. You land in the normal program editor with all fields prefilled — and you can adjust everything before you save. If there are extraction issues (for example, a missing logo), the editor shows warnings.
Option 2: Create manually
If you already have clear branding, or your business isn't publicly listed (insider loyalty, early-bird programs), start with "Create manually." You land in a blank editor and fill in the fields yourself. Time: ~3–5 minutes for a standard program.
Option 3: Copy from an example
At reloop.cards/beispiele you'll find six interactive demo passes (café, restaurant, hair salon, bakery, dog groomer, food truck). Each one can be cloned directly into your account as a template — you inherit the mechanics and brand style and just tailor them to your business. Skip designing from scratch.
Program basics
No matter which route you take, these four fields are the foundation of every program:
| Field | Description | Example |
|---|---|---|
| Program name | Visible title on the Wallet card and in the dashboard | "Coffee Loyalty Card" |
| Subtitle | Optional sub-headline, shown in italics on the pass | "Your 5th is free" |
| Reward text | What the customer gets when the card is full | "1 coffee on the house" |
| Homepage URL | Clickable link on the back of the pass, optional | https://cafe-milchschaum.at |
Stamp mechanics
| Field | Range / Default | Meaning |
|---|---|---|
| Stamp goal | 2–100 (default: 5) | How many stamps until the reward |
| Max. stamps per day | 1–10 (default: 1) | Anti-fraud daily limit per card |
| Expiry in days | 0–730 (0 = never) | Stamps expire after X days of inactivity |
| Bonus display timing | at_max | before_max | Reward state at N, or already at N–1 |
| Bonus display show extra | Boolean | "+1 stamp" suffix in the counter (X/Y+1) |
Branding: colors, logo, background
Branding is what makes the difference between a generic "loyalty card" and a card that looks like your business at first glance.
| Field | Format | Effect |
|---|---|---|
| Brand color | Hex #RRGGBB | Card background; text contrast is chosen automatically |
| Accent color | Hex #RRGGBB | Stamp highlights, reward eyebrow, CTA buttons on the pass |
| Logo | URL (Firebase Storage, max. 2 MB) | Appears in the pass header, automatically scaled for retina (1×, 2×, 3×) |
| Strip background | URL, optional | Background image behind the stamps (e.g. a latte photo for a café) |
| Strip overlay mode | none / darken / lighten / brand-tint | How the background image blends with the brand color |
| Strip overlay opacity | 0–80% (default: 35%) | Strength of the overlay |
Stamp display: circle-with-number or image-only
You have two fundamental display modes:
circle-number (default)
Classic numbered circles. Unstamped: outline. Stamped: filled with the accent color, number in the brand color. Works well for 5–10 stamps.
image-only
Just stamp icons (emoji or a custom URL), no numbers. Unstamped: grayscale. Stamped: full color. Modern and very stylish for boutique brands.
| Additional options | Meaning |
|---|---|
| Stamp icon URL | Custom image (PNG, transparent), e.g. your logo symbol |
| Stamp emoji | From a curated palette (☕, 🥐, ✂️, 🐶, etc.) or any emoji |
| Stamp icon scale | 50–200% (default: 100%) — bigger = more prominent |
| Image-only: show goal ring | In image-only mode: toggle the progress ring around empty slots |
Goal icon: the symbol for the "final stamp"
By default, the slot just before the reward shows a star. You can replace this icon:
| Field | Effect |
|---|---|
| Use custom goal icon | Toggle: your own icon instead of the star |
| Goal icon URL | Image URL (e.g. your logo as a crown) |
| Goal icon emoji | Or an emoji (e.g. 🏆) |
| Goal icon accent tint | Tints the icon in your accent color |
Reward screen: the moment of payoff
When the card is full, the pass switches into the reward state. Here you get just as many customization options as you do for the progress state:
| Field | Meaning |
|---|---|
| Reward background URL | Custom hero image for the reward state (e.g. a photo of your signature drink) |
| Reward background color | Solid color as a fallback when there's no image |
| Reward overlay mode | Same as the strip above |
| Reward overlay opacity | 0–80% |
| Reward eyebrow text | Small headline element above the reward (e.g. "🎉 Congratulations") |
| Reward text color | Hex color for the big reward line |
| Reward sunburst | Radiating animation behind the reward — celebratory |
| Hide reward eyebrow | Toggle: omit the eyebrow (for a minimalist design) |
| Hide reward text | Toggle: image only, no text (when the image already says it all) |
Apple Wallet integration: the .pkpass format
For Wallet passes, Apple requires its proprietary PassKit format — a signed ZIP file with a strictly defined structure. reloop generates this server-side:
- Pass.json with all configured fields (program, reward, counter, geofences, web service URL for updates)
- Strip image (1×, 2×, 3×) — rendered via
sharpfrom your branding - Logo (1×, 2×, 3×) — automatically scaled
- Icon (1×, 2×, 3×) — for the notification center
- Signature using your Pass Type certificate (managed by reloop)
When you trigger the pass generator, the following pipeline runs:
- Program data from the editor → AppleWalletInput
- Logo fetch from Firebase Storage (8s timeout, 15min TTL cache)
- Sharp resizing to all retina sizes
renderAppleStripSet()renders the strip images with your colors, stamps, goal icon, and sunburst (if in the reward state)- Pass.json is populated with all fields
- The PassKit generator signs the ZIP
- The
.pkpassis delivered
The customer taps "Add to Wallet" — no app installation. iOS automatically recognizes the MIME type application/vnd.apple.pkpass.
Push updates via APNs
As soon as a new stamp arrives, reloop sends an APNs push to Apple's servers. Apple wakes the pass on the device, which quietly loads the new data in the background. The customer sees the new stamp count the next time they open the card — no app update, no reinstall.
Google Wallet integration: LoyaltyClass + LoyaltyObject
Google uses an API-centric model. For each program we create a LoyaltyClass (static branding), and for each card a LoyaltyObject (the dynamic stamp count). On every stamp, the backend makes a PATCH request — and Google syncs the card automatically across all of the user's devices.
What the LoyaltyClass contains
- IssuerName + ProgramName (German and English)
- HexBackgroundColor (your brand color)
- ProgramLogo (Firebase Storage URL)
- HeroImage (your strip preview)
- TextModulesData ("How it works" explanation)
- ValueAddedModuleData (optional promo block, see below)
- ScreenShotEligibility (
INELIGIBLEwhen disable-sharing is on) - MultipleDevicesAndHoldersAllowedStatus (
ONE_USER_ALL_DEVICESwhen disable-sharing is on)
What the LoyaltyObject contains
- Stamp counter (e.g. "3/5")
- Current status (
ACTIVE, orEXPIREDonce the expiry date is reached) - Barcode (static QR or rotating TOTP, depending on the program)
- HeroImage (with a cache buster: it changes with each stamp count so Google sees the new state immediately)
- LinksModuleData (homepage, view card online, support email, privacy policy, imprint)
- ValidTimeInterval (expiry date)
- MerchantLocations (≤10 geofences with lat/lon)
Push notifications via Wallet broadcast
Unlike Apple, Google can send direct push notifications to the lock screen. In the dashboard you write a header and body, pick the target programs — and the notification appears for all Google Wallet users as a banner right on the lock screen. More on this in the reporting spoke.
Live preview: what you type is what you see
As you write in the editor, the WalletSimulator runs on the right — the same component we use on /beispiele for demo passes. You toggle between Apple and Google, scrub through every stamp state (0/5, 1/5, …, 5/5 + reward), and see immediately how colors, icons, and text behave at each step.
Edit program
Strip image rendering runs server-side at /api/wallet-preview/strip.png and is cached for 200 ms — fast drag inputs (e.g. the color picker) get bundled into a single request to keep things smooth.
Email capture & loyalty tiers
Two especially powerful features for advanced programs:
Email capture modes
| Mode | Behavior |
|---|---|
off | No email capture. The card is 100% anonymous. |
optional | After save-to-Wallet, an email field is offered. Bonus stamps as an incentive are possible. |
required | The card can only be saved with an email. Maximum reach for your newsletter. |
Email capture reward stamps = the number of bonus stamps the customer gets for entering their email. Typical values: 1–2 stamps. Very effective as a conversion driver.
Loyalty tiers (Bronze / Silver / Gold)
On the Premium plan you can build multi-tier programs: a card has tiers, and the customer advances to the next tier each time they complete a row of stamps. The tierConfig is a JSON block that defines reward text, threshold, and display name per tier.
Example (a fictional café): Bronze (5 coffees → free coffee), Silver (15 coffees → +1 free croissant), Gold (30 coffees → personalized mug with your name). Very strong for retaining existing customers.
Anti-fraud: rotating QR code, NFC tap, block card sharing
Three security features that prevent abuse:
Rotating QR code (TOTP)
The QR code on the card rotates every 30 seconds. Any stamp attempt with an old code fails. This prevents screenshots and photo sharing. Available from the Business plan up. TOTP is the same standard used by authenticator apps — very secure.
NFC tap stamping
Instead of a QR code, the customer holds their phone to an NFC tag on your counter. The stamp is booked instantly, without you or the customer opening an app. The only requirement is an NFC tag provisioned by us. Included on every plan.
Block card sharing
For Google Wallet: screenShotEligibility: INELIGIBLE and multipleDevicesAndHoldersAllowedStatus: ONE_USER_ALL_DEVICES. This means cards can't be forwarded, and screenshots block the pass display. Maximum protection against card sharing. Included on every plan.
Standard anti-fraud (active on every plan)
- HMAC-SHA256-signed QR tokens (60s TTL)
- Per-program max-stamps-per-day limit
- Audit log with staff ID, time, and IP for every stamp
- No anonymous stamp trigger — only logged-in staff can stamp
Publishing, QR code, pause/end
Once you're happy, you click Publish. The program switches to active status, the QR code is generated (/s/[slug]/scan URL as a QR), and you can:
- Download as PNG (the standard format for printers)
- Download as SVG (lossless and scalable, perfect for poster design)
- Print directly via the browser's print dialog
- Share by email (direct link, no login required)
Pausing or ending a program
- Pause → existing cards stay intact, new stamps are blocked. Reversible.
- End → the program becomes read-only. Cards can still redeem their current balance but can't collect new stamps. Irreversible.
- Delete → a complete hard delete, including all associated cards and stamp histories. Two-factor confirmation dialog.
Creating test cards
Before going live, you should run through the entire customer workflow yourself. In the program editor, click "Create test card" — you get a fully functional card with no real customer ID that you can stamp, redeem, and delete yourself. Test cards don't count against your card quota and are reported separately.
Summary: your first program in 5 minutes
If you go through it step by step:
- AI generator → type in your URL, review the draft
- Adjust the program basics (name, reward, stamp goal)
- Finalize your branding (logo, colors, stamp emoji)
- Check the live preview — scrub through every stamp state
- Choose your anti-fraud settings (standard is usually enough)
- Publish → print the QR → hand out your first card