Tarjetas en el móvil

Google Wallet para una tarjeta de fidelización

Google Wallet monta la tarjeta de otra manera que Apple, y si diseñas pensando solo en el iPhone, en Android se ve mal. Aquí van las dos.

Actualizado el 10 de agosto de 2026 · lo mantenemos porque lo usamos nosotros.

La diferencia de fondo con Apple

Antes de las medidas conviene entender por qué no se puede «exportar lo mismo» a los dos sistemas:

	Apple Wallet	Google Wallet
Qué es la tarjeta	Un archivo `.pkpass` firmado que se descarga al móvil	Un objeto que vive en los servidores de Google; al móvil llega un enlace
Las imágenes	Van dentro del archivo	Se enlazan por URL: tienen que estar publicadas en tu servidor
Para actualizarla	Avisas y el móvil se descarga el pase nuevo	Actualizas el objeto en la API de Google
Permiso previo	Certificado de Apple, de pago anual	Cuenta de emisor y revisión de Google

La consecuencia práctica que pilla a todo el mundo. En Google, tus imágenes tienen que estar accesibles públicamente por URL. Si las guardas en una carpeta privada, o si la URL cambia en cada despliegue, la tarjeta se queda sin imagen en el móvil del cliente — y tú no te enteras, porque en tu iPhone se ve perfecta.

Las dos imágenes

Una tarjeta de fidelización de Google Wallet enseña dos imágenes:

Imagen	Medida	Dónde sale	Qué poner
Logo del programa `programLogo`	660 × 660 px mínimo, 1:1	Arriba, junto al nombre, en la ficha y en la lista. Recortado en círculo.	Tu símbolo, centrado, sobre un cuadrado con fondo a sangre.
Imagen de cabecera `heroImage`	1032 × 812 px recomendada	Banda en la cara de la tarjeta. Se muestra al 100 % del ancho.	En una cartilla, los huecos de sello. Si no, una foto de tu local.

Las dos en PNG. Y en el logo hay un detalle que Google sí pone por escrito y que arruina la mitad de los que se suben: deja un margen de seguridad del 15 % alrededor. Lo que toque ese borde se lo come el recorte circular.

La cabecera de Google NO tiene la forma del strip de Apple. Apple pide una banda muy apaisada (unos 2,6:1). Google recomienda 1032 × 812, que es casi cuadrada. Ahora bien, la referencia de la API solo dice que la imagen «se muestra al 100 % del ancho»: una banda apaisada también entra, y es lo que hacemos aquí — la misma imagen de sellos que va dentro del pase de Apple se enlaza como heroImage en Google. Funciona; simplemente no es la proporción que ellos recomiendan para un hero diseñado a propósito. Si vas a cuidar las dos por separado, esta es la que hay que rehacer.

El logo se recorta en círculo (y ahí muere tu logotipo)

Este es el detalle que arruina más diseños. En Apple el logo va en una caja apaisada y tu logotipo largo cabe entero. En Google, se recorta redondo.

Si mandas el mismo archivo a los dos sitios, en Android tu logotipo pierde los extremos y se queda con las tres letras del medio. La solución no es técnica, es de diseño:

Prepara una versión cuadrada del logo solo para Google.
Céntrala y déjale aire alrededor: lo que toque el borde del cuadrado se pierde en el recorte.
Si tu marca es un texto largo, usa el símbolo o la inicial, no el logotipo completo.

Los campos que se ven

Google organiza la tarjeta de otra manera: no hay «filas» como en Apple, hay campos con nombre propio.

Campo	Qué es	Qué conviene poner
`issuerName`	Quién emite	El nombre del club, no solo el del negocio
`programName`	El título del pase	El nombre del cliente, si lo tienes
`accountName`	El titular	Nombre y apellido del socio
`loyaltyPoints`	El contador grande	«7/10» en una cartilla, el saldo si vas por puntos
`textModulesData`	Bloques de texto libres	Nivel, próximo premio, condiciones cortas
`hexBackgroundColor`	El color de la tarjeta	Un hex `#rrggbb`. Si lo dejas vacío, lo saca del color dominante de tu cabecera (y si no hay, del logo)

Si no pones color, Google se lo inventa — y acierta menos de lo que crees. En Apple defines fondo y texto por separado. En Google das hexBackgroundColor en formato #rrggbb, y si lo dejas vacío el sistema tira del color dominante de tu imagen de cabecera; si tampoco hay cabecera, del color dominante de tu logo. Una foto con mucho marrón te deja la tarjeta marrón. Ponlo tú.

El código de escaneo

La tarjeta lleva un código para que tu equipo la escanee. Lo habitual y lo que mejor funciona en un mostrador es un QR: se lee con cualquier móvil, aguanta que la pantalla esté sucia o con poco brillo, y no obliga a comprar un lector.

Un detalle pequeño con consecuencias: el texto que va bajo el código. Si dejas ahí el identificador del socio, el cliente ve un churro de letras debajo de su tarjeta. Es preferible dejarlo vacío o poner algo que signifique algo para él.

Los mensajes

Para avisar al cliente en Android se le añade un mensaje a su tarjeta. Es una forma distinta de la de Apple, donde lo que avisa es la actualización del propio pase.

Esto tiene dos consecuencias que hay que tener en la cabeza:

El mismo aviso se ve distinto en cada sistema. Prueba siempre en un iPhone y en un Android antes de mandar nada a toda tu base.
Los mensajes se acumulan en la tarjeta. No son notificaciones que desaparecen: se quedan ahí. Mandar uno por semana convierte la tarjeta en un tablón de anuncios viejos.

Sobre qué escribir y cuándo, tenemos una guía entera: las notificaciones del pase.

La revisión de Google

A diferencia de Apple —donde con el certificado ya puedes emitir— en Google Wallet las clases de pase pasan por una revisión antes de poder emitirse a gran escala. No es instantáneo y conviene contarlo en los plazos: si prometes a un cliente que su tarjeta está lista «mañana», que sea mañana en iPhone y unos días en Android.

Los dos sistemas, o ninguno. En España y Portugal, Android es más de la mitad del parque. Montar solo Apple porque «es más fácil» significa dejar fuera a la mitad de tus clientes — y son justo los que no van a entender por qué a su amigo le funciona y a él no.

Preguntas frecuentes

¿Se puede tener la misma tarjeta de fidelización en iPhone y en Android?

Sí, pero no es el mismo archivo. Apple usa un paquete .pkpass que se descarga; Google Wallet usa un objeto que vive en sus servidores y al que se enlaza. Hay que montar las dos, y el diseño no se traslada tal cual.

¿Qué imagen se ve en una tarjeta de Google Wallet?

Dos: el logo del programa (programLogo), mínimo 660 × 660 px y cuadrado, que sale arriba recortado en círculo; y la imagen de cabecera (heroImage), que Google recomienda a 1032 × 812 px y muestra al 100 % del ancho de la tarjeta. Las dos en PNG.

¿Por qué mi logo se ve cortado en Android?

Porque Google lo enmascara en círculo. Un logotipo alargado pierde los extremos. Hay que subir una versión cuadrada de al menos 660 × 660 px, centrada y con un margen de seguridad del 15 % alrededor: lo que toque el borde se lo come el recorte.

¿Cómo se avisa al cliente en Google Wallet?

Se añade un mensaje al objeto de la tarjeta. Es distinto de Apple, donde lo que avisa es la actualización del propio pase. Por eso el mismo aviso puede verse diferente en cada móvil y hay que probarlo en los dos.

Si vienes de Apple o vas hacia allá, la tabla de medidas está en medidas del pase de Apple Wallet.

Y si prefieres no montar nada de esto

Todo lo de esta página lo hace etlas solo: genera las imágenes en su medida, arma el pase para Apple y para Google, y lo actualiza en el móvil de tu cliente cada vez que sella. Tú eliges los colores y los premios.

Ver precios y empezar

Seguir leyendo