Question

我正在尝试将Worldpay与React Web应用程序集成。

通过Worldpay.useTemplateForm（）集成信用卡功能可以正常工作，但下一步会导致问题。

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

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

有人能成功将Worldpay 3DS实施到React应用中吗？

Answer 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))

如果购物车数据正确，您将在'result'变量中获得'token'。然后，您应该将此令牌发送到您的后端，然后后端应使用官方文档-3D secure backend integration

中提到的令牌请求

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

React Web应用程序中的Worldpay 3D Secure

1 个答案: