Directrices de marca

Estas directrices te ayudarán a implementar Google Pay en tus aplicaciones.

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 pago donde los usuarios pueden seleccionar su método de pago.

Recursos

Google Pay ofrece la API PayButton, que te permite personalizar el tema, la forma y el redondeo de las esquinas del botón de pago de Google Pay para que se adapte al diseño de tu interfaz de usuario.

Cuando usas la API PayButton, obtienes lo siguiente:

• Cumplimiento de la marca: integra fácilmente un botón de pago de Google Pay que se ajuste automáticamente a las directrices de marca de Google Pay más recientes y que ofrezca opciones personalizables para que coincida con el diseño de tu interfaz de usuario con el mínimo esfuerzo.
• Forma personalizable: ajusta la redondez de las esquinas del botón para que se adapte a la perfección al diseño que ya tengas.
• Experiencia localizada: el texto 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 los métodos de pago disponibles en su cartera de Google Pay para que puedan completar el proceso de compra más rápido.

Si este método o los idiomas admitidos no se ajustan a tus necesidades, ponte en contacto con nosotros.

Estilo

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

Tipo de botón	Oscuro	Luz
libro
buy
paso
donar
pedido
pay
sin formato
suscribirse
Usa la redacción del tipo de botón que mejor se adapte a tu página de tramitación de la compra.	Usa botones oscuros sobre fondos claros para crear contraste.	Usa botones claros sobre fondos oscuros o coloridos.

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 cuatro últimos 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 crear contraste.	Usa botones claros sobre fondos oscuros o coloridos.

Liberar espacio

Deja siempre un espacio libre de 8 dp como mínimo en todos los lados del botón de pago. Asegúrate de que el espacio libre nunca se interrumpa con gráficos o texto. Se trata de una directriz de diseño general, no de una especificación de la API PayButton.

Anchura mínima

El botón de Google Pay debe tener una anchura mínima de 90 dp. Todos los botones de pago "Comprar con Google Pay" deben tener una anchura mínima de 152 dp.

Qué debes y qué no debes hacer

Prácticas recomendadas

Prácticas no recomendadas

Usa solo los botones de Google Pay proporcionados por 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 sea igual o superior al de los demás botones. Elige un color de botón que contraste con el fondo.

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

Importante: Es obligatorio usar la API PayButton al renderizar un botón de pago de Google Pay en tu aplicación.

Marca de Google Pay

Usa solo la marca de Google Pay que se indica a continuación cuando muestres Google Pay como opción de pago en tus flujos de pago.

Recursos

Descarga la marca de Google Pay como archivo SVG:

Descargar recursos

Marcar

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

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

Liberar espacio

Deja siempre un espacio libre equivalente, como mínimo, a la mitad de la altura de la G grande alrededor de la marca de aceptación de Google Pay. Comprueba que el espacio esté equilibrado con respecto a las demás identidades de marca que muestres.

Tamaño

Ajústala para que coincida con la del resto de las identidades de marca que se muestran entre tus opciones de pago. No hagas que la marca Google Pay sea más pequeña que las demás 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 qué no debes hacer

Prácticas recomendadas	Prácticas no recomendadas
Usa solo la marca 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 forma. Traduce la palabra "Pay". Muestra la marca Google Pay con 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 promocionar Google Pay en tus comunicaciones de marketing.

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

Utiliza siempre una "G" y una "P" en mayúsculas seguidas de letras en minúscula. No escribas en mayúsculas el nombre completo "GOOGLE PAY" a menos que sea para que coincida con el estilo tipográfico de tu interfaz de usuario. Nunca utilices "GOOGLE PAY" en mayúsculas en tus comunicaciones de marketing.

No abreviar Google Pay

Escribe siempre las palabras "Google" y "Pay".

Adaptar el estilo de la interfaz de usuario

Usa la misma fuente y el mismo estilo tipográfico para "Google Pay" que para el resto del texto de tu interfaz de usuario. No imites el estilo tipográfico de Google.

No traducir Google Pay

Escribe siempre "Google Pay" en inglés. No lo traduzcas a otro idioma.

Usa el símbolo de marca la primera vez que aparezca "Google Pay" en una comunicación de marketing

Cuando uses "Google Pay" en tus comunicaciones de marketing, muestra el símbolo de marca registrada (™) la primera vez que aparezca o cuando lo haga de forma más destacada. No uses el símbolo de marca registrada para indicar que Google Pay es una opción de pago en tu interfaz de usuario.

Si no se muestran los logotipos de otras opciones de pago, representa "Google Pay" con texto.	Usa la misma fuente y el mismo estilo tipográfico para "Google Pay" que para el resto del texto de tu interfaz de usuario.	Cuando muestres información de pago en las páginas de confirmación y en los recibos por correo electrónico, indica que el cliente ha pagado con Google Pay.

Prácticas recomendadas de Google Pay

Maximiza tus conversiones con flujos de tramitación de la compra y hojas de pago que permitan a los clientes revisar sus datos de pago y confirmar sus compras de forma rápida y sencilla.

Estas son las prácticas recomendadas:

Configurar Google Pay como opción de pago principal

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

Permitir que los clientes hagan compras sin tener una cuenta

La creación de una cuenta ralentiza el proceso de compra y puede provocar que los clientes abandonen el carrito. Usa Google Pay para ofrecer una compra como invitado más rápida. Si quieres que tus clientes creen una cuenta, permíteles hacerlo después de completar su compra.

Usar Google Pay para iniciar el pago de la compra del carrito

El botón de Google Pay ejecuta el formulario de pago, En la hoja de pago, los clientes solo pueden seleccionar y confirmar un método de pago. Asegúrate de obtener toda la información que necesites antes de ofrecer a los clientes la opción de seleccionar el botón de Google Pay. Esta información puede incluir lo siguiente:

• La talla, el color y la cantidad del artículo
• El mensaje personalizado que hayas añadido (si lo has hecho)
• El código promocional, si procede
• El tiempo de envío preferido
• 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é le falta antes de que aparezca la hoja de pago.

Añadir el botón de Google Pay a las páginas de detalles del producto, además de a la tramitación de la compra del carrito

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

Incluir 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 en los recibos por correo electrónico, indica que el cliente ha pagado con Google Pay y asegúrate de que Google Pay se muestre de forma coherente con el resto de los métodos de pago. Nunca muestres al usuario el número completo de la cuenta, las fechas de vencimiento ni otros detalles del método de pago. Para identificar el método de pago, usa siempre el texto descriptivo que te proporciona la API de Google Pay.

A continuación, se muestran algunos ejemplos:

• "Red •••• 1234 con Google Pay"
• "Red •••• 1234 (Google Pay)"
• "Google Pay (Network •••• 1234)" ("Google Pay (Red •••• 1234)")
• "Paypal [e-mail] con Google Pay"
• "Método de pago: Google Pay"
• "Pagado con Google Pay"

Analizar todos los datos en conjunto

Una captura de pantalla de una integración completada tiene el siguiente aspecto. La integración también incluye los pasos Selección de artículo/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.

Obtener aprobación

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

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

Importante: Para usar el recurso "Donar con Google Pay", se requiere una validación adicional de la organización sin ánimo de lucro durante la incorporación.