PaymentRequest:canMakePayment() 方法

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

安全上下文: 此功能仅在安全上下文(HTTPS)中可用,且支持此功能的浏览器数量有限。

PaymentRequest 方法 canMakePayment() 可用于确定请求的配置方式是否与 用户代理 支持的至少一种支付方式兼容。

您可以在调用 show() 之前调用此方法,以便在用户浏览器无法处理您接受的任何支付方式时,提供更流畅的用户体验。

例如,您可以调用 canMakePayment() 来确定浏览器是否允许用户使用 Payment Request API 进行支付,如果不行,您可以回退到另一种支付方式,或者提供一种不支持 Payment Request API 的支付方式列表(甚至提供邮寄或电话支付的说明)。

语法

js
canMakePayment()

参数

无。

返回值

一个 Promise,其值为布尔值。如果用户代理支持在使用 PaymentRequest 构造函数实例化请求时提供的任何支付方式,则此 Promise 会解析为 true。如果无法处理付款,则 Promise 会收到一个值 false

注意: 如果您调用此方法的频率过高,浏览器可能会使用 DOMException 拒绝返回的 Promise。

示例

以下示例是 摘自一个演示 的内容,该演示异步构建了一个同时支持 Apple Pay 和 Example Pay 的 PaymentRequest 对象。它将 canMakePayment() 的调用包装在功能检测中,并根据 Promise 的解析结果调用适当的回调函数。

js
async function initPaymentRequest() {
  const details = {
    total: {
      label: "Total",
      amount: {
        currency: "USD",
        value: "0.00",
      },
    },
  };

  const supportsApplePay = new PaymentRequest(
    [{ supportedMethods: "https://apple.com/apple-pay" }],
    details,
  ).canMakePayment();

  // Supports Apple Pay?
  if (await supportsApplePay) {
    // show Apple Pay logo, for instance
    return;
  }

  // Otherwise, let's see if we can use Example Pay
  const supportsExamplePay = await new PaymentRequest(
    [{ supportedMethods: "https://example.com/pay" }],
    details,
  ).canMakePayment();

  if (supportsExamplePay) {
    // show Example Pay support
    return;
  }

  // Otherwise, make payments using HTML form element
}

规范

规范
Payment Request API
# dom-paymentrequest-canmakepayment

浏览器兼容性

另见