Lineamientos del botón

Estos lineamientos se diseñaron para ayudarte a implementar la API de la Billetera de Google en tus apps o sitios web.

Botón Guardar en Google Pay

El botón Guardar en Google Pay debe llamar a uno de los flujos de la API Passes de Google Pay. Estos flujos muestran una pantalla en la que los usuarios pueden guardar tarjetas de embarque, entradas para eventos o transporte público, tarjetas de lealtad, tarjetas de regalo y ofertas en sus dispositivos Android. Este botón se puede usar en las apps, los sitios web, los correos electrónicos o los SMS de un comercio.

Recursos

Los botones Guardar en Google Pay están disponibles como archivos EPS y SVG.

Descargar recursos: EPS Descargar recursos: SVG

Todos los botones Guardar en Google Pay que se muestran en tu sitio, app o comunicaciones por correo electrónico deben cumplir con nuestros lineamientos de desarrollo de la marca, que se describen en esta página. Estas incluyen, entre otras, las siguientes:

  • Tamaño en relación con otros botones o elementos similares de la página
  • Contrastar el color con el fondo del área circundante
  • espacio en blanco

Los botones Guardar en Google Pay están disponibles en los siguientes idiomas: árabe, checo, checo, danés, español, finés, francés, alemán, indonesio, inglés, holandés, inglés, italiano, japonés, noruego (Bokmal),, portugués, ruso, chino simplificado, chino tradicional, sueco, tailandés y ucraniano.

Tamaño

Ajusta el alto y el ancho del botón Guardar en Google Pay para que se ajuste a tu diseño. Si hay otros botones en la página, el botón Guardar en Google Pay debe tener un tamaño igual o más grande que estos botones. No hagas que el botón Guardar en Google Pay sea más pequeño que otros botones.

Estilo

Los botones Guardar en Google Pay están disponibles en tres variantes: negro, blanco y blanco con un contorno negro. Se proporcionan botones con versiones localizadas del texto. No crees botones con tu propio texto localizado.

Botones Guardar en Google Pay en negro Botones Guardar en Google Pay en blanco Botones Guardar en Google Pay con contorno en blanco
Negro White Blanco con contorno
Usa el botón negro sobre fondos blancos o claros para ofrecer contraste. No uses el botón negro en fondos oscuros. En su lugar, usa el botón blanco. Usa el botón blanco en fondos oscuros o coloridos. No uses el botón blanco sobre fondos blancos o claros. En su lugar, usa el botón negro o el blanco con un contorno. Usa el botón blanco con contorno como alternativa al botón negro sobre fondos blancos o claros. No uses este botón en fondos oscuros o coloridos. En su lugar, usa el botón blanco estándar.

espacio en blanco

Siempre mantén un espacio libre mínimo de 8 dp en todos los lados del botón Save to Google Pay. Asegúrate de que el espacio libre nunca esté roto con gráficos o texto.

Botones para guardar en Google Pay en negro rodeados de espacio libre

Altura mínima

Todos los botones Guardar en Google Pay deben tener una altura mínima de 36 dp.

Botones para guardar en Google Pay en blanco rodeados de espacio libre

Sugerencias y precauciones

Lo que se debe hacer Incorrecto
Qué hacer: Usa solo los botones Guardar en Google Pay que proporciona Google. Lo que no debes hacer:No crees tus propios botones de Guardar en Google Pay ni modifiques la fuente, el color, el radio del botón ni el padding dentro del botón de ninguna manera.
Qué hacer: Usa el mismo estilo de botón en todo el sitio. Es posible que el color del botón se adapte si cambia el color del fondo. Lo que no debes hacer: Asegúrate de que los botones Guardar en Google Pay sean más pequeños que otros botones.
Qué hacer: Asegúrate de que el tamaño de los botones Guardar en Google Pay sea igual o mayor que el de otros botones. Lo que no debes hacer: No uses un color de botón similar al fondo. Por ejemplo, no uses el botón blanco sobre un fondo blanco.
Qué debes hacer: Asegúrate de elegir un color para el botón que contraste con tu fondo. Lo que no debes hacer: No ajustes la escala del botón.
Qué hacer: Mantén la misma proporción del botón cuando cambies el tamaño de los botones Save to Google Pay.

Prácticas recomendadas para la colocación de botones

Para maximizar la cantidad de objetos guardados, muestra los botones Guardar en Google Pay de forma destacada en tu app, sitio web o correo electrónico. Debes cumplir con las siguientes prácticas recomendadas para recibir la aprobación de la marca de Google.

Tarjetas de lealtad

Te recomendamos que coloques el botón Guardar en Google Pay cerca de las experiencias del usuario en tu app, sitio o comunicación por correo electrónico en las que se muestra la información actual de lealtad de los clientes. También es útil mostrar el botón en las pantallas de confirmación que aparecen inmediatamente después de que los usuarios se registran en tu programa de lealtad en tu app o sitio web.

Página de ejemplo de un sitio web con el botón Guardar en Google Pay

Tarjetas de regalo

Te recomendamos que coloques el botón Guardar en Google Pay en la pantalla de confirmación que aparece después de que un usuario compra una tarjeta de regalo en tu app o sitio web. También es una buena idea mostrar el botón en cualquier comunicación por correo electrónico que se envíe al destinatario de la tarjeta de regalo.

Ofertas

Te recomendamos que coloques el botón Guardar en Google Pay cerca de las pantallas o páginas de la app o el sitio web donde los usuarios acceden a las ofertas. Para obtener mejores resultados, te recomendamos que incluyas el botón en cualquier comunicación por correo electrónico sobre la oferta.

Boletos para eventos y transporte público

Muestra el botón Guardar en Google Pay al final del flujo de compra o en las pantallas, páginas web o correos electrónicos de la app de confirmación. Te recomendamos que coloques el botón Guardar en Google Pay donde los usuarios accedan a sus entradas en tu app o sitio web.

Ejemplos de páginas web de smartphones con el botón Guardar en Google Pay

Tarjetas de embarque

Muestra el botón Guardar en Google Pay al final del flujo de compra o en las pantallas, páginas web o correos electrónicos de la app de confirmación. También puedes mostrar el botón en el que los pasajeros registran su llegada a sus vuelos o ver sus tarjetas de embarque en tu sitio web o app, o incluirla en correos electrónicos relevantes.

Ejemplos de páginas web de smartphones en las que se muestran tarjetas de embarque con el botón Guardar en Google Pay

Uso del nombre del producto de Google Pay en el texto

Puedes usar texto para indicarle al usuario que su tarjeta de embarque, evento o boleto de transporte público, tarjeta de lealtad, oferta o tarjeta de regalo se guardó en su dispositivo.

Usar mayúsculas en las letras “G” y “P”.

Usa siempre una “G” mayúscula y una “P” mayúscula seguida de letras minúsculas para hacer referencia a Google Pay. No escribas con mayúscula el nombre completo "GOOGLE PAY", a menos que coincida con el estilo tipográfico de tu IU.

No abrevies Google Pay

Escribe siempre las palabras “Google” y “Pagar”.

Combina con el estilo de tu IU

Configura “Google Pay” con la misma fuente y estilo tipográfico que el resto del texto de la IU. No imites el estilo tipográfico de Google.

No traducir Google Pay

Escribe siempre “Google Pay” en inglés. No la traduzcas a otro idioma.