Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

お支払い方法の設定

Web Payments を使用した支払いトランザクションは、支払いアプリの検出から始まります。お支払い方法を設定し、販売者とお客様が支払いを行えるように支払いアプリを準備する方法について説明します。

Eiji Kitamura

公開日: 2017 年 9 月 27 日、最終更新日: 2025 年 7 月 1 日

Payment Request API で使用するには、お支払いアプリをお支払い方法識別子に関連付ける必要があります。決済アプリとの統合を希望する販売者は、決済方法識別子を使用して、ブラウザにその旨を伝えます。この記事では、支払いアプリの検出の仕組みと、ブラウザで適切に検出され、呼び出されるように支払いアプリを設定する方法について説明します。

ウェブ決済のコンセプトや、決済アプリを通じた決済取引の仕組みを初めて知る場合は、まず以下の記事をお読みください。

ブラウザサポート

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

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

ブラウザが決済アプリを検出する方法

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

URL ベースのお支払い方法識別子
お支払い方法のマニフェスト（お支払い方法の識別子がサードパーティによって提供される場合を除く）
ウェブアプリマニフェスト

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

検出プロセスは、販売者が取引を開始したときに始まります。

ブラウザがお支払い方法識別子 URL にリクエストを送信し、お支払い方法マニフェストを取得します。
ブラウザは、支払い方法マニフェストからウェブアプリマニフェストの URL を特定し、ウェブアプリマニフェストを取得します。
ブラウザは、ウェブアプリマニフェストから OS 支払いアプリまたはウェブベースの支払いアプリを起動するかどうかを判断します。

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

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

お支払い方法の識別子は URL ベースの文字列です。たとえば、Google Pay の識別子は https://google.com/pay です。決済アプリのデベロッパーは、任意の URL を決済方法の識別子として選択できます。ただし、その URL を管理し、任意のコンテンツと HTTP ヘッダーを配信できる必要があります。この記事では、お支払い方法の識別子として https://bobbucks.dev/pay を使用します。

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

PaymentRequest オブジェクトは、販売者が受け付けることを決定した支払いアプリを識別するお支払い方法識別子のリストで構築されます。お支払い方法の識別子は、supportedMethods プロパティの値として設定されます。次に例を示します。

[merchant] requests payment:

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

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

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

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

販売者が支払いトランザクションを開始すると、ブラウザは支払い方法識別子 URL に HTTP HEAD リクエストを送信します。支払い方法識別子 URL は、ブラウザが支払い方法マニフェストを取得できる URL を指す Link HTTP ヘッダーを返します。

支払い方法サーバーが rel="payment-method-manifest" 属性と支払い方法マニフェストの URL を含む HTTP Link ヘッダーで応答するように構成します。たとえば、マニフェストが https://bobbucks.dev/pay/payment-manifest.json にある場合、レスポンスヘッダーには次のものが含まれます。

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

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

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

次に、ブラウザは HTTP GET リクエストを支払い方法マニフェスト URL に送信します。サーバーは支払い方法マニフェストの本文を返します。

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

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

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

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

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

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

ステップ 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`	ウェブベースの決済アプリとして実行されるサービスワーカーを検出するために使用されます。
`serviceworker.src`	サービスワーカースクリプトをダウンロードする URL。
`serviceworker.scope`	サービスワーカーの登録スコープを定義する URL を表す文字列。
`serviceworker.use_cache`	サービスワーカースクリプトをダウンロードする URL。
`related_applications`	OS 提供の支払いアプリとして機能するアプリを検出するために使用されます。詳しくは、Android 支払いアプリのデベロッパーガイドをご覧ください。
`prefer_related_applications`	OS 提供の決済アプリとウェブベースの決済アプリの両方が利用可能な場合に、どの決済アプリを起動するかを決定するために使用されます。

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

Chrome が起動する決済アプリを決定する方法

プラットフォーム固有の決済アプリを起動する

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

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

これらの設定方法について詳しくは、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"
}

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

特別な最適化について

ブラウザが Payment Request UI をスキップして支払いアプリを直接起動する方法

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

決済アプリを起動する前に、Payment Request UI が介入します。

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

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

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

show() はユーザージェスチャー（マウスのクリックなど）でトリガーされます。
以下の条件を満たすお支払いアプリは 1 つのみです。
- リクエストされたお支払い方法の識別子をサポートします。

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

ウェブベースの決済アプリは、ユーザーが決済アプリのウェブサイトに事前にアクセスしてサービスワーカーを登録しなくても起動できます。サービスワーカーは、ユーザーがウェブベースの支払いアプリで支払うことを選択したときに、ジャストインタイムで登録できます。登録のタイミングには次の 2 つのバリエーションがあります。

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

次のステップ

支払いアプリを検出可能にしたので、プラットフォーム固有の支払いアプリとウェブベースの支払いアプリを開発する方法を学習します。