このページは Cloud Translation API によって翻訳されました。

お支払い方法の設定

ウェブ決済を使用した支払い取引は、支払いアプリの検出から始まります。販売者と購入者が支払いを行うことができるように、お支払い方法を設定して支払いアプリを準備する方法について学びましょう。

Eiji Kitamura

Payment Request API で使用する支払いアプリは、支払い方法の識別子。決済アプリと統合する販売者は、お支払い方法 ID を使用して、ブラウザにその旨を通知します。この決済アプリの検出の仕組みと、ブラウザによって適切に検出され、呼び出されるようにする必要があります。

ウェブ決済の概念や支払い取引の仕組みに詳しくない場合お手数をおかけしますが、まず以下の記事をご確認ください。

ブラウザサポート

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

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

ブラウザが決済アプリを検出する仕組み

すべての支払いアプリは、以下を提供する必要があります。

URL ベースのお支払い方法 ID
お支払い方法のマニフェスト（お支払い方法の識別子がサードパーティから提供される）
ウェブアプリマニフェスト

図: ブラウザが URL ベースのお支払い方法識別子から支払いアプリを検出する方法

販売者が取引を開始すると、検出プロセスが開始されます。

ブラウザがお支払い方法 ID URL にリクエストを送信し、お支払い方法マニフェストを取得します。
ブラウザがウェブアプリかマニフェストの URL をウェブアプリマニフェストを取得します。
OS 決済アプリまたはウェブベースの決済アプリを作成します。

以降のセクションでは、ブラウザが検出できるように独自のお支払い方法を設定する方法を詳しく説明します。

ステップ 1: お支払い方法の ID を指定する

お支払い方法 ID は URL ベースの文字列です。たとえば、Google Pay の ID は https://google.com/pay です。決済アプリのデベロッパーは任意の URL を支払い用として選択可能ただし、そのメソッドは制御可能で、任意のメッセージを説明します。この記事ではお支払い方法として https://bobbucks.dev/pay あります。

販売者がお支払い方法 ID を使用する仕組み

PaymentRequest オブジェクトは、支払い方法のリストで構成されます。支払いを識別する ID 自動的に適用されます。お支払い方法 ID が値として設定されています supportedMethods プロパティ。例:

[merchant] が支払いをリクエスト:

const request = new PaymentRequest([{
  supportedMethods: 'https://bobbucks.dev/pay'
}], {
  total: {
    label: 'total',
    amount: { value: '10', currency: 'USD' }
  }
});

ステップ 2: お支払い方法のマニフェストを提供する

お支払い方法のマニフェストは、このお支払い方法を使用できる支払いアプリを定義する JSON ファイルです。

お支払い方法のマニフェストを提供する

販売者が支払い取引を開始すると、ブラウザは支払い方法識別子 URL に HTTP GET リクエストを送信します。サーバーは、お支払い方法のマニフェスト本文を返します。

お支払い方法のマニフェストには、default_applications と supported_origins の 2 つのフィールドがあります。

お支払い方法のマニフェストフィールド
プロパティ名	説明
`default_applications`（必須）	支払いが行われるウェブアプリマニフェストを指す URL の配列アプリがホストされます。（URL には相対 URL を指定できます）。この配列は想定どおりです開発用マニフェスト、本番用マニフェストなどを参照することもできます。
`supported_origins`	同じお支払い方法を実装するサードパーティ製決済アプリをホストしている可能性のあるオリジンを指す URL の配列。1 つのお支払い方法は複数のお支払いアプリで実装できます。

支払い方法のマニフェストファイルは次のようになります。

[支払いハンドラ] /payment-manifest.json:

{
  "default_applications": ["https://bobbucks.dev/manifest.json"],
  "supported_origins": [
    "https://alicepay.friendsofalice.example"
  ]
}

ブラウザが default_applications フィールドを読み取ると、サポートされている支払いアプリのウェブアプリマニフェストへのリンクのリストが見つかります。

必要に応じてブラウザをルーティングして、別の場所でお支払い方法のマニフェストを見つけます。

お支払い方法 ID の URL は、必要に応じて、ブラウザが支払い方法のマニフェストを取得できる別の URL を指す Link ヘッダーで応答できます。これは、支払い方法のマニフェストが別の決済アプリがサードパーティによって提供されている場合に発生することがあります

ブラウザがリダイレクトを含む URL ベースのお支払い方法識別子からお支払いアプリを検出する方法

HTTP Link ヘッダーで応答するようにお支払い方法サーバーを構成します。 rel="payment-method-manifest" 属性とお支払い方法宣言します。

たとえば、マニフェストが https://bobbucks.dev/payment-manifest.json にある場合、レスポンスヘッダーには次が含まれます。

Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"

URL には完全修飾ドメイン名または相対パスを指定できます。検査ネットワークトラフィック用の https://bobbucks.dev/pay/ で例をご覧ください。curl コマンドも使用できます。

curl --include https://bobbucks.dev/pay

ステップ 3: ウェブアプリマニフェストを提供する

ウェブアプリマニフェストは、その名前が示すようにウェブアプリを定義するために使用されます。広く使用されているマニフェストファイルです。プログレッシブウェブアプリ（PWA）を定義します。

一般的なウェブアプリマニフェストは次のようになります。

[支払いハンドラ] /manifest.json:

{
  "name": "Pay with Bobpay",
  "short_name": "Bobpay",
  "description": "This is an example of the Payment Handler API.",
  "icons": [
    {
      "src": "images/manifest/icon-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "images/manifest/icon-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "serviceworker": {
    "src": "service-worker.js",
    "scope": "/",
    "use_cache": false
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "related_applications": [
    {
      "platform": "play",
      "id": "com.example.android.samplepay",
      "min_version": "1",
      "fingerprints": [
        {
          "type": "sha256_cert",
          "value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
        }
      ]
    }
  ]
}

ウェブアプリマニフェストに記述された情報は、 Payment Request UI に表示された支払いアプリ。

ウェブアプリマニフェストの重要なフィールド
プロパティ名	説明
`name`（必須）	支払いアプリの名前として使用されます。
`icons`（必須）	支払いアプリのアイコンとして使用されます。これらのアイコンを使用するのは Chrome のみです。その他アイコンを使用されることがあります。
`serviceworker`	ウェブベースの支払いとして実行される Service Worker を検出するために使用されます。。
`serviceworker.src`	Service Worker スクリプトのダウンロード元 URL。
`serviceworker.scope`	Service Worker の登録スコープを定義する URL を表す文字列。
`serviceworker.use_cache`	Service Worker スクリプトのダウンロード元 URL。
`related_applications`	OS 提供の支払いアプリとして機能するアプリを検出するために使用されます。詳しくは、Android の場合決済アプリのデベロッパーガイドをご覧ください。
`prefer_related_applications`	OS が提供する決済アプリとウェブベースの決済アプリの両方が利用可能な場合に、起動する決済アプリを決定するために使用されます。

決済アプリのラベルとアイコン。

ウェブアプリマニフェストの name プロパティは決済アプリ名として使用され、icons プロパティは決済アプリのアイコンとして使用されます。

Chrome がどの支払いアプリを起動するかを判断する仕組み

プラットフォーム固有の決済アプリのリリース

プラットフォーム固有の決済アプリを起動するには、次の条件を満たす必要があります。

related_applications フィールドはウェブアプリマニフェストで指定され、次のように指定されています。 <ph type="x-smartling-placeholder">
- インストールされているアプリのパッケージ ID と署名は一致しますが、最小ウェブアプリマニフェストのバージョン（min_version）が、次の値以下インストールされているアプリのバージョン。
prefer_related_applications フィールドは true です。
プラットフォーム固有の決済アプリがインストールされ、次の条件を満たしている。
- org.chromium.action.PAY のインテントフィルタ。
- org.chromium.default_payment_method_name プロパティの値として指定されたお支払い方法 ID。

これらの設定方法について詳しくは、Android の支払いアプリ: デベロッパーガイドをご覧ください。

[支払いハンドラ] /manifest.json

"prefer_related_applications": true,
"related_applications": [{
  "platform": "play",
  "id": "xyz.bobpay.app",
  "min_version": "1",
  "fingerprints": [{
    "type": "sha256_cert",
    "value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
  }]
}]

ブラウザがプラットフォーム固有のお支払いアプリが利用可能であると判断した場合、検出フローはここで終了します。それ以外の場合は、次のステップに進みます。ウェブベースの決済アプリを起動します

ウェブベースの支払いアプリを起動する

ウェブベースの決済アプリは、ウェブアプリマニフェストの serviceworker フィールドで指定する必要があります。

[支払いハンドラ] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

ブラウザは、Service Worker に paymentrequest イベントを送信して、ウェブベースの支払いアプリを起動します。Service Worker は事前に登録する必要はありません。ジャストインタイムで登録できます。

特別な最適化について

ブラウザで支払いリクエストの UI をスキップして支払いアプリを直接起動する方法

Chrome で、PaymentRequest の show() メソッドが呼び出されると、支払い Request API は、「Payment Request UI」というブラウザ提供の UI を表示します。この UI では、ユーザーが支払いアプリを選択できます。支払いリクエスト UI で [続行] ボタンを押すと、選択した支払いアプリが起動します。

支払いアプリの起動前に支払いリクエスト UI が介入する。

支払いアプリを起動する前に支払いリクエスト UI を表示すると、ユーザーが支払いを完了するために必要なステップ数。プロセスを最適化するために、ブラウザは支払いアプリにその情報の処理を委任し、show() が呼び出されたときに支払いリクエスト UI を表示せずに支払いアプリを直接起動できます。

支払いリクエスト UI をスキップして、支払いアプリを直接起動します。

支払いアプリを直接起動するには、次の条件を満たす必要があります。

show() はユーザー操作（マウスクリックなど）でトリガーされます。
1 つの決済アプリのみ:
- リクエストされたお支払い方法 ID をサポートしています。

ウェブベースの決済アプリがジャストインタイム（JIT）で登録されるのはいつですか。

ウェブベースの支払いアプリは、ユーザーが支払いアプリのウェブサイトに事前にアクセスして Service Worker を登録しなくても起動できます。サービスユーザーが支払いを選択したときに、ジャストインタイムで従業員を登録できます。ウェブベースの決済アプリ登録のタイミングは 2 種類あります。

支払いリクエスト UI がユーザーに表示されると、アプリがジャストインタイムで登録され、ユーザーが [続行] をクリックすると起動されます。
支払いリクエスト UI をスキップすると、支払いアプリがジャストインタイムで登録され、直接起動されます。支払いリクエスト UI をスキップして、ジャストインタイムで登録されたアプリを起動するには、ユーザー操作が必要です。これにより、クロスオリジン Service Worker が予期せず登録されるのを防ぐことができます。

次のステップ

決済アプリを検出できるようになったので、次はプラットフォーム固有のウェブベースの決済アプリに対応しています