Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

Payment request

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

決済リクエスト API の PaymentRequest インターフェイスは、この API への第一のアクセスポイントであり、ウェブコンテンツやアプリが、サイトのユーザーやアプリの公開者に代わって、エンドユーザーからの決済を受け入れることができます。

EventTarget PaymentRequest

その他

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`PaymentRequest`	60	15	55	11.1	53	11.3
`PaymentMethodChangeEvent` PaymentMethodChangeEvent は決済リクエスト API のインターフェイスで、ユーザーが支払方法を切り替えたとき (例えば、ユーザーが Apple Pay を使用する際に、「その店舗の」カードを選択する場合) に実行される一部の支払いハンドラーが発生する PaymentRequest/paymentmethodchange_event イベントを説明します。	76	79	55	12.1	76	12.2
`methodDetails` PaymentMethodChangeEvent インターフェイスの読み取り専用の methodDetails プロパティは、ユーザーが支払い方法に対して行った変更を記述するために支払いハンドラーが提供するデータを含むオブジェクトです。詳細が利用できない場合、値は null になります。	76	79	55	12.1	76	12.2
`methodName` PaymentMethodChangeEvent インターフェイスの読み取り専用の methodName プロパティは、ユーザーが現在選択している支払いハンドラーを一意に識別する文字列です。支払いハンドラーは Apple Pay や Android Pay などの支払いテクノロジーであり、各支払いハンドラーは複数の支払い方法をサポートしている場合があります。期間内のお支払い方法の変更…	76	79	55	12.1	76	12.2
`PaymentMethodChangeEvent` PaymentMethodChangeEvent() コンストラクターは、PaymentRequest.paymentmethodchange_event イベントに関する詳細を提供する新しい PaymentMethodChangeEvent オブジェクトを作成します。	76	79	55	12.1	76	12.2
`abort` PaymentRequest.abort() は PaymentRequest インターフェイスのメソッドで、ユーザーエージェントに決済リクエストを終了させ、ユーザーインターフェイスが表示された場合は消去します。	60	15	55	11.1	53	11.3
`canMakePayment` PaymentRequest の canMakePayment() メソッドは、user agentが対応している少なくとも一つの決済手段に対応した方法でリクエストが構成されているかどうかを判断します。	60	16	55	11.1	53	11.3
`id` id は PaymentRequest インターフェイスの読み取り専用プロパティで、特定の PaymentRequest インスタンスに固有の識別子を返します。	60	16	55	11.1	60	11.3
`paymentmethodchange_event` paymentmethodchange は決済リクエスト API のイベントで、ユーザーが指定された決済ハンドラーで決済手段を変更したときに PaymentRequest オブジェクトに配信されます。	76	79	55	12.1	76	12.2
`PaymentRequest` PaymentRequest() コンストラクターは、決済リクエストの生成、検証、送信の処理を行うために使用する新しいオブジェクトを作成します。	60	15	55	11.1	53	11.3
`PaymentRequest (secure payment confirmation method)` 実験的 Secure Payment Confirmation メソッドを識別する。このメソッドの支払要求データは、SecurePaymentConfirmationRequest 辞書で定義される。詳細については、「安全な支払確認の使用」を参照してください。	95	95			95
`show` PaymentRequest インターフェイスの show() メソッドは、ユーザーエージェントに対して、決済リクエストのためのユーザーインターフェイスをユーザーに示し、処理する処理を始めるように指示します。	60	15	55	11.1	53	11.3
`PaymentRequestUpdateEvent` PaymentRequestUpdateEvent インターフェイスは、待機中の PaymentRequest インスタンスの配送関連情報に変更が加えられたときに PaymentRequest に送られるイベント用に使用します。それらのイベントは以下の通りです。	60	15	55	11.1	53	11.3
`PaymentRequestUpdateEvent` PaymentRequestUpdateEvent() コンストラクターは新しい PaymentRequestUpdateEvent オブジェクトを作成します。このオブジェクトによりウェブページはユーザー操作に反応して PaymentRequest の詳細を更新することができます。実際の更新は PaymentRequestUpdateEvent.updateWith メソッドにオプションを渡すことで行われます。	60	15	55	11.1	53	11.3
`secure_context_required` 実験的安全なコンテキストが必要	122	122			122
`updateWith` updateWith() は PaymentRequestUpdateEvent インターフェイスのメソッドで、既存の PaymentRequest の詳細を更新します。	60	15	55	11.1	53	11.3
`PaymentResponse` Payment Request API の PaymentResponse インターフェイスは、ユーザーが支払い方法を選択して支払いリクエストを承認した後に返されます。	60	15	55	11.1	53	11.3
`complete` PaymentRequest API の PaymentRequest メソッド complete() は、ユーザーインタラクションが終了したことをユーザーエージェントに通知し、残りのユーザーインターフェイスを閉じます。	60	15	55	11.1	53	11.3
`details` PaymentResponse インターフェイスの詳細読み取り専用プロパティは、販売者が取引を処理し、資金移動が成功したかどうかを判断するために使用される支払い方法固有のメッセージを提供する JSON シリアル化可能なオブジェクトを返します。	60	15	55	11.1	53	11.3
`methodName` PaymentResponse インターフェイスの methodName 読み取り専用プロパティは、ユーザーが選択した支払いハンドラーを一意に識別する文字列を返します。	60	15	55	11.1	53	11.3
`payerdetailchange_event` payerdetailchange イベントは、ユーザーが支払いリクエストフォームに記入する際に個人情報を変更したときに、Payment Request API によって PaymentResponse オブジェクトに対して発生します。これは、エラーが検出された後に支払者が詳細の送信を再試行したときに発生する可能性があります。	78	79	55	12.1	78	12.2
`payerEmail` PaymentResponse インターフェイスの payerEmail 読み取り専用プロパティは、ユーザーが指定した電子メールアドレスを返します。このオプションは、PaymentRequest.PaymentRequest コンストラクターに渡されるオプションオブジェクトで requestPayerEmail オプションが true に設定されている場合にのみ存在します。	60	15	55	11.1	53	11.3
`payerName` PaymentResponse インターフェイスの payerName 読み取り専用プロパティは、ユーザーが指定した名前を返します。このオプションは、PaymentRequest.PaymentRequest コンストラクターの options パラメーターで requestPayerName オプションが true に設定されている場合にのみ存在します。	60	15	55	11.1	56	11.3
`payerPhone` PaymentResponse インターフェイスの payerPhone 読み取り専用プロパティは、ユーザーが指定した電話番号を返します。このオプションは、PaymentRequest.PaymentRequest コンストラクターに渡されるオプションオブジェクトで requestPayerPhone オプションが true に設定されている場合にのみ存在します。	60	15	55	11.1	53	11.3
`requestId` PaymentResponse インターフェイスの requestId 読み取り専用プロパティは、details.id によって PaymentResponse() コンストラクターによって提供される自由形式の識別子を返します。	60	16	55	11.1	60	11.3
`retry` PaymentResponse インターフェースの retry() メソッドを使用すると、処理中にエラーが発生した後、ユーザーに支払いを再試行するよう要求できます。	78	79	55	12.1	78	11.3
`shippingAddress` PaymentRequest インターフェイスの ShippingAddress 読み取り専用プロパティは、ユーザーが指定した配送先住所を含む PaymentAddress オブジェクトを返します。	60	15	55	11.1	53	11.3
`shippingOption` PaymentRequest インターフェイスの ShippingOption 読み取り専用プロパティは、ユーザーが選択した配送オプションの ID 属性を返します。このオプションは、PaymentRequest.PaymentRequest コンストラクターに渡されるオプションオブジェクトで request Shipping オプションが true に設定されている場合にのみ存在します。	60	15	55	11.1	53	11.3
`toJSON` PaymentResponse インターフェイスの toJSON() メソッドはシリアル化です。 PaymentResponse オブジェクトの JSON 表現を返します。	60	15	55	11.1	55	11.3
その他
`html.elements.iframe.allow.payment`	60	79	74		60
`http.headers.Permissions-Policy.payment` 実験的 HTTP の Permissions-Policy ヘッダーフィールドにおける payment ディレクティブは、現在の文書が決済リクエスト API を使用することを許可するかどうかを制御します。	88	88			88

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT

const request = new PaymentRequest(
  [{ supportedMethods: 'basic-card' }],
  { total: { label: 'Total', amount: { currency: 'JPY', value: '1000' } } }
);
const response = await request.show();
await response.complete('success');

実務での使いどころ

Payment request の活用

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

注意点

一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

対応ブラウザ

基本構文

実務での使いどころ

Payment request の活用

注意点

アクセシビリティ

参考リンク