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

登録時にウェブベースの決済アプリを構成する方法について説明します。

Eiji Kitamura

ウェブベースの決済アプリはプログレッシブ ウェブアプリ （PWA）であり、サービス上で稼働する ワーカー。「 決済アプリの Service Worker は、支払いを取得する際に重要な役割を果たします リクエストを受信し、決済アプリを起動して 追加情報が必要です。

ウェブベースの決済アプリを構成するには、利用可能な支払いを登録する必要があります メソッド、Service Worker などがあります。ウェブベースの決済アプリを構成できます ウェブアプリ マニフェストで宣言的に指定できます。

ブラウザ サポート

Web Payments は、いくつかの異なるテクノロジーと、 ステータスはブラウザによって異なります。

Chromium Safari Firefox
パソコン Android パソコン モバイル パソコン/モバイル
Payment Request API ✔ ✔ ✔ ✔
Payment Handler API ✔ ✔
iOS/Android 決済アプリ ✔ ✔ ✔* ✔*

ウェブアプリ マニフェストを使用した支払いアプリの構成

ウェブベースの決済アプリを宣言的に構成するには、ウェブアプリを配信する 使用します。

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

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

詳しくは、お支払いの設定 メソッド 支払い方法のマニフェストでウェブアプリのマニフェストが参照されていることを確認する 確認します。

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

JIT 登録では、ウェブアプリの提供のみが必要 マニフェスト コーディングは不要ですウェブアプリ マニフェストがすでに構成済みで、 正しく処理されていれば 準備は完了ですブラウザが あります。

をご覧ください。

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

ウェブベースの決済アプリのフロントエンドを開発する場合、 販売者のコンテキストと決済アプリのコンテキストです。以下のデバッグのヒントが役に立ちます。 Chrome での開発経験

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

開発にはどのサーバーを使用していますか？多くのデベロッパーは localhost を使用する傾向があります 企業内のサーバー環境を構築することは困難です ブラウザの高度な機能を使用するには、安全な環境（HTTPS）が必要になる傾向があります。 有効な証明書が必要です。Payment Request API と Payment Handler API は、 ローカルホストや社内サーバーには、 作成する必要があります。

Chrome などの一部のブラウザでは、 デフォルトは http://localhost です。Chrome では、特定の証明書を例外として ダウンロードする必要があります。たとえば、IP アドレスの除外を 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 Chrome でウェブサイトをリモート デバッグする

パソコンの DevTools で Android Chrome をデバッグすることもできます。方法については、 Android のリモート デバッグを使ってみる デバイス。

Payment Handler イベントのロギング

DevTools で Payment Handler API を表示可能 イベント ローカルでの開発が容易になります。販売者のコンテキストで DevTools を開き、 「支払いハンドラ」[アプリケーション] ペインの下にあります。[イベントを表示] をオンにします 「他のドメインからの」[Record]をクリックします送信されたイベントのキャプチャを開始するボタン 支払いを処理する Service Worker に送信されます。

<ph type="x-smartling-placeholder">
</ph> Payment Handler イベント ロギングのスクリーンショット。 <ph type="x-smartling-placeholder">
</ph> Payment Handler のイベント ロギング。

次のステップ

次のステップでは、Service Worker で支払いをオーケストレートする方法を トランザクションが実行されます