ウェブベースの支払いアプリを Web Payments と統合して、ユーザー エクスペリエンスを向上させる方法。
Web Payments は、ブラウザの組み込みインターフェースをウェブに導入し、ユーザーがこれまで以上に簡単に必要な支払い情報を入力できるようにします。API は、ウェブベースの決済アプリだけでなく、Android 決済アプリも呼び出すことができます。
ブラウザ サポート
Web Payments はいくつかの異なるテクノロジーで構成されており、サポート状況はブラウザによって異なります。
ウェブベースの決済アプリのメリット
- 支払いは販売者のウェブサイトのコンテキストでモーダルで行われるため、リダイレクトやポップアップを使用する一般的な支払いアプリの手法よりもユーザー エクスペリエンスが向上します。
- Web Payments API は、既存のウェブサイトに統合できるため、既存のユーザーベースを活用できます。
- プラットフォーム固有のアプリとは異なり、ウェブベースの決済アプリは事前にインストールする必要がありません。
ウェブベースの決済アプリの仕組み
ウェブベースの決済アプリは、標準のウェブ技術を使用して構築されています。すべてのウェブベースの支払いアプリにはサービス ワーカーを含める必要があります。
ウェブベースの支払いアプリでは、サービス ワーカーは次のように支払いリクエストの仲介役として機能します。
- モーダル ウィンドウを開き、決済アプリのインターフェースを表示します。
- 支払いアプリと販売者間のコミュニケーションを仲介します。
- お客様から承認を得て、販売者に支払い認証情報を渡す。
販売者での支払いアプリの仕組みについては、支払い取引のライフサイクルをご覧ください。
販売者がお支払いアプリを見つける方法
販売者がお支払いアプリを使用するには、Payment Request API を使用し、お支払い方法識別子を使用してサポートするお支払い方法を指定する必要があります。
お支払いアプリに固有のお支払い方法識別子がある場合は、独自のお支払い方法マニフェストを設定して、ブラウザがアプリを検出できるようにします。
仕組みと新しいお支払い方法の設定方法については、お支払い方法を設定するをご覧ください。
支払いハンドラ ウィンドウ内で使用できる 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 つの異なる部分を実装する必要があります。