JavaScrip如何安全使用Payment Request API详解

更新时间：2022年10月26日 17:02:04 作者：AirStar

这篇文章主要为大家介绍了JavaScrip如何安全使用Payment Request API详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

Payment Request API提供了一个跨浏览器标准，允许您从客户那里收集付款、地址和联系信息。然后，您可以使用这些信息来处理他们的订单。

它还促进了浏览器和网站之间交换这些信息。这背后的基本思想是通过让用户轻松在浏览器中存储付款和联系信息来改善用户的在线购物体验。

Payment Request API浏览器支持

Payment Request API仍在积极开发中，仅受现代浏览器的最后几个版本的支持。

在开始提出付款请求之前，您应该进行功能检测，以确保浏览器支持API：

if (window.PaymentRequest) {
  // Yes, we can use the API
} else {
  // No, fallback to the checkout page
  window.location.href = '/checkout'
}

请注意，您只能在超过https服务的网站上使用# Payment Request API。

现在让我们看看这个有用的API是如何工作的。

如何创建PaymentRequest对象

付款请求始终通过使用PaymentRequest()构造函数创建PaymentRequest的新对象来启动。构造函数接受两个强制性参数和一个可选参数：

paymentMethods定义接受哪种付款方式。例如，您只能接受Visa和MasterCard信用卡。
paymentDetails包含应付付款总额、税款、运费、显示项目等。
options是一个可选参数，用于向用户请求其他详细信息，例如姓名、电子邮件、电话等。

接下来，我们将创建一个仅包含所需参数的新付款请求。

How to use the paymentMethods parameter

const paymentMethods = [  {    supportedMethods: ['basic-card']
  }
]
const paymentDetails = {
  total: {
    label: 'Total Amount',
    amount: {
      currency: 'USD',
      value: 8.49
    }
  }
}
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails)

Notice the supportedMethods parameter in the paymentMethods object. When it is set to basic-card, both debit and credit cards of all networks will be accepted.

但您可以限制受支持的网络和卡片类型。例如，只有以下Visa、MasterCard和Discover信用卡被接受：

const paymentMethods = [  {    supportedMethods: ['basic-card'],
    data: {
      supportedNetworks: ['visa', 'mastercard', 'discover'],
      supportedTypes: ['credit']
    }
  }
]
// ...

How to use the paymentDetails object

传递给PaymentRequest构造函数的第二个参数是付款详细信息对象。它包含订单总数和可选的显示项目数组。total参数必须包括一个label参数和一个带有currency和value``amount参数。

您还可以添加其他显示项目，以提供总数的高级细分：

const paymentDetails = {
  total: {
    label: 'Total Amount',
    amount: {
      currency: 'USD',
      value: 8.49
    }
  },
  displayItems: [
    {
      label: '15% Discount',
      amount: {
        currency: 'USD',
        value: -1.49
      }
    },
    {
      label: 'Tax',
      amount: {
        currency: 'USD',
        value: 0.79
      }
    }
  ]
}

displayItems参数并不意味着显示一长长的项目列表。由于移动设备上浏览器的支付用户界面的空间有限，您应该使用此参数仅显示顶级字段，如小计、折扣、税费、运费等。

Keep in mind that the PaymentRequest API does not perform any calculations. So your web application is responsible for providing the pre-calculated total amount.

如何使用options参数请求更多详细信息

您可以使用第三个可选参数向用户请求其他信息，例如姓名、电子邮件地址和电话号码：

// ...
const options = {
  requestPayerName: true,
  requestPayerPhone: true,
  requestPayerEmail: true
}
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options)

默认情况下，所有这些值都是false的，但将它们中的任何一个值为true``options对象中将导致付款UI中的额外步骤。如果用户已经在浏览器中存储了这些详细信息，它们将被预先填充。

如何显示付款用户界面

创建PaymentRequest对象后，您必须调用show()方法向用户显示付款请求UI。

show()方法返回一个承诺，如果用户成功填写了详细信息，则该promise将使用aPaymentResponse对象解决。如果出现错误或用户关闭用户界面，则承诺将被拒绝。

// ...
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options)
paymentRequest
  .show()
  .then(paymentResponse => {
    // close the payment UI
    paymentResponse.complete().then(() => {
      // TODO: call REST API to process the payment at the backend server
      // with the data from `paymentResponse`.
    })
  })
  .catch(err => {
    // user closed the UI or the API threw an error
    console.log('Error:', err)
  })

使用上述代码，浏览器将向用户显示付款用户界面。一旦用户填写了详细信息并单击“Pay”按钮，您将在show()承诺中收到PaymentResponse对象。

当您调用PaymentResponse.complete()方法时，付款请求UI会立即关闭。此方法返回一个新的承诺，以便您可以使用收集的信息调用后端服务器并处理付款。

如果您想在付款用户界面显示旋转器时致电后端服务器处理付款，您可以延迟调用complete()）。

Let's create a mock function for payment processing with the backend server. It takes paymentResponse as a parameter and returns a promise after 1.5 seconds that resolves to a JSON object:

const processPaymentWithServer = paymentResponse => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ status: true })
    }, 1500)
  })
}
//...
paymentRequest
  .show()
  .then(paymentResponse => {
    processPaymentWithServer(paymentResponse).then(data => {
      if (data.status) {
        paymentResponse.complete('success')
      } else {
        paymentResponse.complete('fail')
      }
    })
  })
  .catch(err => {
    console.log('Error:', err)
  })

在上面的示例中，浏览器支付UI将显示一个处理屏幕，直到processPaymentWithServer()方法返回的承诺得到解决。我们还使用“成功”和“失败”字符串来告诉浏览器交易结果。如果您调用complete('fail')浏览器将向用户显示错误消息。

如何取消付款请求

如果您想取消付款请求，因为没有活动或任何其他原因，您可以使用PaymentRequest.abort()方法。它立即关闭付款请求UI，并拒绝show()承诺。

// ...
setTimeout(() => {
  paymentRequest
    .abort()
    .then(() => {
      // aborted payment request
      console.log('Payment request aborted due to no activity.')
    })
    .catch(err => {
      // error while aborting
      console.log('abort() Error: ', err)
    })
}, 5000)

结论

这就是JavaScript# Payment Request API快速介绍的结束。它提供了一种基于浏览器的方法来收集客户付款和联系信息，这些信息可以发送到后端服务器以处理付款。

以上就是JavaScrip如何安全使用Payment Request API详解的详细内容，更多关于JavaScrip Payment Request API的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

layer弹出层父子页面事件相互调用方法
今天小编就为大家分享一篇layer弹出层父子页面事件相互调用方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
一文详解JavaScript数组对象和字符串对象
这篇文章主要介绍了JavaScript数组对象和字符串对象，文章中有详细的代码示例，对学习或工作有一定的帮助，需要的小伙伴可以参考一下
2023-04-04
Echarts图表如何利用formatter自定义tooltip的内容和样式
这篇文章主要给大家介绍了关于Echarts图表如何利用formatter自定义tooltip的内容和样式的相关资料,echarts的图表配置非常的灵活自由,但是不熟悉的时候容易不知道怎么配置,需要的朋友可以参考下
2023-06-06
javascript实现时间格式输出FormatDate函数
这篇文章主要介绍了javascript实现时间格式输出FormatDate函数,可实现fmt标签一样对日期时间型内容格式输入的功能,是非常实用的技巧,需要的朋友可以参考下
2015-01-01
php 中序列化和json使用介绍
序列化是将对象状态转换为可保持或可传输的格式的过程。与序列化相对的是反序列化，它将流转换为对象。这两个过程结合起来，可以轻松地存储和传输数据
2013-07-07
javascript防篡改对象实例详解
这篇文章主要介绍了javascript防篡改对象,结合实例形式分析了防篡改对象的三个级别与具体使用技巧,需要的朋友可以参考下
2017-04-04
微信小程序canvas实现刮刮乐效果
这篇文章主要为大家详细介绍了微信小程序canvas实现刮刮乐效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-07-07
用javascript修复浏览器中头痛问题的方法整理篇[译]
我们提倡无论何时都尽可能地使用CSS,这样我们更容易取得成功.现在浏览器对CSS的支持已经非常好,肯定足以让你用来控制你的网页布局与排版.但,即使如此,还是有某些页面元素会在不同的浏览器下表现也不一样.
2008-11-11
JavaScript使用localStorage判断设置值是否过期
本文主要介绍了JavaScript使用localStorage判断设置值是否过期，通过设置过期时间，我们可以使用 setItemWithExpiration 函数将数据存储到 localStorage 中，并使用 getItemWithExpiration 函数获取数据并检查是否过期，感兴趣的可以了解一下
2023-05-05
Js实现累加上漂浮动画示例
这篇文章主要为大家介绍了Js实现累加上漂浮动画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11