Les consignes suivantes vous expliquent comment inclure la marque Google Pay sur vos sites Web.
Boutons de paiement Google Pay
Le bouton de paiement Google Pay doit toujours appeler l'API Google Pay. L'API Google Pay appelle ensuite la feuille de paiement où les utilisateurs peuvent sélectionner leur mode de paiement.
Assets
La méthode JavaScript createButton() insère de manière dynamique des règles CSS et un fichier SVG à partir du CDN Google pour un élément HTML <button>.
Lorsque vous utilisez la méthode createButton()
, vous obtenez :
- Conformité à la marque : intégrez facilement un bouton de paiement Google Pay qui respecte automatiquement les dernières consignes relatives à la marque Google Pay, tout en offrant des options personnalisables pour correspondre à la conception de votre UI avec un minimum d'effort.
- Forme personnalisable : ajustez l'arrondi des angles du bouton pour qu'il s'intègre parfaitement à l'esthétique de votre design existant.
- Expérience localisée : la légende du bouton est automatiquement traduite dans la langue du navigateur de l'utilisateur, ce qui améliore l'accessibilité.
- Personnalisation pour les utilisateurs : aidez les utilisateurs à découvrir les modes de paiement disponibles dans leur portefeuille Google Pay pour accélérer le processus de paiement.
Si cette méthode pratique ou les langues prises en charge ne répondent pas à vos besoins, contactez-nous.
Style
Tous les boutons de paiement Google Pay existent en deux styles : foncé et clair. Vous trouverez des exemples des deux styles dans la section Composants. Le nom de marque Google Pay ne doit pas être traduit. Ne créez pas de boutons avec votre propre texte localisé.
| Type de bouton | Sombre | Clair |
| book |  |
 |
| buy |  |
 |
| étape |  |
 |
| faire un don |  |
 |
| order [commande] |  |
 |
| payer |  |
 |
| plain |  |
 |
| s'abonner |  |
 |
Utilisez le libellé de bouton qui convient le mieux à votre page de paiement. |
Utilisez des boutons sombres sur des fonds clairs pour apporter du contraste. |
Utilisez des boutons clairs sur des fonds sombres ou colorés. |
Personnalisation
Lorsque les utilisateurs disposent d'une carte éligible dans leur compte Google Pay, les boutons de paiement "Acheter", "Payer" et "Simple" affichent le réseau de la carte et les quatre derniers chiffres du numéro de la carte. Le réseau de la carte s'affichera au même emplacement que le texte "Acheter avec" ou "Payer avec".
| Type de bouton | Sombre | Clair |
| buy, pay and plain |  |
 |
Utilisez le type de bouton "Acheter", "Payer" ou "Simple" pour activer la personnalisation. |
Utilisez des boutons sombres sur des fonds clairs pour apporter du contraste. |
Utilisez des boutons clairs sur des fonds sombres ou colorés. |
Bouton personnalisé
Utilisez l'outil suivant pour prévisualiser l'apparence de chaque bouton :
Espace vide
Maintenez toujours un espace vide de minimum 8 dp sur tous les côtés du bouton de paiement. Assurez-vous que cet espace ne comporte jamais de graphiques ni de texte.
Exemples
| Si vous placez un bouton Google Pay à côté d'un autre bouton, assurez-vous qu'il est de la même taille. | Utilisez toujours un bouton Google Pay qui contraste avec l'arrière-plan sur lequel il apparaît. |
| Lorsque vous ajustez la taille du bouton Google Pay, veillez à toujours conserver ses proportions. |
Choses à faire et à éviter
| À faire | À éviter |
|---|---|
|
|
Marque Google Pay
Utilisez uniquement la marque Google Pay fournie dans ces consignes lorsque vous proposez Google Pay comme option dans vos flux de paiement.
Assets
Cliquez sur le bouton suivant pour télécharger la marque Google Pay au format SVG :
Télécharger des composantsMarque-page
Utilisez la marque Google Pay suivante lorsque vous proposez Google Pay comme option de paiement :
Affichez "Google Pay" dans le texte à côté de la marque si vous le faites pour d'autres marques. Ne modifiez pas la couleur ni l'épaisseur du contour de la marque, et ne la modifiez en aucun cas. Utilisez uniquement la marque fournie par Google.
Espace vide
Maintenez toujours au moins la moitié (0,5x) de la hauteur du G majuscule sur tous les côtés de la marque d'acceptation Google Pay. Assurez-vous que l'espace libre est uniforme avec les autres identités visuelles que vous affichez.
Taille
Ajustez la hauteur pour qu'elle corresponde aux autres identités de marque affichées dans votre parcours de paiement. Ne réduisez pas la taille de la marque Google Pay par rapport à celle des autres identités de marque.
Choses à faire et à éviter
| À faire | À éviter |
|---|---|
|
|
Google Pay dans le texte
Vous pouvez utiliser du texte pour indiquer que Google Pay est une option de paiement et pour promouvoir Google Pay dans vos communications marketing.
- Mettre en majuscules les lettres "G" et "P"
- Utilisez toujours un "G" majuscule et un "P" majuscule suivis de lettres minuscules. Ne mettez pas en majuscules le nom complet "GOOGLE PAY", sauf s'il doit correspondre au style typographique de votre site Web. N'utilisez jamais "GOOGLE PAY" en majuscules dans vos communications marketing.
- Ne pas abréger Google Pay
- Veillez à toujours écrire intégralement les mots "Google" et "Pay".
- Adapter le style à celui de votre site Web
- "Google Pay" doit avoir la même police et le même style typographique que le reste du texte de votre site Web. N'imitez pas le style typographique de Google.
- Ne pas traduire Google Pay
- Écrivez toujours "Google Pay" en anglais. Ne le traduisez pas dans une autre langue.
- Utilisez le symbole de marque déposée la première fois que "Google Pay" apparaît dans une communication marketing.
- Lorsque vous utilisez "Google Pay" dans vos communications marketing, affichez le symbole de marque déposée ™ la première fois ou la fois la plus visible où il apparaît. N'utilisez pas le symbole de marque déposée lorsque vous proposez Google Pay comme option de paiement sur votre site Web.
| Si vous n'affichez pas d'identité visuelle pour les autres options de paiement, représentez "Google Pay" avec du texte. | Définissez "Google Pay" avec la même police et le même style typographique que le reste du texte de votre site. |
Bonnes pratiques Google Pay
Maximisez vos conversions grâce à des parcours de paiement et des feuilles de paiement qui permettent aux clients de vérifier rapidement et facilement leurs informations de paiement et de confirmer leur achat.
Voici quelques bonnes pratiques :
- Définissez Google Pay comme option de paiement principale.
- Dans la mesure du possible, mettez en évidence le bouton Google Pay. Vous pouvez également en faire l'option par défaut ou la seule option de paiement.
- Permettez à vos clients d'effectuer des achats sans compte
- La création d'un compte ralentit le processus de règlement et peut entraîner l'abandon de paniers. Utilisez Google Pay pour permettre aux clients de payer plus rapidement sans se connecter. Si vous souhaitez que vos clients créent un compte, autorisez-les à le faire une fois leur achat effectué.
- Utiliser Google Pay pour lancer le paiement lors du règlement du panier
- Le bouton Google Pay affiche la feuille de paiement. Sur la feuille de paiement, les clients ne peuvent sélectionner et confirmer qu'un seul mode de paiement et une seule adresse de livraison. Veillez à obtenir toutes les autres informations dont vous avez besoin avant de proposer aux clients de sélectionner le bouton Google Pay. Les autres informations peuvent inclure les éléments suivants :
- Taille, couleur ou quantité d'un article.
- L'option permettant d'ajouter un message ou d'appliquer un code promotionnel.
- La possibilité de choisir des délais et des destinations de livraison différents pour chaque article.
- Si un client ne fournit pas les informations nécessaires, donnez-lui des commentaires en temps réel pour lui indiquer ce dont vous avez besoin avant qu'il puisse afficher la feuille de paiement.
- Ajouter le bouton Google Pay aux pages d'informations détaillées sur les produits, en plus de la page de paiement du panier
- Vous pouvez accélérer le paiement d'un seul article si vous permettez aux clients d'effectuer des achats individuels directement depuis les pages d'informations détaillées sur vos produits. Si un client choisit cette option, veillez à exclure tous les autres articles qu'il a ajoutés à son panier, car la feuille de paiement ne lui permet que de confirmer ses informations de paiement et de livraison.
- Inclure Google Pay sur les pages de confirmation et les reçus
- Lorsque vous affichez des informations de paiement sur les pages de confirmation et dans les reçus envoyés par e-mail, assurez-vous d'indiquer que le client a payé avec Google Pay et d'afficher Google Pay de la même manière que les autres modes de paiement.
- N'affichez jamais les numéros de compte complets, les dates d'expiration ni d'autres informations sur le mode de paiement à l'utilisateur. Utilisez toujours le texte descriptif renvoyé par l'API Google Pay pour identifier le mode de paiement.
- Voici des exemples de texte descriptif acceptable :
- "Réseau •••• 1234 avec Google Pay"
- "Réseau •••• 1234 (Google Pay)"
- "Google Pay (réseau •••• 1234)"
- "Paypal abc...d@gmail.com avec Google Pay"
- "Mode de paiement : Google Pay"
- "Payé avec Google Pay"
Faites la synthèse
L'image suivante illustre une intégration terminée. L'intégration inclut également les étapes Sélection de l'article/Avant l'achat, Transaction, Sélecteur Google Pay et Après l'achat.
Obtenir l'approbation
Une fois que vous avez intégré l'API Google Pay, vous devez obtenir l'approbation pour tous les endroits où vous affichez ou mentionnez Google Pay afin d'obtenir un accès en production.
Remplissez notre checklist d'intégration pour soumettre votre intégration Web à l'examen. Vous devriez recevoir une approbation ou des commentaires dans un délai d'un jour ouvré.