该付款申请API是一个新的JavaScript API，它可以很容易地，然后可以发送到付费处理器，如条纹收集付款信息。目的是通过使用户易于使用浏览器保存其卡信息来改善支付用户体验。API本身是通过W3C开放开发的，并且主要由Google和Microsoft参与。

该API仍然很新，目前仅支持Chrome和Edge 15+。Chrome 60已添加了对Chrome桌面的支持，但您可能仍需要启用Web Payments标志。好消息是它可以轻松用作渐进增强功能。另请注意，该API仅适用于通过https服务的网站。

功能测试

您需要对API的可用性进行功能检测：

if (window.PaymentRequest) {
  // Yep, we can go ahead! Our code goes here.
} else {
  // No support. Proceed the old school way
}

付款请求对象

首先，您将创建一个 付钱请求 对象，并传入一个用于接受付款方式的数组，一个带有付款明细的对象和一个用于选择的第三个可选对象：

const paymentMethods = [
  {
    supportedMethods: ['basic-card']
  }
];

const paymentDetails = {
  total: {
    label: 'What you pay',
    amount: {
      currency: 'USD',
      value: 80
    }
  }
};

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails
);

// ...

注意形状 =支付方式 和 付款详情。用支持的方法 设置为 基本卡，将接受信用卡和借记卡。您还可以限制支持的支付网络。例如，对于以下情况，仅接受Visa和MasterCard：

const paymentMethods = [
  {
    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard']
    }
  }
];

付款详情

付款明细对象需要以下字段：总，标签，量，货币和值。

您还可以为浏览器付款用户界面添加其他显示项：


const paymentDetails = {
  total: {
    label: 'What you pay',
    amount: {
      currency: 'USD',
      value: 80
    }
  },
  displayItems: [
    {
      label: 'Promo code',
      amount: {
        currency: 'USD',
        value: -10
      }
    },
    {
      label: 'Taxes',
      amount: {
        currency: 'USD',
        value: 12
      }
    }
  ]
};

浏览器的付款用户界面通常空间有限，因此您可能只想列出顶级字段，例如总价，税金和运输费用。另请注意，API不执行任何计算，因此您的应用负责提供预先计算的金额。

使用可选的3rd参数，您可以向用户请求其他信息，例如他们的姓名，电子邮件和电话号码：

// ...

const options = {
  requestPayerName: true,
  requestPayerEmail: true
};

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

启动用户界面并完成

我们已经准备就绪，希望在我们致电之前不会发生任何事情表演付款请求对象上的方法。**show（）**返回一个promise，因此可以：

// ...

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

paymentRequest
  .show()
  .then(paymentResponse => {
    return paymentResponse.complete().then(() => {
      // call backend API to process payment with data from `paymentResponse`
    });
  })
  .catch(err => {
    // API error or user cancelled the payment
    console.log('Error:', err);
  });

很简单！这样，将向用户显示来自浏览器的UI。呼唤完成（） 在 paymentResponse 返回的结果将关闭浏览器付款用户界面，并返回另一个承诺，以便我们可以调用后端发送收集的信息并处理付款。

在线支付可能很难。如您所见，Payment Request API非常易于使用，并且使用户信息收集中的付款非常简单。

使用上面的代码，当用户确认付款后，浏览器用户界面将立即关闭，然后我们的应用程序可以接管并在后端处理付款时显示加载指示器。另外，我们可以保留浏览器用户界面及其本机加载指示器，而不是类似以下内容：

// ...

const paymentRequest = new PaymentRequest(
  paymentMethods,
  paymentDetails,
  options
);

paymentRequest
  .show()
  .then(paymentResponse => {
    return verifyPaymentWithBackend(paymentResponse).then(success => {
      if (success) {
        console.log('💵 Payment is complete!');
        return paymentResponse.complete('success');
      } else {
        return paymentResponse.complete('failure');
      }
    });
  })
  .catch(err => {
    // API error or user cancelled the payment
    console.log('Error:', err);
  });

这样，浏览器付款界面将显示一个 处理中筛选，直到诺言解决或拒绝。这里verifyPaymentWithBackend 将会是一个调用您的后端API进行付款处理的功能，其中包含 paymentResponse。

为了帮助测试，以下是一个模拟，该模拟返回的诺言在2.5秒后解析为true：

function verifyPaymentWithBackend(data) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(true);
    }, 2500);
  });
}

🔎这是一个很好的资源，可以更深入地了解付款请求API的来龙去脉。

识别二维码或者微信搜【戈壁人生】

付款请求API快速介绍

功能测试

付款请求对象

付款详情

启动用户界面并完成