Si desarrollas aplicaciones para usuarios de RU, usa los botones “Guardar en el teléfono”, ya que la Billetera de Google no está disponible en esos países. Consulta los recursos y lineamientos pertinentes. Si desarrollas para usuarios fuera de RU, descarga los recursos que se encuentran a continuación para actualizar el botón Agregar a la Billetera de Google.
Esta sección de la documentación está diseñada para ayudarte a crear imágenes y otros elementos de la interfaz de usuario para que se vean bien en la app de la Billetera de Google.
Recursos
Botón Agregar a la Billetera de Google
El botón Agregar a la Billetera de Google se usa siempre que dirijas a los usuarios a guardar un pase o una tarjeta de tu app o sitio web en su billetera. El botón Agregar a la Billetera de Google debe llamar a uno de los flujos de la API de la Billetera de Google. Estos flujos muestran la app de la Billetera de Google, en la que los usuarios pueden seguir las instrucciones para guardar pases en su dispositivo Android y en su Cuenta de Google. Este botón se puede usar en apps, sitios web o correos electrónicos.
Los botones Agregar a la Billetera de Google están disponibles en formatos XML, SVG y PNG para Android.
Descargar recursos - Android XML Descargar recursos - SVG Descargar recursos - PNGBotón Ver en la Billetera de Google
El botón Ver en la Billetera de Google se usa para vincular directamente a un usuario a su billetera y ver un pase o una tarjeta guardados anteriormente. Este botón se puede usar en apps, sitios web o correos electrónicos.
Los botones Ver en la Billetera de Google están disponibles en formato SVG y PNG.
Descargar recursos (SVG) Descargar recursos (PNG)Todos los botones que se muestren en tu sitio, aplicación o comunicaciones por correo electrónico deben cumplir con los lineamientos de la marca que se describen en esta página. Estos son algunos ejemplos de los lineamientos:
- Tamaño en relación con otros botones o elementos similares de la página
- No se deben alterar la forma ni el color de los botones.
- espacio en blanco
Botones localizados
Se proporcionan botones de la Billetera de Google localizados para todos los mercados en los que está disponible la Billetera. Si desarrollas aplicaciones para usuarios de estos mercados, usa siempre los botones vinculados anteriormente. No crees tu propia versión de los botones. Si no hay una versión localizada del botón disponible en tu mercado, usa la versión en inglés.
Los botones Agregar a la Billetera de Google están disponibles en los siguientes idiomas: albanés, árabe, armenio, azerí, bosnio, búlgaro, catalán, chino (Hong Kong), chino (tradicional), croata, checo, danés, neerlandés, inglés (Australia, Canadá, Sudáfrica, India, Reino Unido, Singapur y EE.UU.), estonio, filipino, finlandés, francés (Canadá), francés (Francia), georgiano, alemán, griego, hebreo, húngaro, islandés, indonesio, italiano, japonés, kazajo, kirguís, letón, lituano, macedonio, malayo, noruego,, portugués (Brasil), portugués (Portugal), rumano, ruso (Bielorrusia), serbio, eslovaco, esloveno, español (España), español (Latinoamérica), sueco, tailandés, turco, ucraniano, uzbeko y vietnamita.
Nombre localizado
Para brindarles claridad a los usuarios, el nombre del producto Billetera de Google se localiza en determinados mercados. Si desarrollas aplicaciones para usuarios de estos países, usa siempre el nombre localizado que se indica a continuación para la Web, el correo electrónico y la impresión. No crees tu propia versión localizada de “Billetera de Google”. Si tu mercado no aparece en la siguiente lista, usa “Billetera de Google” en inglés.
| País | Nombre |
|---|---|
| Bielorrusia | Google Кошелек |
| Brasil | Carteira do Google |
| Chile | Billetera de Google |
| República Checa | Peněženka Google |
| Grecia | Πορτοφόλι Google |
| Hong Kong | Billetera de Google |
| Lituania | Google Piniginė |
| Polonia | Portfel Google |
| Portugal | Carteira da Google |
| Rumania | Portofel Google |
| Eslovaquia | Peňaženka Google |
| Taiwán | Billetera de Google |
| Türkiye | Google Cüzdan |
| EAU | محفظة Google |
| Ucrania | Google Гаманець |
|
Estados Unidos (español)
*Usa este nombre en EE.UU. si tu IU está en español |
Billetera de Google |
Tamaño
Ajusta la altura y el ancho del botón Agregar a la Billetera de Google para que se adapte a tu diseño. Si la página tiene otros botones, el botón Agregar a la Billetera de Google debe tener el mismo tamaño o uno mayor. No crees un botón Agregar a la Billetera de Google más pequeño que los otros botones.
Estilo
Los botones Agregar a la Billetera de Google están disponibles en dos variantes: principal y condensado. El botón Agregar a la Billetera de Google solo está disponible en negro. Se proporcionan versiones localizadas del botón. No crees botones con tu propio texto localizado.
| Principal | Condensada |
|---|---|
|
|
| Usa el botón principal en fondos blancos y claros. | Usa el botón condensado si no hay suficiente espacio para el botón principal o con el ancho total. |
espacio en blanco
Siempre mantén un espacio libre de 8 dp en todos los lados del botón Agregar a la Billetera de Google. Asegúrate de que el espacio libre nunca incluya elementos gráficos o texto.
Altura mínima
Todos los botones de Agregar a la Billetera de Google deben tener una altura mínima de 48 dp.
Qué debes y no debes hacer
| Qué hacer | Lo que no debes hacer |
|---|---|
| Haz lo siguiente: Usa solo los botones de Agregar a la Billetera de Google que proporciona Google. | No lo hagas: No crees tus propios botones de Agregar a la Billetera de Google ni alteres la fuente, el color, el radio del botón o el padding dentro del botón de ninguna manera. |
| Qué hacer: Usa el mismo estilo de botón en todo el sitio. | No lo hagas: No hagas que los botones de Agregar a la Billetera de Google sean más pequeños que otros botones. |
| Hazlo: Asegúrate de que el tamaño de los botones de Agregar a la Billetera de Google siga siendo igual o mayor que el de otros botones. | No lo hagas: No alteres el color del botón. |
| Acción: Mantén la misma proporción de botones cuando cambies el tamaño de los botones Agregar a la Billetera de Google. | No lo hagas: No cambies la escala del botón libremente. |
| Hazlo: Usa la versión localizada de los botones que se proporciona. | No lo hagas: No crees tu propia versión localizada del botón. |
Prácticas recomendadas para la posición de los botones
Muestra el botón Agregar a la Billetera de Google en las pantallas de confirmación de la app, las páginas web o los correos electrónicos. Consulta las siguientes prácticas recomendadas para guiar el diseño de tu IU.
Pases de transporte público
Muestra el botón Agregar a la Billetera de Google en las pantallas de confirmación de la app, las páginas web o los correos electrónicos. Te recomendamos que coloques el botón Agregar a la Billetera de Google donde los usuarios accedan a sus pases de transporte público en tu app o sitio web.
Uso del nombre del producto Billetera de Google en texto
Puedes usar texto para indicarle al usuario que su tarjeta de transporte público se guardó en su dispositivo.
Escribe las letras "G" y "W" en mayúscula
Siempre usa una "B" mayúscula y una "G" mayúscula seguidas de letras minúsculas para hacer referencia a la Billetera de Google. No escribas todo el nombre "Billetera de Google" en mayúscula, a menos que sea para que coincida con el estilo tipográfico de tu IU.
No abrevies Billetera de Google
Siempre escribe las palabras "Google" y "Wallet".
Adapta las palabras al estilo de tu IU
Configura "Billetera de Google" en el mismo estilo tipográfico y de fuente que el resto del texto de tu IU. No imites el estilo tipográfico de Google.
Usa siempre la versión localizada de "Billetera de Google"
Siempre escribe "Billetera de Google" en el texto localizado proporcionado.
Diseño
Usa los campos height y size de la etiqueta HTML g:savetoandroidpay para modificar la altura y el ancho de los botones de Agregar a la Billetera de Google. Usa la especificación textsize=large para aumentar significativamente el tamaño del texto y los botones en las implementaciones para dispositivos móviles o en los casos con requisitos especiales de IU.
Usa theme para establecer el color de los botones. En la siguiente tabla, se muestra cómo estos parámetros de configuración afectan el botón Agregar a la Billetera de Google.
Logotipos
Lineamientos de imágenes de logotipos
La Billetera de Google enmascara tu logotipo en una forma circular.
A continuación, se incluye una lista de recomendaciones para las imágenes de logotipos en la interfaz de usuario:| Lineamiento | Descripción |
|---|---|
| Tipo de archivo preferido | PNG |
| Tamaño mínimo | 660 px por 660 px |
| Relación de aspecto de la imagen | 1:1 |
| Relación de aspecto de la portada | 1:1 |
| Tamaño real de los píxeles | Ajuste al tamaño del dispositivo |
| Máscara circular del logotipo |
Tu logotipo se enmascara para que se ajuste a un diseño circular. Asegúrate de que tu logotipo quepa dentro del área segura. No apliques una máscara previa a tu logotipo. Deja el logotipo en un cuadrado con un color de fondo con sangrado completo. El logotipo debe tener un margen del 15% para que no se corte cuando se aplique la máscara. 
|
La Billetera de Google enmascara tu logotipo en una forma circular.
Lineamientos de imagen de logotipo ancho
Los boletos para eventos, las tarjetas de embarque, los pases de transporte público con código QR, las tarjetas de lealtad, las ofertas, las tarjetas de regalo, los pases genéricos y los pases privados genéricos admiten imágenes de logotipos anchos. A continuación, se incluye una lista de recomendaciones para la interfaz de usuario en el caso de imágenes de logotipos anchos:
| Lineamiento | Descripción |
|---|---|
| Tipo de archivo preferido |
PNG Usa una imagen con un color de fondo para obtener mejores resultados (te recomendamos que uses el mismo color que el fondo del pase). |
| Tamaño recomendado | 1280 px por 400 px |
| Tamaño mínimo | 400 px de altura y ancho proporcional (más orientación en la sección sobre la relación de aspecto recomendada)
Usa imágenes rectangulares anchas. |
| Relación de aspecto recomendada |
Si la imagen no está configurada con la relación de aspecto recomendada, se cambiará su tamaño para que se ajuste a la relación de aspecto de los espacios de encabezado proporcionados. En el siguiente diagrama, se detalla cómo se cambiará el tamaño del recurso de imagen según la relación de aspecto. 
|
Color de fondo de la tarjeta
Puedes establecer el color de fondo con el campo hexBackgroundColor. Si no estableces el valor, un algoritmo analiza el logotipo, encuentra el color dominante y lo usa como color de fondo.
Imágenes hero
El campo class.heroImage aparece como un banner de ancho completo en el cuerpo de la tarjeta.
Lineamientos sobre las imágenes hero
A continuación, se incluye una lista de recomendaciones para las imágenes de héroe de la interfaz de usuario:
| Lineamiento | Descripción |
|---|---|
| Tipo de archivo preferido | PNG |
| Tamaño recomendado |
1032 x 336 px Usa imágenes rectangulares anchas. Para obtener mejores resultados, usa una imagen con un fondo de color. |
| Relación de aspecto | 3:1 o más ancha |
| Tamaño de la pantalla |
El ancho completo de la tarjeta y la altura proporcional 
|
Imágenes de ancho total
El campo *.imageModulesData.mainImage en una clase o un objeto aparece como una imagen de ancho completo en un pase.
Lineamientos para imágenes de ancho completo
A continuación, se incluye una lista de recomendaciones para la interfaz de usuario de imágenes de ancho completo:
| Lineamiento | Descripción |
|---|---|
| Tipo de archivo preferido | PNG |
| Tamaño mínimo |
1860 px de ancho y altura variable Usa imágenes rectangulares anchas. Para obtener mejores resultados, usa una imagen con un fondo de color. |
| Relación de aspecto | Variable |
| Tamaño de la pantalla |
El ancho completo de la plantilla y la altura proporcional
|
| Usa la misma combinación de colores que usas para tu logotipo. |
Imágenes de códigos de barras
Algunas verticales permiten imágenes arriba y debajo del código de barras.
Imágenes arriba del código de barras
A continuación, se incluye una lista de recomendaciones para la interfaz de usuario de las imágenes que se encuentran sobre el código de barras:
| Lineamiento | Descripción |
|---|---|
| Tipo de archivo preferido | PNG |
| Altura máxima |
20 dp (con la relación de aspecto máxima) El tamaño recomendado es de 80 px de alto y de 80 a 780 px de ancho si hay dos imágenes. Esto permite que estén uno al lado del otro. Si una imagen es cuadrada y la otra es rectangular, deben tener un tamaño de 80 × 80 px y 780 × 80 px. |
| Relación de aspecto |
Sin restricciones. Para un máximo de 20 dp de alto y ancho de una sola imagen, usa una relación de aspecto de 20:1. Si solo quieres una imagen sobre el código de barras, toma el ancho completo (excluye el padding). La imagen debe tener un tamaño de 1,600 x 80 px. |
| Tamaño máximo de visualización (imagen única) | 20 dp de alto y 400 dp de ancho |
Imagen debajo del código de barras
A continuación, se incluye una lista de recomendaciones para la interfaz de usuario de la imagen que se encuentra debajo del código de barras:
| Lineamiento | Descripción |
|---|---|
| Tipo de archivo preferido | PNG |
| Altura máxima |
20 dp (con la relación de aspecto máxima) El tamaño recomendado es de 80 px de alto y de 80 a 1,600 px de ancho. Si es cuadrada, debe ser de 80 × 80 px. Si es rectangular, debe tener 1,600 x 80 px. |
| Relación de aspecto sin restricciones. Para una altura y un ancho máximos de 20 dp, usa una relación de aspecto de 20:1. | Si quieres una imagen de ancho completo (sin incluir el padding), la imagen debe tener 1,600 x 80 px. |
| El tamaño máximo de visualización es de 20 dp de alto y 400 dp de ancho. |
Módulos
Un módulo representa un grupo de campos en una sección específica de una plantilla. En la siguiente tabla, se incluyen lineamientos sobre la cantidad de módulos que debes incluir en tus clases y objetos para garantizar que tus tarjetas se muestren correctamente en la app de la Billetera de Google.
| Lineamiento | Descripción |
|---|---|
imageModulesData
|
Usa solo un imageModulesData en tu clase o en los objetos que crees.
|
infoModuleData
|
Usa hasta dos
Un |
linksModuleData
|
Usa hasta cuatro URIs de
Es posible que tengas dos URIs |
textModulesData
|
Usa hasta dos campos
Es posible que tengas un URI |
infoModuleData
InfoModuleData contiene información personalizable y de miembros, y aparece en la vista expandida. Usa este módulo para almacenar información como fechas de vencimiento, saldos de puntos secundarios o saldos de valores almacenados.
linksModuleData
El módulo de vínculos contiene URIs a páginas web, números de teléfono y direcciones de correo electrónico. A continuación, se incluye una lista de recomendaciones para la interfaz de usuario del módulo de vínculos:
| Lineamiento | Ejemplo de configuración | Imagen de ejemplo |
|---|---|---|
Usa el prefijo http: cuando asignes un URI a un sitio web o a una ubicación en Google Maps. Este prefijo permite que un consumidor toque el vínculo y navegue al sitio web o vea la ubicación en Google Maps.
Este prefijo también hace que aparezca un ícono de un vínculo o un mapa delante de la descripción en tu tarjeta.
|
'uri': 'http://maps.google.com/?q=google'
|
|
'uri': 'http://developer.google.com/wallet/'
|
|
|
Usa el prefijo tel: cuando definas un número de teléfono. Este prefijo permite que el consumidor toque el vínculo para marcar el número. Este prefijo también crea un ícono de un teléfono delante de la descripción de texto en la tarjeta.
|
'uri': 'tel:6505555555'
|
|
Usa el prefijo mailto: cuando definas una dirección de correo electrónico.
Este prefijo permite que el cliente toque el vínculo para enviar un correo electrónico a la dirección. Este prefijo también crea un ícono de un correo electrónico delante de la descripción de texto en la tarjeta.
|
'uri': 'mailto:jonsmith@email.com'
|
|
Encabezados, etiquetas y nombres
Escribe los encabezados, las etiquetas y los nombres con mayúsculas al inicio de cada palabra.
Políticas de contenido
El contenido de cada campo de un pase debe satisfacer las políticas de contenido de Pagos. El contenido de los sitios web a los que haces referencia en la clase también debe cumplir con estas políticas.
Colocación de datos de la plataforma de socios
Para asegurarte de que los usuarios puedan acceder a tu app o sitio web con muchas funciones sobre el Pase, incorpora el vínculo directo a tu app o sitio web en la propiedad linksModuleData.* de la clase o el objeto del Pase. Esto permite que un usuario navegue a tu plataforma desde el pase, que aparece en la Billetera de Google. Para ver cómo se renderiza, ve a las secciones de diseño de las verticales de pases.