お支払い方法の設定

ウェブ決済を使用した支払い取引は、 。お支払い方法を設定して決済アプリを入手する 販売者や顧客が支払いを行えるようにするための準備を整えることができます。

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

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

ブラウザ サポート

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

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

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

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

  • URL ベースのお支払い方法 ID
  • お支払い方法のマニフェスト(お支払い方法の識別子が サードパーティから提供される)
  • ウェブアプリ マニフェスト
図: ブラウザが URL ベースのお支払い方法 ID から決済アプリを検出する仕組み

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

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

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

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

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

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

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

[販売者] が支払いをリクエストしている場合:

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

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

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

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

販売者が支払い取引を開始すると、ブラウザは GET リクエストをお支払い方法 ID の URL に送信します。 サーバーが支払い方法を返します。 記述できます。

お支払い方法のマニフェストには、default_applicationssupported_origins

で確認できます。
プロパティ名 説明
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 フィールドを読み取ると、次のリストが検出されます。 サポートされているデバイスのウェブアプリ マニフェストへのリンク 決済アプリ

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

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

ブラウザが URL ベースのお支払い方法の識別子(リダイレクトあり)から決済アプリを検出する仕組み

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

たとえば、マニフェストが 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 を定義する URL を 登録スコープを指定します。
serviceworker.use_cache Service Worker スクリプトのダウンロード元 URL。
related_applications OS 提供の支払いアプリとして機能するアプリを検出するために使用されます。 詳しくは、Android の場合 決済アプリのデベロッパー ガイドをご覧ください。
prefer_related_applications OS が提供する決済アプリとウェブベースの決済アプリの両方が利用可能な場合に、起動する決済アプリを決定するために使用されます。
ウェブアプリ マニフェストの重要なフィールド
<ph type="x-smartling-placeholder">
</ph> アイコン付きの支払いアプリ。 <ph type="x-smartling-placeholder">
</ph> 支払いアプリのラベルとアイコン。

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

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

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

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

  • related_applications フィールドはウェブアプリ マニフェストで指定され、次のように指定されています。 <ph type="x-smartling-placeholder">
      </ph>
    • インストールされているアプリのパッケージ ID と署名は一致しますが、最小 ウェブアプリ マニフェストのバージョン(min_version)が、次の値以下 インストールされているアプリのバージョン。
  • prefer_related_applications フィールドは true です。
  • プラットフォーム固有の決済アプリがインストールされ、次の条件を満たしている。 <ph type="x-smartling-placeholder">
      </ph>
    • 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() メソッドが呼び出されると、支払い Request API は、「Payment Request UI」というブラウザ提供の UI を表示します。この ユーザーが支払いアプリを選択できる UI。[続行] ボタンを押した後 Payment Request UI で、選択した支払いアプリが起動されます。

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 支払いアプリの起動前に支払いリクエスト UI が介入する。

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> 支払いリクエスト UI をスキップして、支払いアプリを直接起動します。

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

  • show() はユーザー操作(マウスクリックなど)でトリガーされます。
  • 以下のお支払いアプリは 1 つだけです。 <ph type="x-smartling-placeholder">
      </ph>
    • リクエストされたお支払い方法 ID をサポートしています。
で確認できます。

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

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

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

次のステップ

決済アプリを検出できるようになったので、次はプラットフォーム固有の ウェブベースの決済アプリの両方が必要です