Wie wir über Google Pay bei Yandex.Cash bezahlt haben [aktualisiert]


    Als Google Pay gerade in Russland erschien, eröffnete ich ein Konto, fügte dort eine Karte hinzu und stellte fest, dass ich nichts anderes tun konnte. NFC war nicht auf meinem Handy, auch im Internet gibt es nichts zu bezahlen - na gut, das stört mich nicht. Am Ende könnten Sie immer Ihre Hände verwenden, um die Zahlen von der Karte einzugeben oder aus dem Kennwortspeicher des Browsers abzurufen.


    Dann schaute ich mir an, wie die verschiedenen Leute, die vor mir in der Schlange standen, mit einem Smartphone bezahlt haben; dann habe ich überall Anzeigen und Rabatte für die Verwendung von Google Pay gesehen, konnte sie aber immer noch nicht verwenden - ich bin immer noch mit einem Telefon ohne NFC gegangen.


    Und jetzt ist es heute. Jetzt kann ich über Google Pay von jedem Gerät aus auf Seiten bezahlen, die mit Yandex.Kassa verbunden sind (und davon gibt es ziemlich viele). Ich erzähle Ihnen, wie es passiert ist und welche technischen Probleme unsere Entwickler lösen mussten. Es gibt viele interessante Dinge, sowohl am vorderen als auch am hinteren Ende.


    Fügen Sie einfach die API hinzu


    - Genossen, die Entwickler, und was war dort schwierig?
    - Ja, wir haben gerade eine Bibliothek von Google in ihre Docks aufgenommen.


    Dies war die erste Minute meines Vortrags über das Hinzufügen von Google Pay mit den Entwicklern der Kasse (einschließlich 55 Sekunden unangenehmer Stille). Aber dann war ich nicht überrascht, und wir fanden ein paar amüsante Dinge heraus.


    Google Pay ändert den Kartenzahlungsprozess.


    Über die Kasse können Sie jetzt mit jeder beliebigen Kreditkarte bezahlen, auch im Ausland. Wie bei Online-Kartenzahlungen ist dies nicht immer bequem - manchmal müssen Sie sich für ein Portemonnaie entscheiden, Zahlen im Dunkeln lassen und prüfen, dass an keiner Stelle etwas verwirrt ist. Um das Leben einfacher zu machen, können Sie sich bei Yandex anmelden und mit angehängten Karten bezahlen.


    Wir haben ein System implementiert, bei dem Kartenzahlungen über Cashier vereinheitlicht und dokumentiert wurden. Wenn Sie alle Feinheiten von Routing und Sicherheitsnuancen entfernen, sieht das Schema folgendermaßen aus:


    1. Der Benutzer wählt das Produkt aus, gibt die Bestellung auf und geht zum Zahlungsformular von Yandex.Cashy. Dort können Sie die Details einer Karte eingeben oder sich bei Yandex anmelden, um mehr von Ihren angehängten Karten zu sehen.
    2. Die Daten zur ausgewählten Zahlungsmethode werden zur Backen-Tokenisierung im Backend abgerufen. Der Browser empfängt das Karten-Token und versucht, es zur Zahlung zu verwenden.
    3. Wenn alles in Ordnung ist, bittet das Backend die Bank, den Betrag auf der Karte zu sperren, nimmt eine Zahlung vor und gibt seinen Status zurück. Daraufhin 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 Herunterfahren des Internets. Die Logik bleibt jedoch gleich. In diesem Fall können Sie die Seite vollständig auf dem Server rendern. Die Schwierigkeiten dabei werden jedoch unten erläutert.


    Für Google Pay benötigen Sie einige weitere Zwischenschritte.


    Erstens, zwischen der Auswahl einer Zahlungsmethode und der Tokenisierung wird Google von der API angesprochen. Dies ist erforderlich, um zu prüfen, ob das Gerät Zahlungen über Google Pay unterstützt. Nachdem Sie auf die Schaltfläche "Bezahlen" geklickt haben, wird die Google Pay-Weboberfläche angezeigt, in der sich der Nutzer anmeldet, eine der hinzugefügten Karten auswählt oder die Details der neuen Karte eingibt.


    Zweitens gibt es einen weiteren Sicherheitskreis von Google. Der Browser erhält die Details nicht direkt - es wird ein Kryptogramm angezeigt, das zur Tokenisierung in das Backend geht. Dort wird es mit den Schlüsseln von Google entschlüsselt, und siehe Schritt 3.


    Natürlich ist jede zusätzliche Phase (auch streng nach der Dokumentation) eine zusätzliche Entwicklungs- und Testzeit. Umso angenehmer, dass der Händler fast nichts tun muss - es ist einfach, Zahlungen über Google Pay mit jeder Website zu verbinden, auf der sich ein Yandex.Cashy-Zahlungsformular befindet. Details - vor Ort Kassierer .


    Eine interessante Geschichte wurde auch im Frontend gefunden - es geht um eine kreative Suche, Beweise und UX.


    Google Pay-Button auf der Zahlungsseite


    Die Bezahlseite des Kassierers wird vollständig auf dem Server erfasst. Er empfängt Daten vom Backend, führt sie durch die Vorlagen-Engine und stellt dem Browser HTML-, CSS- und JavaScript-Code bereit. Die Seite wird also schneller gezeichnet - wenn alle Daten bereit sind und alle dynamischen Inhalte über JS auf dem Client ausgeführt werden.


    Die Schwierigkeit besteht darin, dass nur über die Client-Bibliothek von Google festgestellt werden kann, ob im Google-Konto des Kunden zusätzliche Beträge hinzugefügt werden. Daher musste die Logik, die den Teil der Seite mit der Zahlungsschaltfläche zeichnet, auf dem Client implementiert werden. Die technische Lösung wurde nach einer kurzen Suche gefunden.


    Im Backend müssen Sie überprüfen, ob der Store die Zahlung über Google Pay aktiviert hat. Wenn dies der Fall ist, fügen Sie der Seite mit einem CDN-Link zur Google Pay-Bibliothek hinzu und geben Sie dem Browser ein Zeichen, dass Sie Daten mit dieser Zahlungsmethode herunterladen müssen.


    Auf dem Client müssen Sie prüfen, ob ein notwendiger Hinweis vorliegt. Wenn ja, rufen Sie die Methode auf, zu prüfen, 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. Daher wird die Seite immer noch auf dem Server gerendert, aber jetzt werden einige zusätzliche Anforderungen an einen anderen Dienst gestellt.


    Es stellte sich nur heraus, dass dieser Dienst manchmal nicht antworten kann.


    Einen ganzen Monat eine einzige Lücke!


    In dieser Geschichte geht es um unsere UX-Abteilung - wie sie nach einer Möglichkeit gesucht haben, die Google Pay-Schaltfläche zu rendern, ohne den Benutzer dabei zu stören, mit dem Formular zu interagieren.


    Mein erster Gedanke ist, die ganze Seite aufzuhängen und auf eine Antwort von Google zu warten.


    Wenn Sie jedoch auf eine Antwort von Google warten, hat das Server-Rendering keinen Sinn (der Benutzer kann immer noch nicht mit der Seite interagieren, bis wir die Daten auf dem Client abrufen) und wir beginnen, von Drittanbieterdiensten abhängig zu sein. Wenn ein Problem mit dem Internet auftritt, Google blockiert oder nicht verfügbar ist, kann der Nutzer die Seite nicht verwenden, obwohl er die Kartennummer nicht eingibt.


    Die Designer haben ein paar weitere Optionen gewählt, die jedoch aus verschiedenen Gründen nicht passten, und die Anforderungen an die Modelle änderten sich allmählich.

    Einmal anfahren



    Annäherung an zwei


    Als Ergebnis gab es drei Hauptanforderungen:


    1. Der Benutzer sollte in der Lage sein zu bezahlen, unabhängig davon, ob der Dienst eines Drittanbieters reagiert und wie lange er dies tun wird. Der Service sollte nicht langsamer werden.
    2. Brauchen Sie Skalierbarkeit. Wenn eine Zahlung von Apple oder Samsung hinzugefügt wird, sollte dies die Geschwindigkeit und die Fähigkeit, mit den Eingabefeldern einer Bankkarte zu arbeiten, nicht beeinträchtigen.
    3. Die Lösung sollte nicht zu viel Animation / Dynamik haben. Wenn der Nutzer anfängt, Daten einzugeben, und zu diesem Zeitpunkt die Google Pay-Schaltfläche geladen wird und sich etwas ändert, kann der Nutzer nicht verstehen, was passiert ist und warum.

    Auf ihrer Grundlage das endgültige Design des Zahlungsformulars. Er arrangierte alle Kriterien - skalierbar, blockiert nicht die Eingabe einer Bankkarte und es gibt keine zusätzlichen Animationen, wenn Bankkartendaten empfangen werden.



    Und was ist mit Smartphones ohne NFC?


    Um über Google Pay zu bezahlen, wird noch immer Offline-NFC benötigt, hier sind keine Optionen verfügbar.


    NFC wird online nicht benötigt. Alle Desktop-Browser funktionieren gut mit Google Pay. Bei Smartphones gibt es Nuancen - Google hat mehrere Anforderungen an ein Gerät mit Google Pay. Hier ist eine Liste von Dingen, die nicht erlaubt sind:


    1. Verwenden Sie ein Telefon mit Android 4.4.3 oder früher.
    2. Installieren Sie die Android-Version für Entwickler.
    3. Erstellen Sie root, entsperren Sie den Bootloader oder installieren Sie inoffizielle Firmware.
    4. Verwenden Sie Samsung MyKnox.
    5. Verwenden Sie ein ungeprüftes Google-Gerät.

    In anderen Fällen sollten Zahlungen über Google Pay im Internet gut funktionieren - aber über alle Ausnahmen ist es vielleicht niemandem bekannt.


    Harte geschäftliche Schlussfolgerungen, wenn Sie bereits Yandex.Cash verwenden


    Um den Empfang von Zahlungen über Google Pay zu verbinden, schreiben Sie an den Manager in Ihrem Konto. Nach einer Weile erscheint die Schaltfläche von selbst, und Sie können die Zeit der Entwickler mit etwas anderem verbringen.


    Die Konvertierung wird steigen - laut Mediascope zahlen 36,3% der Nutzer ohne Kontakt. Yandex.Moneys eigene Untersuchungen haben gezeigt, dass 43% der Karteninhaber sie für kontaktloses Bezahlen verwenden. Darüber hinaus gibt es unter Android-Nutzern einige Personen, die mit Chrome arbeiten - sie müssen keinen 3-D-Secure-Code eingeben.


    Harte geschäftliche Schlussfolgerungen, wenn Sie Yandex.Cash noch nicht verwenden


    Dringend verbinden , warum etwas ziehen?


    Weitere Berichte darüber, was in der Kasse gut ist
    Zehn Menschen an 90.000 Standorten: Wie man nicht verrückt wird
    Ich bin es leid, Zahlungen über WebView zu akzeptieren. Was kann ich tun?
    Wie wir Reviews, Einkäufe und Reisen vor Betrügern schützen


    Jetzt auch beliebt: