Als Google Pay zum ersten Mal in Russland erschien, habe ich ein Konto eröffnet, dort eine Karte hinzugefügt und festgestellt, dass ich nichts mehr tun kann. In meinem Telefon war kein NFC, auch im Internet gab es nichts zu bezahlen - na ja, okay, das stört mich nicht. Am Ende war es immer möglich, Ziffern mit den Händen von der Karte zu entfernen oder sie aus dem Passwortspeicher des Browsers zu ziehen.
Dann sah ich zu, wie verschiedene Leute, die vor mir in der Schlange standen, mit einem Smartphone bezahlten. Dann sah ich überall Anzeigen und Rabatte für die Verwendung von Google Pay, konnte diese aber immer noch nicht nutzen. Ich habe mich immer noch für ein Telefon ohne NFC entschieden.
Und jetzt ist es angekommen. Jetzt kann ich von jedem Gerät auf Websites, die mit Yandex.Cash verbunden sind, über Google Pay bezahlen (und es gibt ziemlich viele davon). Ich werde Ihnen sagen, wie es passiert ist und welche technischen Probleme unsere Entwickler lösen mussten. Es gibt viele interessante Dinge vorne und hinten.
Fügen Sie einfach die API hinzu
"Genosse Entwickler, was war so schwierig?"
- Ja, wir haben gerade eine Bibliothek von Google auf ihren Docks hinzugefügt.
Dies war die erste Minute meines Gesprächs über das Hinzufügen von Google Pay mit den Kassiererentwicklern (einschließlich 55 Sekunden unangenehmer Stille). Aber dann war ich nicht überrascht und wir fanden einige interessante Dinge heraus.
Google Pay ändert den Kartenzahlungsprozess
Jetzt können Sie über die Kasse mit jeder Kreditkarte bezahlen, auch in Übersee. Wie bei jeder Online-Kartenzahlung ist dies nicht immer bequem - manchmal müssen Sie in Ihre Brieftasche gehen, Nummern im Dunkeln fahren und sicherstellen, dass nirgendwo etwas durcheinander kommt. Um Ihnen das Leben zu erleichtern, können Sie sich bei Yandex anmelden und mit gebundenen Karten bezahlen.
Wir haben ein Schema implementiert, bei dem Kartenzahlungen über die Kasse vereinheitlicht und gut dokumentiert wurden. Wenn Sie alle Feinheiten von Routing- und Sicherheitsnuancen entfernen, sieht das Schema folgendermaßen aus:
- Der Benutzer wählt die Ware aus, gibt eine Bestellung auf und wechselt zum Zahlungsformular Yandex.Cash. Dort können Sie die Details einer beliebigen Karte eingeben oder sich bei Yandex anmelden, um auch Ihre verknüpften Karten anzuzeigen.
- Daten zur ausgewählten Zahlungsmethode werden zur Tokenisierung an das Backend gesendet. Der Browser empfängt den Karten-Token und versucht, ihn zur Zahlung zu verwenden.
- Wenn alles in Ordnung ist, fordert das Backend die Bank auf, den Betrag auf der Karte zu sperren, eine Zahlung vorzunehmen und den Status zurückzugeben. Auf dieser Grundlage leitet der Browser zur Erfolgsseite weiter oder zeigt eine Fehlermeldung an.
In verschiedenen Phasen gibt es unterschiedliche Bedingungen für die Beendigung des Prozesses - ungültige Token, leere Konten oder das Trennen des Internets -, aber die Logik bleibt dieselbe. In diesem Fall können Sie die Seite vollständig auf dem Server rendern, aber ich werde die Schwierigkeiten damit im Folgenden erläutern.
Für Google Pay benötigen Sie einige weitere Zwischenschritte.
Zunächst wird zwischen der Auswahl einer Zahlungsmethode und der Tokenisierung die Google-API aufgerufen. Dies ist erforderlich, um zu überprüfen, ob das Gerät Zahlungen über Google Pay unterstützt. Nach dem Klicken auf die Schaltfläche "Bezahlen" wird die Google Pay-Weboberfläche angezeigt, in der sich der Nutzer anmeldet, eine der hinzugefügten Karten auswählt oder die Details einer neuen Karte eingibt.
Zweitens gibt es einen weiteren Sicherheitskreis von Google. Der Browser empfängt die Details nicht direkt - er empfängt ein Kryptogramm, das wiederum zur Tokenisierung an das Backend geht. Dort wird es mit Schlüsseln von Google entschlüsselt, und dann siehe Schritt 3.
Natürlich ist jeder zusätzliche Schritt (auch wenn die Dokumentation genau befolgt wird) eine zusätzliche Entwicklungs- und Testzeit. Umso angenehmer ist es, dass der Händler praktisch nichts tun muss. Es ist einfach, Zahlungen über Google Pay mit einer Website zu verbinden, die über ein Yandex.Cash-Zahlungsformular verfügt. Details finden Sie auf der Website der Kasse .
Eine interessante Geschichte wurde auch im Frontend gefunden - es geht um kreative Suche, Beweise und UX.
Google Pay-Schaltfläche auf einer Zahlungsseite
Die Zahlungsseite des Kassierers ist vollständig auf dem Server zusammengestellt. Sie empfängt Daten vom Backend, führt sie über die Vorlagen-Engine aus und gibt dem Browser HTML-, CSS- und JavaScript-Code. So wird die Seite schneller gezeichnet - wenn alle Daten bereit sind und der gesamte dynamische Inhalt über JS auf dem Client funktioniert.
Die Schwierigkeit besteht darin, dass nur über die Google-Kundenbibliothek festgestellt werden kann, ob das Google-Konto des Kunden Zahlungsmittel hinzugefügt hat. Daher musste die Logik, die einen Teil der Seite mit der Zahlungsschaltfläche zeichnet, auf dem Client implementiert werden. Die technische Lösung wurde nach kurzer Suche gefunden.
Im Backend müssen Sie überprüfen, ob das Geschäft die Zahlung über Google Pay aktiviert hat. Wenn ja, fügen wir in der Vorlagen-Engine den CDN-Link zur Google Pay-Bibliothek zur Seite hinzu und geben dem Browser ein Zeichen, dass Sie Daten mit dieser Zahlungsmethode herunterladen müssen.
Auf dem Client müssen Sie überprüfen, ob ein erforderliches Zeichen vorhanden ist. Wenn dies der Fall ist, rufen Sie die Überprüfungsmethode auf, ob Zahlungen über Google Pay auf diesem Gerät unterstützt werden. Wenn alles in Ordnung ist, zeigen wir dem Benutzer eine weitere Schaltfläche. Infolgedessen wird die Seite immer noch auf dem Server gerendert, aber jetzt stellen wir einige zusätzliche Anforderungen an einen anderen Dienst.
Es stellte sich heraus, dass dieser Dienst manchmal nicht reagiert.
Ein ganzer Monat, keine einzige Pause!
Diese Geschichte handelt von unserer UX-Abteilung - wie sie nach einer Möglichkeit suchten, eine Google Pay-Schaltfläche zu zeichnen, aber gleichzeitig den Benutzer, der mit dem Formular interagiert, nicht zu stören.
Der erste Gedanke ist, die ganze Seite aufzuhängen und auf eine Antwort von Google zu warten.
Wenn Sie jedoch auf eine Antwort von Google warten, macht das Rendern des Servers keinen Sinn (der Nutzer kann immer noch nicht mit der Seite interagieren, bis wir die Daten auf dem Client erhalten), und wir beginnen, uns auf einen Drittanbieter zu verlassen. Wenn es ein Problem mit dem Internet gibt, Google blockiert oder nicht zugänglich ist, kann der Nutzer die Seite nicht verwenden, obwohl ihn nichts daran hindert, die Kartennummer einzugeben.
Designer stellten mehrere weitere Optionen zur Verfügung, die jedoch aus verschiedenen Gründen nicht passten, und die Anforderungen an Layouts änderten sich allmählich.
Anflugzeiten
Ansatz zwei
Infolgedessen gab es drei Hauptanforderungen:
- Der Benutzer sollte in der Lage sein zu zahlen, unabhängig davon, ob der Drittanbieter reagiert und wie lange er dies tut. Der Service sollte nicht langsamer werden.
- Benötigen Sie Skalierbarkeit. Wenn eine Zahlung von Apple oder Samsung hinzugefügt wird, sollte dies die Geschwindigkeit und Fähigkeit, mit den Eingabefeldern einer Bankkarte zu arbeiten, nicht beeinträchtigen.
- Die Lösung sollte nicht zu viel Animation / Dynamik haben. Wenn der Nutzer Daten eingibt und zu diesem Zeitpunkt die Google Pay-Schaltfläche geladen wird und sich etwas ändert, versteht der Nutzer möglicherweise nicht, was passiert ist und warum.
Auf dieser Grundlage erschien das endgültige Design des Zahlungsformulars. Er ordnet nach allen Kriterien - skalierbar, blockiert nicht die Eingabe einer Bankkarte, und beim Empfang von Bankkartendaten gibt es keine unnötige Animation.
Was ist mit Smartphones ohne NFC?
Für die Zahlung über Google Pay in Offline-Stores wird weiterhin NFC benötigt, es gibt keine Optionen.
NFC wird online nicht benötigt. Alle Desktop-Browser funktionieren einwandfrei mit Google Pay. Bei Smartphones gibt es einige Nuancen: Google stellt verschiedene Anforderungen an ein Gerät mit Google Pay. Hier ist eine Liste dessen, was nicht erlaubt ist:
- Verwenden Sie ein Telefon mit Android 4.4.3 oder früher.
- Installieren Sie die Android-Version für Entwickler.
- Erstellen Sie root, entsperren Sie den Bootloader oder installieren Sie inoffizielle Firmware.
- Verwenden Sie Samsung MyKnox;
- Verwenden Sie ein nicht verifiziertes Google-Gerät.
In anderen Fällen sollten Zahlungen über Google Pay im Internet einwandfrei funktionieren - aber wahrscheinlich kennt niemand alle Ausnahmen.
Harte geschäftliche Schlussfolgerungen, wenn Sie Yandex.Cash bereits verwenden
Um die Annahme von Zahlungen über Google Pay zu ermöglichen, schreiben Sie an den Manager in Ihrem Konto. Nach einer Weile wird die Schaltfläche von selbst angezeigt, und Sie können den Entwicklern Zeit für etwas anderes widmen.
Die Conversion wird steigen - laut einer Studie von Mediascope zahlen 36,3% der Nutzer berührungslos. Yandex.Moneys eigene Untersuchung ergab, dass 43% der Karteninhaber sie für kontaktlose Zahlungen verwenden. Darüber hinaus gibt es unter Android-Nutzern einige Menschen mit Android - sie müssen den 3-D Secure-Code nicht eingeben.
Harte geschäftliche Schlussfolgerungen, wenn Sie Yandex.Cash noch nicht verwenden
Dringend verbinden , warum etwas ziehen?
Andere Geschichten darüber, was in Kassa gut ist
Zehn Leute auf 90.000 Websites: Wie man nicht verrückt wird
Ich bin es leid, Zahlungen über WebView zu akzeptieren. Was kann ich tun?
Wie wir Bewertungen, Einkäufe und Reisen vor Betrügern schützen