お支払い方法の設定

ウェブ決済を使用した支払い取引は、決済アプリの検出から始まります。お支払い方法を設定し、販売者と顧客が支払いを行えるように決済アプリを準備する方法について説明します。

Eiji Kitamura

公開日: 2017 年 9 月 27 日、最終更新日: 2026 年 10 月 16 日

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

ウェブ決済を初めて使用する場合は、まずウェブ決済の概要をご覧ください。

決済アプリの種類

お支払い方法は、Android 決済アプリ、ウェブベースの決済アプリ、またはその両方でサポートできます。

• Android 決済アプリ: Chrome が Android インテントで起動するインストール済みのアプリ。Chrome がアプリのパッケージ名と署名証明書を検証します。
• ウェブベースの決済アプリ: Chrome がモーダル ウィンドウで起動する Service Worker。ユーザーがインストールする必要はありません。

Android 決済アプリは、Android 版 Chrome と WebView で利用できます。ウェブベースの決済アプリは、すべてのプラットフォームの Chrome で利用できますが、WebView では利用できません。

お支払い方法で両方のアプリタイプが利用可能で、ウェブアプリ マニフェストで prefer_related_applications が true に設定されている場合、Chrome はウェブベースの決済アプリを非表示にします。それ以外の場合、ユーザーは Payment Request UI で両方のアプリを確認し、どちらかを選択できます。

ブラウザ サポート

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

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

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

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

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

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

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

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

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

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

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

[販売者] が支払いをリクエストしています:

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

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

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

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

販売者が支払い取引を開始すると、ブラウザは HTTP HEAD リクエストを支払い方法識別子 URL に送信します。お支払い方法識別子 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

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

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

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

[payment handler] /payment-manifest.json:

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

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

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

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

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

[payment handler] /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
  },
  "payment": {
    "supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "prefer_related_applications": true,
  "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"
        }
      ]
    }
  ]
}

Chrome は、決済アプリの種類に応じて異なるフィールドを読み取ります。Android 決済アプリの場合、Chrome は related_applications のみを読み取ります。ウェブベースの決済アプリの場合、Chrome は name、icons、serviceworker、payment、prefer_related_applications を読み取ります。

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

Chrome が起動する決済アプリを決定する仕組み

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

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

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

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

[payment handler] /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"
  }]
}]

prefer_related_applications が true で、プラットフォーム固有の決済アプリが利用可能な場合、Chrome はウェブベースの決済アプリを非表示にします。それ以外の場合、Chrome はウェブベースの決済アプリも探します。

ウェブベースの決済アプリを起動する

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

[payment handler] /manifest.json:

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

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

特別な最適化について

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

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

決済アプリを起動する前に Payment Request UI を表示すると、ユーザーが決済を完了するために必要なステップ数が増えます。このプロセスを最適化するために、ブラウザは情報の入力を決済アプリに委任し、show() が呼び出されたときに Payment Request UI を表示せずに決済アプリを直接起動できます。

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

• show() がユーザー ジェスチャー（マウスクリックなど）によってトリガーされる。
• 決済アプリが 1 つのみで、次の条件を満たしている。
  • リクエストされたお支払い方法の識別子をサポートしている。
  • 販売者がリクエストするすべての配送情報と連絡先情報をサポートしている。

ウェブベースの決済アプリがジャストインタイム（JIT）で登録されるのはどのような場合ですか？

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

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

ウェブベースの決済アプリを構築する

販売者が show() を呼び出すと、Chrome は paymentrequest イベントをサービス ワーカーに送信します。respondWith() 内で openWindow() を呼び出して支払い UI を表示し、支払いレスポンスで解決します。

API の詳細については、MDN のウェブベースの Payment Handler API をご覧ください。

次のステップ

• Android 決済アプリ デベロッパー ガイド
• Android の決済アプリから配送先情報と連絡先情報を提供する