Google Payがロシアで最初に登場したとき、私はアカウントを開始し、そこにカードを追加して、他に何もできないことに気付きました。 私の携帯電話にはNFCがなく、インターネットで支払うものも何もありませんでした。 最終的には、手でカードの数字を操作したり、ブラウザのパスワードストアから数字を引き出したりすることが常に可能でした。
それから、目の前に並んでいるさまざまな人々がスマートフォンでどのように支払うかを見ました。 その後、Google Payを使用するための広告や割引がいたるところに見られましたが、それでも利用できませんでした-NFCのない携帯電話で歩いていました。
そして今、それが到着しました。 これで、Yandex.Cashに接続されているサイトのどのデバイスからでも、Google Pay経由で支払うことができます（そして、非常に多くあります）。 それがどのように起こったのか、開発者が解決しなければならなかった技術的な問題を説明します。 フロントエンドとバックエンドには多くの興味深いものがあります。
APIを追加するだけ
「同志の開発者、何がそんなに難しかったですか？」
-はい、Googleのライブラリをドックに追加しました。
これは、レジの開発者とGoogle Payを追加することについての私の会話の最初の1分でした（55秒の厄介な沈黙を含む）。 しかし、それから私は驚かされませんでした、そして、我々はいくつかの面白いことを発見しました。
Google Payはカード支払いプロセスを変更します
キャッシャーを通じて、海外でもクレジットカードでお支払いいただけます。 オンラインでのカード支払いと同様に、これは必ずしも便利ではありません。時々、財布に行き、暗闇の中で番号を操作し、どこでも混乱しないことを確認する必要があります。 生活を楽にするために、Yandexにログインし、タイカードで支払うことができます。
キャッシャーを介したカード支払いが統一され、十分に文書化されるスキームを実装しました。 複雑なルーティングとセキュリティのニュアンスをすべて削除すると、スキームは次のようになります。
- ユーザーは商品を選択して注文し、支払いフォームYandex.Cashに切り替えます。 そこで、カードの詳細を入力するか、Yandexにログインして、接続されているカードも確認できます。
- 選択した支払い方法のデータは、トークン化のためにバックエンドに送信されます。 ブラウザはカードトークンを受け取り、支払いに使用しようとします。
- すべてが正常な場合、バックエンドは銀行にカードの金額をブロックするよう要求し、支払いを行い、そのステータスを返します。 これに基づいて、ブラウザは成功ページにリダイレクトするか、エラーメッセージを表示します。
さまざまな段階で、プロセスを終了するためのさまざまな条件（無効なトークン、空のアカウント、またはインターネットのオフ）がありますが、ロジックは同じままです。 この場合、サーバー上でページを完全にレンダリングできますが、これに関する問題については後述します。
Google Payの場合、さらにいくつかの中間ステップが必要です。
まず、支払い方法の選択とトークン化の間に、GoogleからAPIへの呼び出しがあります。これは、デバイスがGoogle Pay経由の支払いをサポートしているかどうかを確認するために必要です。 [Pay]ボタンをクリックすると、Google Payのウェブインターフェースが表示されます。ユーザーはそこでログインし、追加したカードの1つを選択するか、新しいカードの詳細を入力します。
第二に、Googleからの別のセキュリティサークルがあります。 ブラウザは詳細を直接受信しません-暗号化を受信し、暗号化はトークン化のためにバックエンドに行きます。 そこでGoogleのキーを使用して復号化され、手順3を参照してください。
当然のことながら、追加の各ステップは（厳密にドキュメントに従ったとしても）追加の開発およびテスト時間です。 商人が実質的に何もする必要がないのはさらに楽しいことです。GooglePayを介してYandex.Cash支払いフォームがあるサイトに支払いを簡単に接続できます。 詳細はキャッシャーのウェブサイトにあります。
フロントエンドでも興味深い話が見つかりました-それは創造的な検索、証拠、UXに関するものです。
支払いページのGoogle Payボタン
キャッシャーの支払いページは完全にサーバー上で組み立てられます。バックエンドからデータを受け取り、テンプレートエンジンを介して実行し、ブラウザーにHTML、CSS、およびJavaScriptコードを提供します。 したがって、すべてのデータが準備でき、すべての動的コンテンツがクライアントのJSを介して機能する場合、ページはより速く描画されます。
問題は、クライアントのGoogleアカウントがGoogleのクライアントライブラリを介して支払い手段を追加したかどうかを判断することしかできないことです。 そのため、支払いボタンを使用してページの一部をレンダリングするロジックをクライアントに実装する必要がありました。 技術的な解決策は、短い検索の後に見つかりました。
バックエンドでは、ストアがGoogle Payを介した支払いを有効にしているかどうかを確認する必要があります-これが当てはまる場合、テンプレートエンジンでGoogle PayライブラリへのCDNリンクをページに追加し、この支払い方法を使用してデータをダウンロードする必要があることをブラウザーに通知します
クライアントで、必要なサインがあるかどうかを確認する必要があります。必要な場合は、確認方法を呼び出して、このデバイスでGoogle Payによる支払いがサポートされているかどうかを確認します。 すべてが順調であれば、ユーザーに別のボタンを表示します。 その結果、ページはまだサーバー上でレンダリングされていますが、現在、別のサービスにいくつかの追加リクエストを行っています。
このサービスが時々応答しない場合があることが判明しました。
一ヶ月ではなく、一休みです！
このストーリーは私たちのUX部門に関するものです。GooglePayボタンを描画する方法をどのように探していたか、同時にユーザーがフォームを操作するのを妨げないようにする方法です。
最初の考えは、ページ全体にひねりをかけて、Googleからの応答を待つことです。
ただし、Googleからの応答を待つ場合、サーバーレンダリングには意味がなく（クライアントでデータを取得するまでユーザーはページを操作できません）、サードパーティサービスに依存し始めます。 インターネットに問題がある場合、Googleがブロックされているかアクセスできないため、カード番号を入力しても気になりませんが、ユーザーはページを使用できません。
設計者はさらにいくつかのオプションを作成しましたが、さまざまな理由で適合しなかったため、レイアウトの要件は徐々に変わりました。
アプローチ時間
アプローチ2
その結果、3つの主な要件がありました。
- ユーザーは、サードパーティサービスが応答するかどうか、およびどのくらいの期間それを行うかに関係なく、支払いを行える必要があります。 サービスが遅くなることはありません。
- スケーラビリティが必要です。 AppleまたはSamsungからの支払いが追加された場合、これは銀行カードの入力フィールドを操作する速度と機能に影響を与えません。
- ソリューションには、アニメーション/ダイナミクスが多すぎてはいけません。 ユーザーがデータの入力を開始し、この時点でGoogle Payボタンが読み込まれ、何かが変更された場合、ユーザーは何が起こったのか、なぜ起こったのか理解できない場合があります。
それらに基づいて、支払いフォームの最終設計が登場しました。 彼はすべての基準-スケーラブルであり、銀行カードの入力をブロックせず、銀行カードのデータを受信するときに不必要なアニメーションはありません。
NFCのないスマートフォンはどうですか？
オフラインストアでGoogle Payを介して支払いを行うには、NFCが必要です。オプションはありません。
NFCはオンラインで必要ありません。 すべてのデスクトップブラウザはGoogle Payで正常に動作します。 スマートフォンにはいくつかのニュアンスがあります-Googleには、Google Payを搭載したデバイスに関するいくつかの要件があります。 許可されないもののリストは次のとおりです。
- Android 4.4.3以前のスマートフォンを使用します。
- 開発者向けのAndroidバージョンをインストールします。
- ルート化、ブートローダーのロック解除、または非公式ファームウェアのインストール。
- Samsung MyKnoxを使用します。
- 未確認のGoogleデバイスを使用します。
その他の場合、インターネット上のGoogle Payを介した支払いは正常に機能しますが、すべての例外について誰も知らない可能性があります。
すでにYandex.Cashを使用している場合、厳しいビジネス上の結論
Google Payを介した支払いの受け取りを有効にするには、アカウントのマネージャーに連絡してください。 しばらくすると、ボタンは自動的に表示され、開発者は別のことに時間を費やすことができます。
コンバージョンは増加します-Mediascopeの調査によると、ユーザーの36.3％が非接触で支払います。 Yandex.Money自身の調査によると、カード所有者の43％が非接触型支払いに使用しています。 さらに、Androidユーザーの中にはChromeを使用している人がたくさんいます。3Dセキュアコードを入力する必要はありません。
Yandex.Cashをまだ使用していない場合、厳しいビジネス上の結論
緊急に接続し 、なぜ何かを引くのですか？
カッサの良いところに関する他の物語
9万のサイトにいる10人：狂わない方法
WebViewで支払いを受け取るのはうんざりです。 どうすればいいですか？
レビュー、購入、旅行を詐欺師からどのように保護するか