ウェブベースの決済アプリをウェブ決済と統合して、優れたユーザー エクスペリエンスを提供する方法について説明します。
Web Payments は、ブラウザの組み込みインターフェースをウェブブラウザに提供します。これにより、ユーザーは必要な支払い情報をこれまで以上に簡単に入力できます。API では、ウェブベースの決済アプリや Android の決済アプリを呼び出すことができます。
ブラウザ サポート
ウェブ決済はいくつかの異なるテクノロジーで構成され、サポート状況はブラウザによって異なります。
ウェブベースの決済アプリのメリット
- 支払いは販売者のウェブサイトのコンテキストでモーダルで行われるため、リダイレクトやポップアップを使用する一般的な決済アプリの手法よりもユーザー エクスペリエンスが向上します。
- 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 つの部分を実装する必要があります。