登録時にウェブベースのお支払いアプリを設定する方法を学びます。
ウェブベースの決済アプリはプログレッシブ ウェブアプリ（PWA）であり、サービス ワーカー上で実行されます。支払いアプリのサービス ワーカーは、販売者からの支払いリクエストをキャプチャし、支払いアプリを起動し、販売者との通信を仲介する重要な役割を果たします。
ウェブベースの支払いアプリを構成するには、利用可能な支払い方法と Service Worker を登録する必要があります。ウェブベースのお支払いアプリは、ウェブアプリ マニフェストを使用して宣言的に設定できます。
ブラウザ サポート
ウェブ決済は複数のテクノロジーで構成されており、サポート状況はブラウザによって異なります。
ウェブアプリ マニフェストを使用して支払いアプリを構成する
ウェブベースの支払いアプリを宣言的に構成するには、ウェブアプリ マニフェストを提供する。
ウェブアプリ マニフェスト内の次のプロパティは、ウェブベースの支払いアプリに関連しています。
nameiconsserviceworkersrcscopeuse_cache
お支払い方法の設定で、お支払い方法のマニフェストがウェブアプリ マニフェストを正しく参照していることを確認します。
Service Worker のジャストインタイム（JIT）登録
JIT 登録では、ウェブアプリ マニフェストの提供のみが必要で、追加のコーディングは必要ありません。ウェブアプリ マニフェストをすでに設定していて、適切に配信されている場合は、これで完了です。残りはブラウザで処理します。
ウェブベースのお支払いアプリのデバッグ
ウェブベースの支払いアプリ フロントエンドを開発する場合は、販売者コンテキストと支払いアプリのコンテキストを切り替える必要があります。次のデバッグ ヒントは、Chrome での開発に役立ちます。
ローカルサーバーで開発する
開発に使用しているサーバーはどれですか？多くのデベロッパーは、localhost または社内サーバー環境を使用しますが、ブラウザの高度な機能には安全な環境（HTTPS）と有効な証明書が必要になるため、これは難しい場合があります。Payment Request API と Payment Handler API も例外ではなく、通常、localhost や社内サーバーに有効な証明書は付属していません。
ただし、Chrome など一部のブラウザでは、http://localhost の証明書はデフォルトで除外されます。Chrome でも、Chrome インスタンスを起動することで証明書の要件を免除できます。たとえば、要件を http://*.corp.company.com から除外するには、次のフラグを使用します。
macOS
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com
Windows
chrome.exe --ignore-certificate-errors --unsafely-treat-insecure-origin-as-secure=http://*.corp.company.com
ランタイム フラグを使用して Chrome を実行する方法については、フラグを使用して Chromium を実行するをご覧ください。
ローカル サーバーのポート転送
Chrome の DevTools を使用してローカル ウェブサーバーを Android デバイスに転送し、モバイル ブラウザから動作をテストできます。方法については、ローカル サーバーにアクセスするをご覧ください。
パソコン版デベロッパー ツールから Android Chrome のウェブサイトをリモートでデバッグする
デスクトップ版 DevTools で Android Chrome をデバッグすることもできます。方法については、Android デバイスでリモート デバッグを開始するをご覧ください。
支払いハンドラのイベント ロギング
DevTools で Payment Handler API イベントを表示して、ローカル開発を容易にできます。販売者のコンテキストで DevTools を開き、[Application] ペインの [Payment Handler] セクションに移動します。[他のドメインのイベントを表示] をオンにして [記録] ボタンをクリックすると、支払いを処理するサービス ワーカーに送信されたイベントのキャプチャが開始されます。
次のステップ
次のステップでは、サービス ワーカーが実行時に支払いトランザクションをオーケストレートする方法について説明します。