PaymentRequest: merchantvalidation イベント

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんが、すでに関連するウェブ標準から削除されているか、削除の手続き中であるか、互換性のためだけに残されている可能性があります。使用を避け、できれば既存のコードは更新してください。このページの下部にある互換性一覧表を見て判断してください。この機能は突然動作しなくなる可能性があることに注意してください。

merchantvalidation イベントは決済リクエスト API によって、決済ハンドラーが、購入をリクエストされた販売者が、決済ハンドラーを使用することが許可されていることを確認することを要求する場合に PaymentRequest オブジェクトへ配信されます。

どのように販売者検証のプロセスが動作するのかを知ってください。

このイベントはキャンセル不可で、バブリングしません。

構文

このイベント名を addEventListener() のようなメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。

js
addEventListener("merchantvalidation", (event) => {});

onmerchantvalidation = (event) => {};

イベント型

MerchantValidationEvent です。Event から継承しています。

イベントプロパティ

MerchantValidationEvent.methodName

検証を必要とする決済ハンドラーの固有の決済手段識別子を提供する文字列です。これは標準の決済ハンドラーの識別子文字列か、https://apple.com/apple-pay のような決済ハンドラーを識別しリクエストを処理するURLのいずれかである可能性があります。

MerchantValidationEvent.validationURL

サイトやアプリが決済ハンドラー固有の検証情報を取得するための URL を指定する文字列です。このデータを取得したら、そのデータ（または検証データを解決するプロミス）を complete() に渡して、決済リクエストが認可された販売者から来ていることを検証しなければなりません。

例

この例では、mercantvalidation イベントに対してイベントハンドラーを確立している。これは fetch() を用いて、イベントの validationURL プロパティから取得した決済手段の検証用 URL を引数に持つリクエストを自分自身でサーバーに送信します。販売者サーバーは、決済手段のドキュメント内の検証 URL にアクセスする必要があります。通常、クライアントは検証 URL にアクセスすべきではありません。

js
request.addEventListener("merchantvalidation", (event) => {
  event.complete(async () => {
    const merchantServerUrl = `${
      window.location.origin
    }/validate?url=${encodeURIComponent(event.validationURL)}`;
    // get validation data, and complete validation;
    return await fetch(merchantServerUrl).then((response) => response.text());
  }, false);
});

const response = await request.show();

販売者サーバーがどのように検証を処理するかは、サーバーの実装と決済手段のドキュメントに依存します。検証サーバーから配信されたコンテンツは販売者サーバーに転送され、fetch() 呼び出しの履行ハンドラーからイベントの complete() メソッドに返されます。このレスポンスにより、決済ハンドラーは販売者が検証されたかどうかを知ることができます。

また、onmerchantvalidation イベントハンドラープロパティを使用して、このイベントのハンドラーを設定することができます。

js
request.onmerchantvalidation = (event) => {
  event.complete(async () => {
    const merchantServerUrl = `${
      window.location.origin
    }/validate?url=${encodeURIComponent(event.validationURL)}`;
    // get validation data, and complete validation;
    return await fetch(merchantServerUrl).then((response) => response.text());
  });
};

const response = await request.show();

詳しくは、販売者検証を参照してください。

ブラウザーの互換性

BCD tables only load in the browser

関連情報