9 posts / 0 new
Last post
eddielascu16254
No 'Access-Control-Allow-Origin' header is present on the requested resource

I use the POST HTTP command to tokenize a credit card. The whole process is described here: https://developer.payeezy.com/payeezy-api/apis/post/transactions/tokens. I set up the 6 Header Parameters as per the documentation: the API Key, the Merchant Token, the content type, the Authorization, the nonce and the timestamp. I get this error when I try to make the HTTPS call:

Failed to load https://api-cert.payeezy.com/v1/transactions/tokens: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 500.

The call is made from an Angular application that is running on my development machine, on port 4200. Any idea what is going wrong?

Thanks,
Eddie


christopherlord730
Re: No 'Access-Control-Allow-Origin' header is present on the...

Our servers do not support CORS.


eddielascu16254
Re: No 'Access-Control-Allow-Origin' header is present on the...

The POST approach works when I try it in Postman, on the same machine. How do I make it work in my app? Are there additional headers that I would have to add?


christopherlord730
Re: No 'Access-Control-Allow-Origin' header is present on the...

The request has to be executed from your server and not natively in the browser.

http://restlet.com/company/blog/2016/09/27/how-to-fix-cors-problems/
http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/


eddielascu16254
Re: No 'Access-Control-Allow-Origin' header is present on the...

But wouldn't that mean we would have to transfer the credit card information over to our server, thus placing us under the PCI incidence? That's exactly what we are trying to avoid! Is there a solution to this problem?


christopherlord730
Re: No 'Access-Control-Allow-Origin' header is present on the...

You can use Payeezy.JS to tokenize the PAN and the merchant server won't be touching the card information. However, Payeezy.JS does not verify AVS or CVV information in demo or PROD it just tokenizes the PAN. Once the card is tokenized you would have to use the Direct API to charge the tokenized PAN.

The GET method deprecation was for other languages such as PHP, Python, etc. not the Payeezy.JS method.


eddielascu16254
Re: No 'Access-Control-Allow-Origin' header is present on the...

Christopher,

Just make sure I get the facts straight. You are saying that the POST request approach documented here: https://developer.payeezy.com/payeezy-api/apis/post/transactions/tokens cannot be used unless the request is made from the merchant's server? Maybe I am missing something, but any integrator that is looking at tokenizing credit cards does so to get away from having to go through the PCI Certification. Why would you document a method to tokenize credit cards that only works when triggered from the merchant's server?

Anyway, moving on to the Payeezy_JS approach you suggest. Since our project is developed with Angular, are you aware of any such implementation (using Angular) that was integrated with Payeezy_JS? On GitHub or anywhere else? It would be very helpful if we could take a look at something like that.

Thanks for your help and support,
Eddie


christopherlord730
Re: No 'Access-Control-Allow-Origin' header is present on the...

With the POST token method; yes the request would have to originate from the merchant server without using CORS. There is the option to use a hosted payment page to tokenize the PAN or use Payeezy.JS so the PAN is tokenized from the customer browser. Payeezy.JS itself is just Javascript/JQuery so there really shouldn't be many modifications with an Angular.JS environment. We don't actually track the merchant environments so unfortunately I'd have no way of being able to provide such an example.


eddielascu16254
Re: No 'Access-Control-Allow-Origin' header is present on the...

For anyone visiting this thread and wondering about my Angular 5 implementation, I have created and posted a simplified solution on Stackblitz. If you want to run it, use this URL: https://angular-xjwtp4.stackblitz.io. Click the "Tokenize Credit Card" button and check the console. If you want to see the code behind, use this URL: https://stackblitz.com/edit/angular-xjwtp4

Angular 5 offers JSONP functionality right out of the box, so there is no need to follow the example in Payeezy.JS ad litteram. All one needs to do is collect the credit card information from the user and build the URL for the call. The "Jsonp.request" call returns an observable and from there, everything falls into place.

Good luck,
Eddie