Worldpay 3D Secure в React веб-приложение

Question

Я пытаюсь интегрировать worldpay с нашим веб-приложением React.

Включение функции кредитной карты через Worldpay.useTemplateForm() работает нормально, но следующий шаг вызывает проблему.

Чтобы использовать 3DS, мы должны перенаправить с нашего сайта на сайт, контролируемый банком, и предоставить им URL-адрес для последующего перенаправления.

Это само по себе раздражает, потому что в нашем приложении много сохраненного состояния, и при возврате все это будет потеряно, однако это не самая большая проблема. После 3DS они отправляют данные формы обратно нам, и React не может принимать запросы на публикацию, и на веб-странице просто отображается сообщение "НЕ МОЖЕТ ПОСТАТЬ" /.

Кто-нибудь успешно внедрил 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))

Если данные корзины верны, вы получите "токен" внутри переменной "результат". Затем вы должны отправить этот токен на свой бэкэнд, затем бэкэнд должен сделать запрос с этим токеном, как указано в официальной документации - интеграция с бэкэнд 3D secure

Остальные шаги описаны в этой ссылке.