ウェブ決済を使用した支払い取引は、決済アプリを見つけることから始まります。お支払い方法を設定し、販売者や顧客が支払いを行えるように決済アプリを準備する方法をご確認ください。
Payment Request API で使用するには、決済アプリにお支払い方法 ID が関連付けられている必要があります。決済アプリと統合する場合、販売者は支払い方法 ID を使用してその旨をブラウザに伝えます。この記事では、決済アプリの検出の仕組みと、決済アプリがブラウザで適切に検出され、呼び出されるように構成する方法について説明します。
ウェブ決済のコンセプトや、決済アプリを介した支払い取引の仕組みに詳しくない場合は、まず以下の記事をご覧ください。
ブラウザ サポート
Web Payments はいくつかの異なるテクノロジーで構成されており、サポートのステータスはブラウザによって異なります。
ブラウザが決済アプリを検出する仕組み
すべての決済アプリは、以下を提供する必要があります。
- URL ベースのお支払い方法 ID
- お支払い方法のマニフェスト(お支払い方法 ID が第三者によって提供される場合を除く)
- ウェブアプリ マニフェスト
販売者が取引を開始すると、検出プロセスが開始されます。
- ブラウザは、お支払い方法 ID の URL にリクエストを送信し、お支払い方法のマニフェストを取得します。
- ブラウザは、支払い方法マニフェストからウェブアプリ マニフェストの URL を特定し、ウェブアプリ マニフェストを取得します。
- ブラウザは、ウェブアプリ マニフェストから、OS 支払いアプリとウェブベースの支払いアプリのどちらを起動するかを決定します。
以降のセクションでは、ブラウザが見つけられるように独自のお支払い方法を設定する方法について説明します。
ステップ 1: お支払い方法の ID を指定する
お支払い方法 ID は URL ベースの文字列です。たとえば、Google Pay の ID は https://google.com/pay
です。決済アプリのデベロッパーは、URL を管理でき、任意のコンテンツを配信できる限り、任意の URL をお支払い方法 ID として選択できます。この記事では、https://bobbucks.dev/pay
をお支払い方法 ID として使用します。
販売者がお支払い方法 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_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 は、必要に応じて Link
ヘッダーで応答できます。このヘッダーは、ブラウザがお支払い方法のマニフェストを取得できる別の URL を指します。これは、お支払い方法のマニフェストが別のサーバーでホストされている場合や、決済アプリがサードパーティによって提供されている場合に便利です。
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"
}
]
}
]
}
ウェブアプリ マニフェストに記載されている情報は、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
フィールドはウェブアプリ マニフェストで指定されます。また、次の要件があります。- インストールされているアプリのパッケージ ID と署名が一致しているが、ウェブアプリ マニフェストの最小バージョン(
min_version
)は、インストールされているアプリのバージョン以下である。
- インストールされているアプリのパッケージ ID と署名が一致しているが、ウェブアプリ マニフェストの最小バージョン(
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 で PaymentRequest
の show()
メソッドが呼び出されると、Payment Request API は「Payment Request UI」というブラウザ提供の UI を表示します。この UI では、ユーザーは支払いアプリを選択できます。支払いリクエスト UI で [続行] ボタンをクリックすると、選択した支払いアプリが起動します。
支払いアプリを起動する前に支払いリクエスト UI を表示すると、ユーザーが支払いを完了するために必要なステップが増えます。このプロセスを最適化するために、ブラウザはその情報のフルフィルメントを決済アプリに委任し、show()
が呼び出されたときに支払いリクエスト UI を表示せずに決済アプリを直接起動できます。
決済アプリを直接起動するには、次の条件を満たす必要があります。
show()
はユーザー操作(マウスクリックなど)でトリガーされます。- 次の支払いアプリは 1 つだけである。
- リクエストされたお支払い方法 ID をサポートしています。
ウェブベースの決済アプリがジャストインタイム(JIT)で登録されるのはいつですか。
ユーザーが支払いアプリのウェブサイトに事前に明示的にアクセスして Service Worker を登録しなくても、ウェブベースの決済アプリを起動できます。Service Worker は、ユーザーがウェブベースの支払いアプリでの支払いを選択した場合に、ジャストインタイムで登録できます。登録タイミングには 2 つのバリエーションがあります。
- 支払いリクエスト UI がユーザーに表示されている場合、アプリはジャストインタイムに登録され、ユーザーが [続行] をクリックすると起動されます。
- 支払いリクエスト UI がスキップされた場合、支払いアプリはジャストインタイムに登録され、直接起動されます。支払いリクエスト UI をスキップしてジャストインタイム登録済みアプリを起動するには、ユーザー操作が必要です。これにより、クロスオリジン Service Worker が予期せず登録されることがなくなります。
次のステップ
支払いアプリを検出できるようになったので、次に、プラットフォーム固有の支払いアプリとウェブベースの支払いアプリを開発する方法を学習します。