CORS header missing

[kwstoikonomou]

I am using the new version of Native Checkout (v2.0 3DS)

When i use VivaPayments.cards.requestToken() a http POST request is sent to https://demo.vivapayments.com/nativecheckout/v2/chargetokens. This request results in the error below:

Access to XMLHttpRequest at 'https://demo.vivapayments.com/nativecheckout/v2/chargetokens' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Which is caused by the fact that the OPTIONS response is missing the CORS header mentioned.

This is pretty serious since it completely prevents me from using this version of Native Checkout.

[donfn]

Try:

• Configuring SSL on your server. From a quick guess, I suppose you're using NodeJS and Express, so here you go: https://www.npmjs.com/package/https-localhost

• Installing a browser add-on that bypasses CORS : https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi

[kwstoikonomou]

With all due respect, neither of your suggestions even makes sence.

1. It is VIVA's server that responds without the CORS header. Which is pretty clear from the url i provided.

2. How about, NO! First of all security risk. And secondly, should i also inform all my users that they should do that before going through the checkout??

[donfn]

CORS is there to prevent JavaScript and CSS loading from unauthorized remote sources. There is no point of Viva sending a "Access-Control-Allow-Origin" header into their response.

You'll need to allow connections to Viva's domains via your webserver's headers configuration. See https://enable-cors.org/server_expressjs.html.

I suggested

• Adding SSL to your page, to avoid additional issues with Chrome (or Chromium based browsers) and Javascripts not loading (rare issue but happens).

• Installing the plug-in to ease the development phase of your application and allow you to focus on CORS at the end

ντόντ μπι αγκρέσιβ μαν, άιμ τζάστ τράινγκ του χέλπ

☺️

[kwstoikonomou]

I still think both suggestions have nothing to do with solving what i said, so i will not continue this discussion i do not think it will lead anywhere.

Plus, i found the problem. i was using the wrong baseURL when doing VivaPayments.cards.setup()

I needed to use 'https://demo-api.vivapayments.com' because i am using the v2 of Viva's JS. Which is different that what v1 uses (https://demo.vivapayments.com)

Hope this helps somebody else in the future