ウェブベースの決済アプリを Web Payments と統合して、カスタマー エクスペリエンスを向上させる方法について説明します。
Web Payments により、ウェブブラウザに組み込まれたインターフェースにより、ユーザーはこれまで以上に簡単に必要な支払い情報を入力できるようになります。この API は、ウェブベースの決済アプリと Android 決済アプリを呼び出すことができます。
ブラウザ サポート
Web Payments はいくつかの異なるテクノロジーで構成されており、サポートのステータスはブラウザによって異なります。
ウェブベースの決済アプリのメリット
- 支払いは販売者のウェブサイトのコンテキスト内でモーダルで行われるため、リダイレクトやポップアップを使用する一般的な決済アプリよりも優れたユーザー エクスペリエンスが実現します。
- Web Payments API を既存のウェブサイトに統合して、既存のユーザーベースを活用できます。
- プラットフォーム固有のアプリとは異なり、ウェブベースの決済アプリは事前にインストールする必要はありません。
ウェブベースの決済アプリの仕組みを教えてください。
ウェブベースの決済アプリは、標準的なウェブ テクノロジーを使用して作成されます。すべてのウェブベースの決済アプリに、Service Worker を含める必要があります。
ウェブベースの支払いアプリでは、Service Worker は次の方法で支払いリクエストのメディエーターとして機能します。
- モーダル ウィンドウを開き、決済アプリのインターフェースを表示する。
- 決済アプリと販売者間の通信のブリッジ。
- お客様から承認を取得し、支払い認証情報を販売者に渡す。
支払い取引のライフサイクルで、販売者上で決済アプリがどのように機能するかを確認します。
販売者が決済アプリを見つける方法
販売者が支払いアプリを使用するには、Payment Request API を使用し、お支払い方法 ID を使用してサポートするお支払い方法を指定する必要があります。
決済アプリに固有のお支払い方法 ID がある場合は、独自のお支払い方法マニフェストを設定して、ブラウザでアプリを検出させることができます。
その仕組みと新しいお支払い方法の設定方法については、お支払い方法の設定をご覧ください。
支払いハンドラ ウィンドウ内で使用できる API
「支払いハンドラ ウィンドウ」は、決済アプリが起動するウィンドウです。Chrome では、通常の Chrome ブラウザ ウィンドウであるため、ほとんどのウェブ API は最上位のドキュメントの場合と同様に機能しますが、いくつかの例外があります。
- ビューポートのサイズ変更が無効になります。
window.open()は無効になっています。
WebAuthn のサポート
WebAuthn は、公開鍵暗号に基づく認証メカニズムです。生体認証によるログインをユーザーに許可できます。WebAuthn は Chrome の支払いハンドラ ウィンドウですでにサポートされており、標準本体では、Web Payments と WebAuthn の間により緊密な接続を作成することを検討中です。
Credential Management API のサポート
Credential Management API は、サイトとブラウザの間にプログラマティック インターフェースを提供し、デバイス間でのシームレスなログインを実現します。ブラウザのパスワード マネージャーに保存されている情報に基づいて、ユーザーがウェブサイトに自動的にログインできるようにすることができます。Chrome で有効になる予定ですが、まだ開発中です。
WebOTP のサポート
WebOTP API を使用すると、プログラムで SMS メッセージから OTP を取得し、ユーザーの電話番号をより簡単に確認できます。Chrome で有効になる予定ですが、まだ開発中です。
既知の問題と、支払いハンドラ ウィンドウに追加する予定の機能の一覧については、Chromium のバグトラッカーをご覧ください。
次のステップ
ウェブベースの決済アプリの作成を開始するには、次の 3 つの部分を実装する必要があります。