お支払い方法の設定

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

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

ウェブ決済のコンセプトや、決済アプリを介した支払いトランザクションの仕組みについて初めて知りたい場合は、まず以下の記事をお読みください。

ブラウザ サポート

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

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

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

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

  • URL ベースのお支払い方法 ID
  • お支払い方法のマニフェスト(第三者からお支払い方法 ID が提供されている場合を除く)
  • ウェブアプリ マニフェスト
図: ブラウザが URL ベースのお支払い方法 ID から決済アプリを検出する仕組み

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

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

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

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

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

販売者によるお支払い方法 ID の使用方法

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

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

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

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

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

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

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

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

プロパティ名 説明
default_applications(必須) 支払いアプリがホストされているウェブアプリ マニフェストを指す 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 ベースのお支払い方法 ID から決済アプリを検出する方法

rel="payment-method-manifest" 属性とお支払い方法マニフェストの URL を含む HTTP Link ヘッダーで応答するようにお支払い方法サーバーを構成します。

たとえば、マニフェストが 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"
        }
      ]
    }
  ]
}

ウェブアプリ マニフェストに記述される情報は、支払いリクエストが支払いリクエスト 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 フィールドはウェブアプリ マニフェストで指定されます。
    • インストール済みアプリのパッケージ 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"
}

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

特殊な最適化について

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

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

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

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

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

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

  • show() は、ユーザー操作(マウスクリックなど)でトリガーされます。
  • 次の支払いアプリのみが存在する。
    • リクエストされたお支払い方法 ID をサポートします。

ウェブベースの決済アプリがジャストインタイム(JIT)を登録するのはどのような場合ですか?

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

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

次のステップ

支払いアプリを検出できるようになったので、プラットフォーム固有の支払いアプリとウェブベースの支払いアプリを開発する方法について説明します。