React Web 应用程序中的 Worldpay 3D 安全答案

【问题标题】：Worldpay 3D Secure in React web appReact Web 应用程序中的 Worldpay 3D 安全
【发布时间】：2019-01-04 17:15:27
【问题描述】：

我正在尝试将 worldpay 与 React 网络应用程序集成。

通过 Worldpay.useTemplateForm() 整合信用卡功能工作正常，但下一步会导致问题。

要使用 3DS，我们必须从我们的站点重定向到银行控制的站点，并为他们提供一个 URL，以便之后重定向回。

这本身就很烦人，因为我们的应用程序中有很多已保存的状态，并且在返回时所有这些都会丢失，但这并不是最大的问题。在 3DS 之后，他们将表单数据 POST 给我们，而 React 无法接受发布请求，网页只显示“CANNOT POST /”

有没有人成功地将 Worldpay 3DS 应用到 React 应用中？？

【问题讨论】：

嘿，React web 实现了 WorldPay 吗？
Hiya Martyn，有兴趣了解您是如何将 WorldPay 集成到您的 React 应用程序中的吗？

标签： reactjs worldpay

【解决方案1】：

您可以将带有购物车数据的请求直接发送到支付系统：

const formData = {
  reusable: true,
  paymentMethod: {
    name: 'name',
    expiryMonth: 10,
    expiryYear: 2021,
    issueNumber: 1,
    startMonth: 2,
    startYear: 2013,
    cardNumber: '5454 5454 5454 5454',
    type: 'Card',
    cvc: '123'
  },
  clientKey: 'your key'
}

fetch('https://api.worldpay.com/v1/tokens', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(formData)
})
  .then(data => {
    if (data.ok) {
      data.json().then(result => {
        // if data is valid you will get token
        console.log('result', result) // <- 
      })
    }
  })
  .catch(err => console.log('err', err))

如果购物车数据正确，您将在“结果”变量中获得“令牌”。然后您应该将此令牌发送到您的后端，然后后端应使用此令牌发出请求，如官方文档中所述 - 3D secure backend integration

此链接中描述的其他步骤。

【讨论】：