Lineamientos de desarrollo de la marca

Estos lineamientos te ayudan a implementar Google Pay en tus apps.

Botones de pago de Google Pay

El botón de pago de Google Pay llama a la API de Google Pay. La API de Google Pay muestra la hoja de pagos en la que los usuarios pueden seleccionar su forma de pago.

Recursos

Google Pay proporciona la API de PayButton que te permite personalizar el tema, la forma y el radio de las esquinas del botón de pago de Google Pay para que coincidan con el diseño de tu IU.

Cuando usas la API de PayButton, obtienes lo siguiente:

• Cumplimiento de la marca: Integra sin problemas un botón de pago de Google Pay que cumpla automáticamente con los lineamientos de desarrollo de la marca más recientes de Google Pay y, al mismo tiempo, ofrezca opciones personalizables para que coincidan con el diseño de tu IU con el mínimo esfuerzo.
• Forma personalizable: Ajusta la redondez de las esquinas del botón para que coincida perfectamente con la estética de diseño existente.
• Experiencia localizada: El título del botón se traduce automáticamente al idioma del dispositivo del usuario, lo que mejora la accesibilidad.
• Personalización para los usuarios: Ayuda a los usuarios a descubrir las formas de pago disponibles en su billetera de Google Pay para que el proceso de confirmación de la compra sea más rápido.

Si este método conveniente o los idiomas admitidos no se ajustan a tus necesidades, comunícate con nosotros.

Estilo

Los botones de pago de Google Pay están disponibles en dos variantes: oscura y clara. Cada variación incluye el texto "Comprar con" y no lo incluye. Se proporcionan botones de pago con versiones localizadas del texto “Comprar con”, pero la marca de Google Pay siempre se muestra sin traducir. No crees botones con tu propio texto localizado.

Tipo de botón	Oscuro	Luz
libro
buy
checkout
donar
pedido
pagar
plain
suscribirse
Usa la redacción del tipo de botón que mejor se adapte a tu página de confirmación de compra.	Usa botones oscuros sobre fondos claros para proporcionar contraste.	Usa botones claros sobre fondos oscuros o de color.

Personalización

Cuando los usuarios tengan una tarjeta apta en su cuenta de Google Pay, los botones de pago "Comprar" y "Pagar" mostrarán la red de la tarjeta y los últimos cuatro dígitos del número de la tarjeta. La red de la tarjeta se mostrará en la misma posición que el texto "Comprar con" o "Pagar con".

Tipo de botón	Oscuro	Luz
comprar y pagar
Usa el tipo de botón de compra o pago para habilitar la personalización.	Usa botones oscuros sobre fondos claros para proporcionar contraste.	Usa botones claros sobre fondos oscuros o de color.

Espacio libre

Siempre mantén un espacio libre mínimo de 8 dp en todos los lados del botón de pago. Asegúrate de que el espacio libre nunca incluya elementos gráficos o texto. Esta es una guía de diseño general, no una especificación de la API de PayButton.

Ancho mínimo

El botón de Google Pay debe tener un ancho mínimo de 90 dp. Todos los botones de pago de "Comprar con Google Pay" deben tener un ancho mínimo de 152 dp.

Qué debes y no debes hacer

Lo que debes hacer

Lo que no debes hacer

Usa solo los botones de Google Pay que proporciona Google. Usa los botones de Google Pay para iniciar el flujo de pago. Usa el mismo estilo de botón en todo el sitio. Asegúrate de que el tamaño de los botones de Google Pay siga siendo igual o mayor que el de los otros botones. Asegúrate de elegir un color de botón que contraste con el fondo.

Crear tus propios botones de Google Pay o alterar la fuente, el color, el radio del botón o el relleno dentro del botón de cualquier manera Usar los botones de pago de Google Pay para iniciar cualquier acción que no sea el flujo de pago Alternar entre las variaciones o versiones de color con texto o sin él Haz que el botón de Google Pay sea más pequeño que los demás botones. Usa un color de botón similar al del fondo. Por ejemplo, no uses el botón claro sobre un fondo claro.

Importante: El uso de la API de PayButton es un requisito cuando se renderiza un botón de pago de Google Pay en tu aplicación.

Marca de Google Pay

Cuando muestres Google Pay como opción de pago en tus flujos de pago, usa solo la marca de Google Pay que se proporciona a continuación.

Recursos

Descarga la marca de Google Pay como un archivo SVG:

Descargar recursos

Marcar

Usa la siguiente marca de Google Pay cuando muestres Google Pay como opción de pago:

Si lo haces para otras marcas, muestra "Google Pay" en texto junto a la marca. No cambies el color ni el grosor del contorno de la marca, ni la alteres de ninguna manera. Usa solo la marca proporcionada por Google.

Espacio libre

Siempre mantén al menos la mitad (0.5 veces) de la altura de la super G en todos los lados de la marca de aceptación de Google Pay. Asegúrate de que el espacio libre sea uniforme con cualquier otra identidad de marca que muestres.

Tamaño

Ajusta la altura para que coincida con las otras identidades de marca que se muestran en tu flujo de pagos. No hagas que la marca de Google Pay sea más pequeña que las otras identidades de marca.

Usa la marca de Google Pay para representar Google Pay como una opción de pago y sigue usándola en todo el flujo de compra.

Qué debes y no debes hacer

Lo que debes hacer	Lo que no debes hacer
Usa solo la marca de Google Pay proporcionada por Google. Usa la marca de Google Pay para indicar que Google Pay es una opción de pago en los flujos de pago.	Crear tu propia marca o alterar la marca de Google Pay de cualquier manera Traduce la palabra "Pagar". Mostrar la marca de Google Pay en un tamaño diferente o más pequeño que el de las otras opciones de pago

Google Pay en texto

Puedes usar texto para indicar que Google Pay es una opción de pago y para promocionarlo en tus comunicaciones de marketing.

Escribe las letras "G" y "P" en mayúscula

Siempre escribe con mayúscula la “G” y la “P”, seguidas de letras minúsculas. No escribas todo el nombre en mayúsculas (“GOOGLE PAY”), a menos que sea para que concuerde con el estilo tipográfico de tu IU. Nunca uses "GOOGLE PAY" en mayúsculas en las comunicaciones de marketing.

No abrevies Google Pay

Siempre escribe completos “Google” y “Pay”.

Adapta las palabras al estilo de tu IU

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

No traduzcas Google Pay

Siempre escribe "Google Pay" en inglés. No lo traduzcas a otro idioma.

Usa el símbolo de marca comercial la primera vez que aparezca "Google Pay" en las comunicaciones de marketing

Cuando uses "Google Pay" en tus comunicaciones de marketing, muestra el símbolo de marca comercial (™) la primera vez que aparezca o la vez que más se destaque. No uses el símbolo de marca comercial para indicar que Google Pay es una opción de pago en tu IU.

Si no se muestran los logotipos de otras opciones de pago, representa "Google Pay" con texto.	Configura "Google Pay" con la misma fuente y el mismo estilo tipográfico que el resto del texto de tu IU.	Cuando muestres la información de pago en las páginas de confirmación y los recibos por correo electrónico, asegúrate de indicar que el cliente pagó con Google Pay.

Prácticas recomendadas de Google Pay

Maximiza tus conversiones con flujos de confirmación de compra y hojas de pago que permiten a los clientes revisar su información de pago y confirmar su compra de forma rápida y sencilla.

Estas son algunas prácticas recomendadas:

Establece Google Pay como la opción de pago principal

Cuando sea posible, muestra el botón de Google Pay de forma destacada y considera convertirlo en la opción de pago predeterminada o única.

Permite que tus clientes realicen compras sin una cuenta

La creación de cuentas ralentiza el proceso de confirmación de compra y puede provocar que se abandonen los carritos. Usa Google Pay para habilitar una compra como invitado más rápida. Si quieres que tus clientes creen una cuenta, permíteles hacerlo después de que completen la compra.

Usa Google Pay para iniciar el pago de la confirmación del carrito

El botón de Google Pay abre la hoja de pago. En la hoja de pago, los clientes solo pueden seleccionar y confirmar una sola forma de pago. Asegúrate de obtener toda la información que necesites antes de darles a los clientes la opción de seleccionar el botón de Google Pay. Esta información puede incluir lo siguiente:

• El tamaño, el color y la cantidad del artículo
• El mensaje del regalo agregado, si corresponde
• El código promocional, si corresponde
• La velocidad de envío preferida
• Los destinos de los elementos individuales

Si un cliente no proporciona la información necesaria, ofrécele comentarios en tiempo real para que sepa qué faltó antes de que muestres la hoja de pagos.

Agrega el botón de Google Pay a las páginas de detalles del producto, además de la confirmación de la compra del carrito

Para acelerar la confirmación de compra de un solo artículo, permite que los clientes realicen compras individuales directamente desde las páginas de detalles del producto. Si un cliente elige esta opción, asegúrate de excluir cualquier otro artículo que tenga en su carrito de compras, ya que la hoja de pago solo le permite confirmar su información de pago y envío.

Incluye Google Pay en las páginas de confirmación y los recibos

Cuando muestres información de pago en las páginas de confirmación y los recibos por correo electrónico, asegúrate de indicar que el cliente pagó con Google Pay y de que Google Pay se muestre de forma coherente con la forma en que se muestran otras formas de pago. Nunca muestres al usuario los números de cuenta completos, las fechas de vencimiento ni otros detalles de la forma de pago. Siempre usa el texto descriptivo que devuelve la API de Google Pay para identificar la forma de pago.

Estos son algunos ejemplos:

• "Red •••• 1234 con Google Pay"
• "Red •••• 1234 (Google Pay)"
• "Google Pay (Red •••• 1234)"
• "Paypal abc…[e-mail] con Google Pay"
• “Forma de pago: Google Pay”
• "Pagado con Google Pay"

Combina todos estos aspectos

Una captura de pantalla de una integración completada se ve como la siguiente imagen. La integración también incluye los pasos Selección de elementos/Antes de la compra, Transacción, Selector de Google Pay y Después de la compra.

Estas pantallas representan un flujo de compra recomendado de Google Pay para una experiencia de carrito de compras.

Obtén la aprobación

Una vez que hayas integrado la API de Google Pay, deberás obtener la aprobación de todos los lugares en los que muestres o hagas referencia a Google Pay en tu IU para obtener acceso a producción.

Completa nuestra lista de tareas de integración para enviar la integración de tu app a revisión. Deberías recibir la aprobación o los comentarios en un plazo de un día hábil.

Importante: El uso del recurso “Donar con Google Pay” requiere validación adicional de la organización sin fines de lucro durante la incorporación.