Saltar al contenido principal

Wallet Pass

El Wallet Pass es la tarjeta de fidelización que el miembro instala en su teléfono — Apple Wallet en iPhone, Google Wallet en Android. Es donde los miembros encuentran su QR del miembro para que el cajero lo escanee, ven su saldo y regalos de un vistazo y (en iPhone) reciben notificaciones push cuando se acercan a una sucursal.

Esta página es el mapa del área de configuración del Wallet Pass. Cinco pestañas — Settings, Diseño, Campos, Ubicaciones, Pases — cubren todo, desde cómo se firma la tarjeta hasta lo que ve el cajero en la parte frontal y lo que ve el miembro fijado en su pantalla de bloqueo.

En resumen

La tarjeta ya está configurada el día que tu club entra en funcionamiento. En el día a día, pasarás casi todo tu tiempo en Diseño (colores, imágenes, visuales de tarjeta perforada) y Campos (lo que se muestra en la parte frontal y trasera de la tarjeta). Ubicaciones es para notificaciones push por proximidad. Pases es una tabla de auditoría de solo lectura.

nota

Las capturas de pantalla de esta página muestran la configuración de un comercio (etiquetas en español). Tu Hub muestra las etiquetas y el contenido que configures para tu propio programa.

Quién puede cambiar qué

Las cinco pestañas no son iguales. Algunas se preconfiguran al montar el club y no deberían cambiarse después; otras están pensadas para editarse a medida que evoluciona el programa.

  • Settings — preconfigurada al montar el club. No cambies nada aquí a menos que te lo hayan pedido. El Pass Type Identifier, las URLs del firmante y los IDs de clase de Google Pay deben coincidir con los certificados y cuentas con los que se firma la tarjeta; editarlos rompe silenciosamente cada tarjeta ya en circulación.
  • Diseño, Campos, Ubicaciones — abiertas para que el comercio (o quien gestione el programa en su nombre) las edite a voluntad. Los cambios se propagan a los pases existentes la próxima vez que cada dispositivo refresque la tarjeta.
  • Pases — tabla de auditoría de solo lectura de cada tarjeta que se ha descargado alguna vez. El botón Actualizar todos los pases de esta pestaña es para soporte; ignóralo a menos que te lo pidan.

Pestaña Settings — no la toques

La pestaña Settings — Configuración general (nombre de la organización, descripción) y configuración del SO dividida en Apple (Pass Type Identifier, Signer Key URL, Signer Cert URL) y Android (Pass Type, gPayIssuerId, gPayClassId, mostrar nombre de cuenta debajo del código QR)

Esta pestaña es donde la tarjeta se registra técnicamente — los identificadores y URLs de firma que demuestran a Apple y Google que la tarjeta proviene de un emisor de confianza. Se configura una vez cuando tu club entra en funcionamiento y no debería tocarse después.

aviso

Editar cualquier cosa en Settings después del lanzamiento invalidará cada Wallet Pass ya instalado en los teléfonos de los miembros. No hay recuperación posible salvo reemitir cada tarjeta. Si crees que algo aquí necesita cambiar, habla primero con soporte.

Pestaña Diseño — colores, imágenes, vistas condicionales

Aquí es donde vive el aspecto de la tarjeta. Esto es lo que parece una tarjeta terminada en el dispositivo — lo que ven tus miembros cuando la abren en la caja:

El Wallet Pass abierto en un iPhone — tarjeta naranja con la marca denominativa en la esquina superior izquierda, "Créditos (€) 15.3" en la esquina superior derecha, una imagen banner de desayuno con dos sellos ganados (iconos de regalo) y tres no ganados (círculos vacíos), nombre del miembro y conteo de regalos sobre un código QR del miembro, y el número de teléfono del miembro debajo del QR

La pestaña Diseño — panel Colores (color de texto, color de fondo, color de etiqueta), panel Imágenes (Icon URL, Logo URL, Strip URL), panel Vistas condicionales (Estado activado, etiqueta Nivel_VIP configurada) y un panel de imágenes de strip de tarjeta perforada

Cuatro paneles en la pestaña, cada uno cubierto a continuación.

Colores

Tres colores definen toda la tarjeta: texto, fondo y etiqueta. Elígelos en el panel y la tarjeta en vivo en el teléfono de cada miembro se actualiza la próxima vez que se refresca.

La tarjeta de arriba usa un fondo naranja con un color de texto marrón oscuro y un pequeño acento en la etiqueta. Lo que configures aquí se aplica a la vista predeterminada de la tarjeta — las vistas condicionales, si configuras alguna, anulan estos valores.

Imágenes

Tres imágenes componen la identidad visual de la tarjeta. Sube un archivo nuevo en la ranura correspondiente para reemplazar cualquiera de ellas.

  • Icon — el cuadrado pequeño que aparece en las notificaciones de la pantalla de bloqueo y en la vista de lista de Wallet. 500 × 500 px PNG o JPG.
  • Logo — la marca denominativa en la esquina superior izquierda de la tarjeta abierta. 480 × 150 px PNG.
  • Strip — la imagen banner ancha que se extiende a lo largo de la parte superior de la tarjeta abierta debajo del logo. 1125 × 336 px tanto para Apple como para Google.
Mantén los archivos pequeños

La tarjeta se vuelve a descargar por el aire cada vez que el dispositivo de un miembro la refresca. Apunta a menos de ~500 KB por imagen — comprime los PNG con TinyPNG (o similar), o guarda los JPG al ~80 % de calidad. Las imágenes pesadas significan actualizaciones lentas y quejas de "mi tarjeta no se actualiza".

Imagen Strip — área segura

La imagen Strip mide 1125 × 336 px, pero el área segura son los 900 × 336 px centrales. Apple Wallet muestra solo el área segura; los márgenes laterales pueden recortarse según el dispositivo. Google Wallet muestra el ancho completo de 1125 px.

Cuando diseñes una imagen strip, mantén cualquier elemento legible — texto, logos, el punto focal — dentro de los 900 × 336 px centrales. Usa los márgenes externos solo para fondos, degradados o sangrado decorativo.

Diagrama del área segura de la imagen Strip — una imagen strip de muestra con un borde verde discontinuo alrededor de los 900 × 336 px centrales (etiquetado "Green area will be displayed at Apple") y un borde rojo discontinuo alrededor de los 1125 × 336 px completos (etiquetado "Red area will be displayed at Google"). El titular "Take us home" y el texto de apoyo se sitúan de forma segura dentro del área verde; los márgenes laterales contienen solo sangrado de fondo

Vistas condicionales

Haz que la tarjeta se vea diferente para los miembros que llevan una etiqueta específica. Opcional — la mayoría de los clubs ejecutan un único diseño y omiten esto por completo.

Cómo funcionan las vistas condicionales — abre si quieres un aspecto diferente para VIPs, una cohorte de lanzamiento, etc.
Resumen rápido

Elige una etiqueta (p. ej. Nivel_VIP).
Anula los colores (primer plano / fondo / etiqueta).
Opcionalmente anula las URLs del Strip y del Logo.
Los miembros con esa etiqueta ven la anulación; el resto ve el diseño predeterminado.

Una vista condicional es un aspecto alternativo de la tarjeta que se intercambia cuando un miembro lleva una etiqueta específica. La captura de pantalla de abajo es la misma tarjeta para un miembro etiquetado Nivel_VIP — fondo crema, texto marrón oscuro, colores de etiqueta verdes y una imagen strip VIP MEMBER superpuesta al banner por defecto. Mismo QR y mismos datos por debajo, solo un aspecto diferente.

El Wallet Pass de vista condicional en iPhone para un miembro etiquetado Nivel_VIP — tarjeta crema con la marca denominativa Revolution Coffee Shop arriba a la izquierda, Créditos (€) 15.3 arriba a la derecha, una imagen strip VIP MEMBER, colores de etiqueta verdes y texto marrón oscuro, QR del miembro e ID en la parte inferior. Mismos datos que la tarjeta por defecto, solo un tratamiento visual diferente

El panel Vistas condicionales expandido — interruptor de Estado activado, la píldora de etiqueta Nivel_VIP y el bloque de anulación por etiqueta mostrando Value: Nivel_VIP, Foreground color #655931 (marrón), Background color #fff8e3 (crema), Label color #11a30e (verde), una Strip URL alojada y un campo Logo URL vacío

La etiqueta coincidente se adjunta de la misma forma que cualquier otra etiqueta — manualmente desde el perfil del miembro, automáticamente mediante una Regla, en la importación, etc.:

La página de perfil del miembro mostrando la píldora de etiqueta Nivel_VIP en la sección Etiquetas, con una flecha roja apuntando a la etiqueta — ilustra de dónde viene el disparador de la vista condicional

Puedes apilar varias vistas condicionales (una por valor de etiqueta); gana la etiqueta que coincida. Los miembros sin etiqueta coincidente reciben el diseño predeterminado.

Imágenes Strip de tarjeta perforada

Si tu programa de fidelización usa una tarjeta perforada y quieres que el progreso de sellado aparezca en la propia tarjeta, aquí es donde lo configuras. Opcional — déjalo en paz si tus tarjetas perforadas son solo internas.

Cómo funcionan las imágenes strip de tarjeta perforada — abre si quieres que el progreso de sellos sea visible en la tarjeta
Resumen rápido

Elige la tarjeta perforada del selector.
Sube una imagen strip por estado de sello — Sello 0, Sello 1, Sello 2, …
La tarjeta cambia el strip automáticamente a medida que el miembro gana sellos.

Subes una imagen strip por estado de sello — Sello 0, Sello 1, Sello 2, y así sucesivamente, hasta el número máximo de sellos en la tarjeta. La tarjeta cambia la imagen strip automáticamente a medida que el miembro gana sellos. En la tarjeta mostrada arriba, la foto del desayuno es el strip de sello 2 — dos tazas rellenas (los iconos de regalo), tres más por conseguir (los círculos vacíos).

El panel Imágenes Strip de tarjeta perforada — interruptor de Estado, un selector de tarjeta perforada y diez ranuras de subida etiquetadas Sello 0 a Sello 9

Si tu programa usa más de una tarjeta perforada, solo una puede mostrarse en el Wallet Pass a la vez. El selector en la parte superior del panel es donde eliges a qué tarjeta perforada pertenece este conjunto de imágenes strip — elige la que quieras destacar en la tarjeta.

Pestaña Campos — qué se muestra en el frente y el reverso

La pestaña Campos — panel de configuración de QR (Format, QR settings, Alternative text) y cuatro secciones plegables: Header fields (1), Primary fields (1), Secondary fields (2), Back fields (14)

Campos es donde decides qué información muestra la tarjeta alrededor del QR — tanto en el frente (lo que ve el cajero cuando el miembro abre la tarjeta en la caja) como en el reverso (lo que ve el miembro si toca el (...) para girar la tarjeta).

Cinco zonas de campos; normalmente no necesitas tocarlas todas.

QR settings

El encabezado en la parte superior de la pestaña controla el propio QR. Lo que vale la pena conocer es Alternative text — el texto representado debajo del QR. Por defecto muestra el número de teléfono del miembro, controlado por el marcador de posición @displayedInfo. Borra ese marcador y la línea debajo del QR desaparece por completo.

La fila Header fields creditBalance expandida — Displayed Info, Label (Créditos €), Value, Text alignment, Prefix, Suffix

Campos del frente de la tarjeta

Las tres zonas etiquetadas alrededor del QR en el frente de la tarjeta — Header, Primary, Secondary. Configuradas al lanzamiento del club; normalmente lo único que cambiarás después es la Label (la leyenda legible para humanos).

Las tres zonas de campos del frente de la tarjeta — abre para ver para qué sirve cada una
Resumen rápido

Header — número titular en la esquina superior derecha (p. ej. Créditos (€) — 15.3).
Primary — texto de título grande debajo de la imagen strip. A menudo se deja vacío.
Secondary — la fila justo encima del QR (p. ej. Nombre y Apellido / Regalos).
Lo que normalmente cambiarás después del lanzamiento: la Label de un campo existente.

El frente de la tarjeta está dividido en tres zonas etiquetadas que las capturas de pantalla muestran en forma plegada en la pestaña Campos:

  • Header fields — la zona pequeña en la parte superior derecha, usada para el número titular que quieres que el cajero vea de un vistazo. La tarjeta de arriba la usa para Créditos (€) — 15.3.
  • Primary fields — texto de título grande debajo de la imagen strip. A menudo se deja vacío para diseños liderados por imágenes.
  • Secondary fields — la fila encima del QR. La tarjeta de arriba la usa para Nombre y Apellido — Angel Garcia a la izquierda y Regalos — 4 a la derecha.

Secondary fields expandido — campo fullName con Label "Nombre y Apellido", y un campo punchCard con Label "Perforación" y un Value vinculado a un ID de activo de tarjeta perforada específico

Normalmente no los reconstruirás desde cero. Los campos se configuran al lanzamiento del club para apuntar a los atributos correctos del miembro; lo que normalmente cambiarás después del lanzamiento es la Label (la leyenda legible para humanos encima de cada valor) cuando decidas que Créditos ahora debería leerse como Saldo, o que Regalos debería leerse como Premios.

Campos del reverso de la tarjeta

Lo que los miembros ven cuando tocan el (...) para girar la tarjeta — normalmente información básica de perfil más ubicaciones de sucursales tocables enlazadas a Google Maps.

Cómo funcionan los campos del reverso + el patrón de enlace de ubicación de sucursal
Resumen rápido

Los campos del reverso = las cosas que un miembro busca, no las cosas que el cajero necesita.
Ubicaciones de sucursales: pega un <a href="https://maps.app.goo.gl/...">📍 Branch name</a> en el campo Apple – Attribute value, y el equivalente Google – URL / Description para Android.
Un campo del reverso por sucursal que quieras listar.

El panel Back fields es la lista larga — catorce entradas en este ejemplo. El reverso de la tarjeta es donde pones las cosas que un miembro podría querer consultar pero que no necesita ver en cada compra: nombre completo, correo electrónico, teléfono, etcétera.

El panel Back fields mostrando la lista plegada — firstName, lastName, phoneNumber, email, gifts, Loc, LocCastañeda, más algunas filas vacías más

Lo interesante que pueden hacer los campos del reverso, más allá de simplemente leer datos, es renderizar enlaces clicables — más a menudo una ubicación de sucursal con un enlace de Google Maps para que un miembro pueda tocar el nombre de una sucursal en el reverso de la tarjeta y abrir la navegación. La fila LocCastañeda en la captura de arriba es una de esas: el campo Apple — Attribute value contiene un fragmento HTML <a href="...">, y los campos paralelos Google — URL / Description contienen el equivalente para Android.

El campo del reverso LocCastañeda expandido — valor de atributo Apple que contiene una etiqueta ancla apuntando a Google Maps, y campos Google con tipo &quot;link&quot;, una URL de mapas y una Descripción

Añade uno de estos por cada sucursal que quieras listar; los miembros obtienen una lista tocable de todas tus ubicaciones en el reverso de su tarjeta.

Pestaña Ubicaciones — notificaciones push por proximidad (iPhone)

Función exclusiva de iPhone — envía un push a la pantalla de bloqueo cuando un miembro con la tarjeta instalada se acerca a una coordenada definida. Opcional. Omite el resto de esta sección si las notificaciones por proximidad no son parte de tu plan.

Cómo funcionan las notificaciones por proximidad — abre si quieres pushes en la pantalla de bloqueo cerca de las sucursales
Resumen rápido

Añade una ubicación: Latitud / Longitud / Texto relevante.
Hasta 10 ubicaciones por tarjeta (límite de Apple).
Obtén las coordenadas desde Google Maps — haz clic derecho en el punto, copia el par lat/long.
Cada ubicación tiene su propio mensaje push.

La pestaña Ubicaciones — una lista de geolocalizaciones, cada una con una Latitud, una Longitud y un Texto relevante mostrado a los miembros. Hasta diez ubicaciones están configuradas

Apple Wallet maneja el geofencing; tú solo proporcionas las coordenadas y el mensaje. La configuración:

  • Latitud / Longitud — las coordenadas del punto cerca del cual quieres que se dispare. Forma fácil de obtenerlas: abre Google Maps en un navegador, haz clic derecho en el punto y copia el par de coordenadas del menú que aparece.
  • Texto relevante — el mensaje que aparece en la pantalla de bloqueo cuando el dispositivo se acerca. Cada ubicación tiene su propio mensaje, así que puedes adaptar el texto por sucursal ("Bienvenido de nuevo a nuestra ubicación de Castañeda") o por caso de uso ("Estás cerca de nuestro local insignia — prueba el nuevo menú de primavera").

El único límite duro de Apple es diez ubicaciones geofencidas por tarjeta. No hay un límite de longitud documentado para el texto relevante — en la práctica se comporta como cualquier otra notificación push, con el dispositivo truncándolo según el tamaño de fuente y la configuración de notificaciones del usuario.

Esto es exclusivo de iPhone — Google Wallet no admite notificaciones disparadas por proximidad de la misma manera. Los miembros con Android llevan la misma tarjeta; simplemente no verán pushes en la pantalla de bloqueo cuando pasen cerca.

Si tienes más de diez sucursales — elige las diez que más importan. Heurísticas comunes: las sucursales con más tráfico, las recién abiertas para las que quieres generar conciencia, o las que están en centros urbanos donde es probable que los miembros pasen de todos modos. Las otras sucursales todavía aparecen en el reverso de la tarjeta (ver Campos del reverso arriba) — simplemente no harán sonar el teléfono al acercarse.

Pestaña Pases — auditoría de solo lectura

La pestaña Pases — una tabla paginada que lista cada pase descargado con columnas para Serial number, Device ID, Common external ID, tipo de Wallet Pass (Apple o Google), Created at, Updated at, más un icono de actualización por fila. El contador muestra 1-10 de 5043 en este ejemplo

La pestaña Pases es el rastro de auditoría de cada Wallet Pass que se ha descargado alguna vez — una fila por par dispositivo-pase. Útil cuando:

  • Necesitas confirmar que un miembro específico ha instalado realmente la tarjeta (busca por su identificador).
  • Estás investigando una queja de "mi tarjeta no se actualiza" y quieres ver cuándo se tocó la tarjeta por última vez en el dispositivo.
  • Estás dimensionando la base de instalación antes de una campaña — el contador en la esquina inferior derecha te dice el total.

Dos utilidades están en la esquina superior derecha:

La pestaña Pases con el popover de Filtros abierto — entradas de búsqueda Serial number, Device ID y Common external ID

  • Filtros — reduce la lista por Serial number, Device ID o Common external ID. Útil para encontrar la tarjeta de un miembro o un dispositivo.
  • Descargar CSV — exporta la vista actual (filtrada) a una hoja de cálculo.

El icono de nube de Descargar CSV resaltado con una flecha, ubicado entre el icono de filtros y el botón Actualizar todos los pases en la parte superior de la pestaña Pases

aviso

No pulses Actualizar todos los pases. El gran botón naranja en la parte superior de la pestaña fuerza un refresco en cada tarjeta de la base de instalación — miles de dispositivos simultáneamente. Dispara una tormenta de notificaciones, golpea con fuerza las APIs de Apple y Google, y en casos extremos puede limitar la tasa del emisor durante un período. Usa esto solo cuando soporte te lo haya pedido y solo con nosotros vigilando.

Qué significan los iconos en la columna de tipo de Wallet Pass

Cada fila muestra una pequeña G o un glifo de Apple en la columna Wallet Pass type. G es una tarjeta instalada vía Google Wallet; el glifo de Apple es una instalada vía Apple Wallet. El contenido de la tarjeta es el mismo — la columna solo te dice qué SO ejecuta el dispositivo.