Worldpay 3D Secure in React web app

Question

I am attempting to integrate worldpay with out React web app.

Incorporating the credit card functionality via Worldpay.useTemplateForm() is working fine but the next step is causing a problem.

To use 3DS we have to redirect away from our site to a bank controlled site and supply them with a URL to be redirected back to afterwards.

This is annoying in itself because we have a lot of saved state in our app and on returning all of this would be lost, however its not the biggest issue. After the 3DS they POST the form data back to us and React cannot accept post requests and the webpage simply displays 'CANNOT POST /'

Has anyone successfully implemented Worldpay 3DS into a React app??

Hiya Martyn, interested to know how you got on with integrating WorldPay in your React application as am after pointers? — CheGuevarasBeret, Sep 10 '19 at 17:32

score 0 · Answer 1 · answered Oct 30 '19 at 16:40

You can send request with cart data dirrectly to payment system:

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

If cart data is correct you will get 'token' inside 'result' variable. Then you should send this token to your backend, then backend should make request with this token as mentioned in official documentation - 3D secure backend integration

Worldpay 3D Secure in React web app

1 Answers1