ウェブベースの支払いアプリの登録

登録時にウェブベースの支払いアプリを設定する方法をご確認ください。

Eiji Kitamura

ウェブベースの決済アプリはプログレッシブ ウェブアプリ（PWA）であり、サービス ワーカー上で実行されます。決済アプリのサービス ワーカーは、販売者からの支払いリクエストをキャプチャし、決済アプリを起動し、販売者との通信を仲介する重要な役割を果たします。

ウェブベースの決済アプリを構成するには、利用可能な支払い方法とサービス ワーカーを登録する必要があります。ウェブアプリ マニフェストを使用して、ウェブベースの決済アプリを宣言的に構成できます。

ブラウザ サポート

Web Payments はいくつかの異なるテクノロジーで構成されており、サポート状況はブラウザによって異なります。

	Chromium		Safari		Firefox
	パソコン	Android	パソコン	モバイル	パソコン / モバイル
Payment Request API	✔	✔	✔	✔
ウェブベースの Payment Handler API	✔	✔
iOS/Android の支払いアプリ	✔	✔	✔*	✔*

注: *Safari は Apple Pay に対応していますが、サードパーティの決済アプリには対応していません。

ウェブアプリ マニフェストを使用して決済アプリを構成する

ウェブベースの決済アプリを宣言的に構成するには、ウェブアプリ マニフェストを提供します。

ウェブアプリ マニフェストの次のプロパティは、ウェブベースの支払いアプリに関連しています。

• name
• icons
• serviceworker
  • src
  • scope
  • use_cache

お支払い方法の設定を確認して、お支払い方法のマニフェストがウェブアプリのマニフェストを正しく指していることを確認してください。

Service Worker のジャストインタイム（JIT）登録

重要な用語: サービス ワーカーは通常 JavaScript を使用して登録されますが、ユーザーが販売者のウェブサイトでウェブベースの決済アプリを使用して支払うことを選択したときに、ブラウザによって自動的に登録されることもあります。これは、ジャストインタイム（JIT）登録と呼ばれます。

JIT 登録では、ウェブアプリ マニフェストの提供のみが必要で、追加のコーディングは必要ありません。ウェブアプリ マニフェストをすでに設定し、正しく配信している場合は、準備完了です。残りの処理はブラウザが行います。

注意: 単一のお支払い方法識別子は複数の支払いアプリをサポートできますが、JIT 登録は、お支払い方法マニフェストが単一の支払いアプリを指している場合にのみ発生します。

ウェブベースの決済アプリのデバッグ

ウェブベースの支払いアプリのフロントエンドを開発する際は、販売者コンテキストと支払いアプリ コンテキストを切り替えることがよくあります。次のデバッグのヒントは、Chrome での開発に役立ちます。

ローカル サーバーでの開発

開発にはどのサーバーを使用していますか？多くのデベロッパーは localhost または社内サーバー環境を使用する傾向がありますが、ブラウザの強力な機能は安全な環境（HTTPS）と有効な証明書を必要とするため、問題が生じる可能性があります。Payment Request API とウェブベースの Payment Handler API も例外ではなく、通常、localhost や社内サーバーには有効な証明書が付属していません。

幸いなことに、Chrome を含む一部のブラウザでは、http://localhost の証明書がデフォルトで除外されています。また、Chrome では、Chrome インスタンスを起動することで証明書の要件を免除できます。たとえば、http://*.corp.company.com から要件を除外するには、次のフラグを使用します。

• --ignore-certificate-errors
• --unsafely-treat-insecure-origin-as-secure=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 デバイスにポート転送し、モバイル ブラウザから動作をテストできます。その方法については、ローカル サーバーにアクセスするをご覧ください。

パソコンの DevTools から Android Chrome のウェブサイトをリモート デバッグする

デスクトップの DevTools で Android Chrome をデバッグすることもできます。方法については、Android デバイスでリモート デバッグを開始するをご覧ください。

Payment Handler のイベント ロギング

DevTools で Web ベースの Payment Handler API イベントを表示して、ローカル開発を容易にできます。販売者コンテキストで DevTools を開き、[Application] ペインの [Payment Handler] セクションに移動します。[他のドメインのイベントを表示] をオンにして [記録] ボタンをクリックすると、支払いを処理するサービス ワーカーに送信されたイベントのキャプチャが開始されます。

ウェブベースの Payment Handler イベントのロギング。

次のステップ

次のステップでは、サービス ワーカーが実行時に支払いトランザクションをオーケストレートする方法について学習します。

• サービス ワーカーで支払いトランザクションをオーケストレートする