# 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.

Canonical: https://reloop.cards/en/blog/digitale-stempelkarte-erstellen
Published: 2026-04-27
Updated: 2026-08-02
Author: reloop Team (candybytes GmbH)

---
export const metadata = {
  title:
    'How to Create a Digital Stamp Card: Branding, Apple & Google Wallet, AI Generator, and 70+ Customizations',
  description:
    '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.',
  publishedAt: '2026-04-27',
  updatedAt: '2026-08-02',
  category: 'How-To',
  tags: [
    'Create a Program',
    'Apple Wallet',
    'Google Wallet',
    'Branding',
    'AI Generator',
    'Stamp Card',
  ],
  readingMinutes: 12,
};

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](/blog/merchant-dashboard-funktionen).

## 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:

1. **AI generator from your homepage URL** — fastest route, ~10 seconds
2. **Create manually** — full control, blank form
3. **Copy from an example** — use one of our [demo examples](/beispiele) as a template

### Option 1: AI generator

<Callout tone="tip" title="When the AI generator works well">
When your website has a clear logo, brand colors in the header/hero sections, and a recognizable business name. It works especially well for cafés, bakeries, hair salons, and restaurants with an established web presence. For very minimalist or graphics-heavy sites, we extract the colors directly from the CSS — in which case results can vary.
</Callout>

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](/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) |

<Callout tone="info" title="`at_max` vs. `before_max`">
**`at_max`** (default): The customer sees the reward screen only once they've earned the final stamp. The classic model.<br />
**`before_max`**: The card shows the reward as early as N–1 stamps. Useful when the final stamp happens at redemption (e.g. "The 5th time, you get stamped AND get a free coffee" — showing the reward at the 4th stamp signals: next time is the one).
</Callout>

## 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.

<StampMockup
  merchant="Cafe Milchschaum"
  program="Coffee Loyalty Card"
  reward="Your 5th coffee free"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={2}
  required={5}
  emoji="☕"
  caption="Brand color espresso (#5B3826), accent caramel (#E8C180), stamp emoji ☕"
/>

| 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 |

<Callout tone="tip" title="Logo tips">
- **A PNG with a transparent background** works best — no white boxes around your logo<br />
- **Square or 3:1 horizontal** — both formats are scaled to 160×50pt<br />
- **At least 2× resolution** (e.g. 320×100 px) so it stays sharp on retina displays<br />
- **Check contrast against the brand color** — light logos need dark brand colors and vice versa
</Callout>

## 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 |

<StampMockup
  merchant="Cafe Milchschaum"
  program="Coffee Loyalty Card"
  reward="Your 5th coffee free"
  brandColor="#5B3826"
  accentColor="#E8C180"
  stamps={5}
  required={5}
  state="reward"
  caption="Reward state: sunburst, eyebrow text, the big reward front and center."
/>

## 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 `sharp` from 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:

1. Program data from the editor → AppleWalletInput
2. Logo fetch from Firebase Storage (8s timeout, 15min TTL cache)
3. Sharp resizing to all retina sizes
4. `renderAppleStripSet()` renders the strip images with your colors, stamps, goal icon, and sunburst (if in the reward state)
5. Pass.json is populated with all fields
6. The PassKit generator signs the ZIP
7. The `.pkpass` is 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 (`INELIGIBLE` when disable-sharing is on)
- MultipleDevicesAndHoldersAllowedStatus (`ONE_USER_ALL_DEVICES` when disable-sharing is on)

### What the LoyaltyObject contains

- Stamp counter (e.g. "3/5")
- Current status (`ACTIVE`, or `EXPIRED` once 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](/blog/loyalty-reporting-push-newsletter#wallet-push-broadcasts).

## 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](/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.

<DashboardMock variant="program-editor" caption="The editor with live preview. Every change on the left renders in the preview on the right in under 300 ms." />

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)

<Callout tone="info" title="QR printing recommendation">
- **Minimum size:** 4×4 cm for table tents, 8×8 cm for door stickers<br />
- **High contrast:** dark QR on a white background, **never** a white QR on a colored background<br />
- **Quiet zone:** at least 4× the QR module size as a margin all around<br />
- **Trial test:** scan with two different phones (iOS and Android) before you print
</Callout>

### 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:

1. **AI generator** → type in your URL, review the draft
2. Adjust the **program basics** (name, reward, stamp goal)
3. Finalize your **branding** (logo, colors, stamp emoji)
4. Check the **live preview** — scrub through every stamp state
5. Choose your **anti-fraud** settings (standard is usually enough)
6. **Publish** → print the QR → hand out your first card

<Callout tone="success" title="Next steps">
- [How to win back existing customers via push and newsletter →](/blog/loyalty-reporting-push-newsletter)<br />
- [Complete overview of every dashboard feature →](/blog/merchant-dashboard-funktionen)<br />
- [Examples from 6 industries →](/beispiele)<br />
- [Get started for free →](/signup)
</Callout>