En las siguientes directrices se explica cómo incluir la marca Google Pay en sus sitios web.
Botones de pago de Google Pay
El botón de pago de Google Pay siempre debe llamar a la API de Google Pay. A continuación, la API de Google Pay llama a la hoja de pago, donde los usuarios pueden seleccionar su método de pago.
Recursos
El método createButton()
de JavaScript inserta de forma dinámica reglas CSS y un archivo SVG de la CDN de Google para un elemento <button> de HTML.
Si usas el método createButton()
, obtendrás 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 navegador 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
Todos los botones de pago de Google Pay están disponibles en dos estilos: oscuro y claro. Puedes ver ejemplos de ambos estilos en la sección Recursos. El nombre de la marca Google Pay no debe traducirse. 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", "Pagar" y "Normal" 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, pagar y llanura |  |
 |
Usa el tipo de botón de compra, pago o simple para habilitar la personalización. |
Usa botones oscuros sobre fondos claros para crear contraste. |
Usa botones claros sobre fondos oscuros o coloridos. |
Botón personalizado
Usa la siguiente herramienta para ver cómo queda cada botón:
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 no se interrumpa con gráficos ni texto.
Ejemplos
| Si colocas un botón de Google Pay junto a otro, asegúrate de que ambos tengan el mismo tamaño. | Utiliza siempre un botón de Google Pay que contraste con el fondo en el que aparece. |
| Cuando ajustes el tamaño del botón de Google Pay, mantén siempre sus proporciones. |
Qué debes y qué no debes hacer
| Prácticas recomendadas | Prácticas no recomendadas |
|---|---|
|
|
Marca de Google Pay
Usa solo la marca de Google Pay que se proporciona en estas directrices cuando muestres Google Pay como opción en tus flujos de pago.
Recursos
Haz clic en el siguiente botón para descargar la marca de Google Pay en formato de archivo SVG:
Descargar recursosMarcar
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 modifiques 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 mayúscula 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 otras identidades de marca.
Qué debes y qué no debes hacer
| Prácticas recomendadas | Prácticas no recomendadas |
|---|---|
|
|
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
- Usa siempre una "G" y una "P" en mayúsculas seguidas de letras en minúsculas. No escribas el nombre completo "GOOGLE PAY" en mayúsculas, a menos que sea para que coincida con el estilo tipográfico de tu sitio web. 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 a tu sitio web
- Usa la misma fuente y el mismo estilo tipográfico para "Google Pay" que para el resto del texto de tu sitio web. 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 registrada 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 utilices el símbolo de marca registrada cuando incluyas Google Pay como opción de pago en tu sitio web.
| Si no muestras las identidades de marca 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 sitio. |
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:
- Selecciona Google Pay como opción de pago principal.
- Siempre que sea posible, muestra el botón de Google Pay de forma destacada. También puedes convertirlo en la opción predeterminada o en la única opción de pago.
- Permite que los clientes compren como invitados
- La creación de una cuenta ralentiza el proceso de tramitación de la 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.
- Inicia el proceso de pago mediante Google Pay
- El botón de Google Pay abre la hoja de pago. En la hoja de pago, los clientes solo pueden seleccionar y confirmar un método de pago y una dirección de envío. 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. También puede incluir la siguiente información:
- El tamaño, el color o la cantidad de un artículo.
- La opción de añadir un mensaje de regalo o aplicar un código promocional.
- La posibilidad de elegir diferentes velocidades y destinos de envío para cada artículo.
- Si un cliente no proporciona la información necesaria, ofrécele comentarios en tiempo real para indicarle lo que necesitas antes de que pueda mostrar la hoja de pago.
- Añadir el botón de Google Pay a las páginas de detalles de los productos, además de a la tramitación de la compra del carrito
- Puedes acelerar el proceso de compra de un solo artículo si permites que los clientes hagan compras individuales directamente desde las páginas de detalles de tus 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.
- Incluye Google Pay en las páginas de confirmación y en 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 muestra Google Pay de la misma forma que otros métodos de pago.
- Nunca muestres al usuario los números de cuenta completos, las fechas de vencimiento ni otros detalles de los métodos de pago. Para identificar el método de pago, usa siempre el texto descriptivo que te proporciona la API de Google Pay.
- Estos son algunos ejemplos de texto descriptivo aceptable:
- "Red •••• 1234 con Google Pay"
- "Red •••• 1234 (Google Pay)"
- "Google Pay (Network •••• 1234)" ("Google Pay (Red •••• 1234)")
- "Paypal abc...d@gmail.com con Google Pay"
- "Método de pago: Google Pay"
- "Pagado con Google Pay"
Analizar todos los datos en conjunto
En la siguiente imagen se muestra una integración completa. 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.
Obtener aprobación
Una vez que hayas integrado la API de Google Pay, para obtener acceso a producción, debes conseguir la aprobación de todos los lugares en los que muestres o hagas referencia a Google Pay.
Completa nuestra lista de comprobación de la integración para enviar tu integración web a revisión. Deberías recibir la aprobación o los comentarios en el plazo de un día hábil.