PaymentRequest.PaymentRequest()

在此页

句法
范例
规范
浏览器兼容性
相关话题

安全上下文
此特征只可用于安全上下文 (HTTPS)，在某些或所有支持浏览器 .

PaymentRequest() 构造函数创建新 PaymentRequest object which will be used to handle the process of generating, validating, and submitting a payment request.

句法

var paymentRequest = new PaymentRequest(methodData, details, [options]);

参数

methodData

Contains an array of identifiers for the payment methods the merchant web site accepts and any associated payment method specific data. Each item in the array contains the following fields:

supportedMethods: For early implementations of the spec, this was a sequence of identifiers for payment methods that the merchant website accepts. Starting with more recent browsers, this parameter is more generic than credit cards, it is a single DOMString , and the meaning of the data parameter changes with the supportedMethods . For example, the basic card payment method is selected by specifying the string basic-card 这里。
data: A JSON-serializable object that provides optional information that might be needed by the supported payment methods. This has to conform to the type expected by the payment handler indicated by supportedMethods . For basic credit card services, this structure should match the BasicCardRequest 字典。

details

Provides information about the requested transaction. This parameter contains the following fields:

total

The total amount of the payment request.

id 可选

A free-form identifier for this payment request. If a value is not supplied, the browser will construct one.

displayItems

An array of optional line items for the payment request that the user agent may display, such as product details, tax, and shipping.

shippingOptions

The shipping options the user may choose from. If this sequence is blank, it indicates the merchant cannot ship to the current shipping address. The default shipping option may be indicated in this sequence.

modifiers

Modifiers for specific payment methods; for example, adjusting the total amount based on the payment method. This parameter contains the following fields:

additionalDisplayItems: An array of items to be appended to the details.displayItems property. This property is commonly used to add a discount or surcharge line item indicating the different amount in details.modifiers.total .
data: A JSON-serializable object that provides optional information that might be needed by the supported payment methods. This has to conform to the structure defined in the BasicCardRequest 字典。
total: A total amount for the payment request that overrides value in details.total. This is typically used when details.modifiers.additionalItems adds a discount or a surchase to the request.

选项 可选

Lets you set options that control the behavior of the user agent. This parameter contains the following fields:

requestPayerName: A Boolean indicating whether the user agent should collect the payer's name and submit it with the payment request. The default is false .
requestPayerEmail: A Boolean indicating whether the user agent should collect the payer's email address and submit it with the payment request. The default is false .
requestPayerPhone: A Boolean indicating whether the user agent should collect the payer's phone number and submit it with the payment request. The default is false .
requestShipping: A Boolean indicating whether the user agent should collect the payer's shipping address and submit it with the payment request. If you set this type to true, you should select an appropriate shippingType 。默认为 false .
shippingType: Lets you specify how the user interface refers to shipping when the word 'shipping' isn't appropriate for your use case. For example, in English speaking countries you would say "pizza delivery" not "pizza shipping". Valid values are "shipping" , "delivery" ，和 "pickup" . Quotation marks must be included. The default value is "shipping" .

返回值

新的 PaymentRequest object, configured for use as configured by the input parameters.

范例

The following example shows minimal functionality and focuses instead on showing the complete context of instantiating a PaymentRequest 对象。

var supportedInstruments = [{
 supportedMethods: 'basic-card',
 data: {
   supportedNetworks: ['visa', 'mastercard', 'amex', 'jcb',
                       'diners', 'discover', 'mir', 'unionpay']
 }
}];
var details = {
  total: {label: 'Donation', amount: {currency: 'USD', value: '65.00'}},
  displayItems: [
    {
      label: 'Original donation amount',
      amount: {currency: 'USD', value: '65.00'}
    }
  ],
  shippingOptions: [
    {
      id: 'standard',
      label: 'Standard shipping',
      amount: {currency: 'USD', value: '0.00'},
      selected: true
    }
  ]
};
var options = {requestShipping: true};
try {
  var request = new PaymentRequest(supportedInstruments, details, options);
  // Add event listeners here.
  // Call show() to trigger the browser's payment flow.
  request.show().then(function(instrumentResponse) {
    // Do something with the response from the UI.
  })
  .catch(function(err) {
    // Do something with the error from request.show().
  });
} catch (e) {
  // Catch any other errors.
}

规范

规范	状态	注释
支付请求 API The definition of 'PaymentRequest() constructor' in that specification.	候选推荐	初始定义。

浏览器兼容性

https://github.com/mdn/browser-compat-data 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`PaymentRequest()` 构造函数	Chrome 61	Edge ≤18	Firefox 55 注意事项 Disabled 55 注意事项 Disabled Available only in nightly builds. Disabled ). To change preferences in Firefox, visit about:config.	IE 不支持 No	Opera 不支持 No	Safari 11.1	WebView Android 不支持 No	Chrome Android 53	Firefox Android 55 注意事项 Disabled 55 注意事项 Disabled Available only in nightly builds. Disabled ). To change preferences in Firefox, visit about:config.	Opera Android 不支持 No	Safari iOS 11.3	Samsung Internet Android 6.0

图例

完整支持
不支持

用户必须明确启用此特征。

元数据

最后修改： Mar 27, 2019

在此页

句法

参数

返回值

范例

规范

浏览器兼容性

图例

相关话题