Lorsque Google Pay est apparu pour la première fois en Russie, j'ai ouvert un compte, y ai ajouté une carte et j'ai réalisé que je ne pouvais rien faire de plus. Il n'y avait pas de NFC dans mon téléphone, rien à payer sur Internet non plus - eh bien, ça ne me dérange pas. En fin de compte, il était toujours possible de conduire des chiffres de la carte avec vos mains ou de les extraire du magasin de mots de passe du navigateur.
Ensuite, j'ai vu comment différentes personnes qui faisaient la queue devant moi payaient avec un smartphone; puis j'ai vu des publicités et des remises pour utiliser Google Pay partout, mais je n'ai toujours pas pu en profiter - je suis toujours allé avec un téléphone sans NFC.
Et maintenant, il est arrivé. Maintenant, je peux payer via Google Pay à partir de n'importe quel appareil sur des sites connectés à Yandex.Cash (et il y en a beaucoup). Je vais vous expliquer comment cela s'est produit et quels problèmes techniques nos développeurs ont dû résoudre; il y a beaucoup de choses intéressantes à l'avant et à l'arrière.
Ajoutez simplement l'API
"Camarades développeurs, qu'est-ce qui a été si difficile?"
- Oui, nous venons d'ajouter une bibliothèque de Google sur leurs quais.
Ce fut la première minute de ma conversation sur l'ajout de Google Pay avec les développeurs de caisses (dont 55 secondes de silence gênant). Mais je n'ai pas été surpris, et nous avons découvert des choses intéressantes.
Google Pay modifie le processus de paiement par carte
Grâce à la caisse, vous pouvez désormais payer avec n'importe quelle carte de crédit, même à l'étranger. Comme tous les paiements par carte en ligne, ce n'est pas toujours pratique - parfois, vous devez vous rendre dans votre portefeuille, générer des numéros dans l'obscurité et vérifier que rien n'est gâché n'importe où. Pour vous faciliter la vie, vous pouvez vous connecter à Yandex et payer avec des cartes liées.
Nous avons mis en place un système dans lequel les paiements par carte via le caissier sont devenus unifiés et bien documentés. Si vous supprimez toutes les subtilités du routage et des nuances de sécurité, le schéma ressemble à ceci:
- L'utilisateur sélectionne les marchandises, passe une commande et passe au formulaire de paiement Yandex.Cash. Là, vous pouvez entrer les détails de n'importe quelle carte ou vous connecter à Yandex pour voir également vos cartes liées.
- Les données sur le mode de paiement sélectionné sont envoyées au backend pour la tokenisation. Le navigateur reçoit le jeton de carte et essaie de l'utiliser pour le paiement.
- Si tout est en ordre, le backend demande à la banque de bloquer le montant sur la carte, effectue un paiement et retourne son statut. Sur cette base, le navigateur redirige vers la page de réussite ou affiche un message d'erreur.
À différentes étapes, il existe différentes conditions pour mettre fin au processus - jetons invalides, comptes vides ou désactivation d'Internet - mais la logique reste la même. Et dans ce cas, vous pouvez rendre complètement la page sur le serveur, mais je vais discuter des difficultés avec cela ci-dessous.
Pour Google Pay, vous avez besoin de quelques étapes intermédiaires supplémentaires.
Premièrement, entre le choix d'un mode de paiement et la tokenisation, il y a un appel à l'API Google - cela est nécessaire pour vérifier si l'appareil prend en charge les paiements via Google Pay. Après avoir cliqué sur le bouton «Payer», l'interface Web de Google Pay apparaît, où l'utilisateur se connecte, sélectionne l'une des cartes ajoutées ou entre les détails d'une nouvelle carte.
Deuxièmement, il existe un autre cercle de sécurité de Google. Le navigateur ne reçoit pas les détails directement - il reçoit un cryptogramme, qui, à son tour, va au backend pour la tokenisation. Là, il est déchiffré avec des clés de Google, puis consultez l'étape 3.
Naturellement, chaque étape supplémentaire (même en suivant strictement la documentation) est un temps de développement et de test supplémentaire. Il est d'autant plus agréable que le marchand n'ait pratiquement rien à faire - il est facile de connecter des paiements via Google Pay à n'importe quel site disposant d'un formulaire de paiement Yandex.Cash. Les détails sont sur le site Web de la caisse .
Une histoire intéressante a également été trouvée dans le frontend - il s'agit de recherche créative, de preuves et d'UX.
Bouton Google Pay sur une page de paiement
La page de paiement du caissier est entièrement assemblée sur le serveur: elle reçoit les données du backend, les exécute via le moteur de modèle et fournit au navigateur du code HTML, CSS et JavaScript prêt. Ainsi, la page est dessinée plus rapidement - lorsque toutes les données sont prêtes et que tout le contenu dynamique fonctionne via JS sur le client.
La difficulté est qu'il est uniquement possible de déterminer si le compte Google du client a ajouté des moyens de paiement via la bibliothèque cliente de Google. Par conséquent, la logique qui dessine une partie de la page avec le bouton de paiement devait être implémentée sur le client. La solution technique a été trouvée après une courte recherche.
Sur le backend, vous devez vérifier si la boutique a activé le paiement via Google Pay - si tel est le cas, puis dans le moteur de modèle, nous ajoutons le lien CDN vers la bibliothèque Google Pay à la page et donnons au navigateur un signe que vous devez télécharger des données en utilisant ce mode de paiement.
Sur le client, vous devez vérifier s'il y a un signe nécessaire - et si oui, appelez ensuite la méthode de vérification pour savoir si les paiements via Google Pay sont pris en charge sur cet appareil. Si tout va bien, nous montrons à l'utilisateur un autre bouton. Par conséquent, la page est toujours affichée sur le serveur, mais nous faisons maintenant quelques demandes supplémentaires à un autre service.
Il s'est avéré que ce service peut parfois ne pas répondre.
Un mois entier, pas une seule pause!
Cette histoire concerne notre département UX - comment ils cherchaient un moyen de dessiner un bouton Google Pay, mais en même temps de ne pas interférer avec l'interaction de l'utilisateur avec le formulaire.
La première pensée est de suspendre la torsion sur toute la page et d'attendre une réponse de Google.
Mais si vous attendez une réponse de Google, le rendu du serveur ne sert à rien (l'utilisateur ne peut toujours pas interagir avec la page jusqu'à ce que nous obtenions les données sur le client) et nous commençons à dépendre d'un service tiers. S'il y a un problème avec Internet, Google est bloqué ou inaccessible, alors l'utilisateur ne pourra pas utiliser la page, bien que rien ne l'empêche de saisir le numéro de carte.
Les concepteurs ont proposé plusieurs autres options, mais pour diverses raisons, elles ne convenaient pas, et les exigences de mise en page ont progressivement changé.
Temps d'approche
Approche deux
En conséquence, il y avait trois exigences principales:
- L'utilisateur doit être en mesure de payer, que le service tiers réponde ou non pendant combien de temps. Le service ne doit pas ralentir.
- Besoin d'évolutivité. Lorsque le paiement d'Apple ou de Samsung est ajouté, cela ne devrait pas affecter la vitesse et la capacité de travailler avec les champs de saisie d'une carte bancaire.
- La solution ne doit pas avoir trop d'animation / dynamique. Si l'utilisateur commence à saisir des données, et à ce moment-là, le bouton Google Pay se charge et quelque chose change, l'utilisateur peut ne pas comprendre ce qui s'est passé et pourquoi.
Sur cette base, la conception finale du formulaire de paiement est apparue. Il a organisé selon tous les critères - évolutif, ne bloque pas l'entrée d'une carte bancaire, et lors de la réception des données de carte bancaire, il n'y a pas d'animation inutile.
Et les smartphones sans NFC?
Pour le paiement via Google Pay dans les magasins hors ligne, le NFC est toujours nécessaire, il n'y a pas d'options.
NFC n'est pas nécessaire en ligne. Tous les navigateurs de bureau fonctionnent correctement avec Google Pay. Il y a quelques nuances avec les smartphones - Google a plusieurs exigences pour un appareil avec Google Pay. Voici une liste de ce qui n'est pas autorisé:
- Utilisez un téléphone avec Android 4.4.3 ou une version antérieure;
- Installez la version Android pour les développeurs;
- Créez root, déverrouillez le chargeur de démarrage ou installez un firmware non officiel;
- Utilisez Samsung MyKnox;
- Utilisez un appareil Google non vérifié.
Dans d'autres cas, les paiements via Google Pay sur Internet devraient fonctionner correctement - mais, probablement, personne ne connaît toutes les exceptions.
Conclusions commerciales difficiles si vous utilisez déjà Yandex.Cash
Pour activer l'acceptation des paiements via Google Pay, écrivez au responsable de votre compte. Après un certain temps, le bouton apparaîtra de lui-même et vous pourrez consacrer du temps aux développeurs sur autre chose.
La conversion va augmenter - selon une étude de Mediascope, 36,3% des utilisateurs paient sans contact. Les propres recherches de Yandex.Money ont montré que 43% des titulaires de carte les utilisent pour les paiements sans contact. De plus, il y a pas mal de gens avec Android parmi les utilisateurs d'Android - ils n'auront pas besoin d'entrer le code 3-D Secure.
Conclusions commerciales dures, si vous n'utilisez pas déjà Yandex.Cash
Connectez-vous de toute urgence, pourquoi tirer quelque chose?
D'autres histoires sur ce qui est bon à Kassa
Dix personnes sur 90 mille sites: comment ne pas devenir fou
J'en ai assez d'accepter les paiements via WebView. Que dois-je faire?
Comment nous protégeons les avis, les achats et les voyages des fraudeurs