Search code examples
javascriptxmlhttprequestcorsbasic-authenticationadyen

Basic authentication with header - Javascript XMLHttpRequest

I am trying to access Adyen test API that requires basic authentication credentials. https://docs.adyen.com/developers/ecommerce-integration

My credentials work when accessing the API page through browser.
Authentication

But I get an 401 Unauthorized response when trying to access the API with XMLHttpRequest POST request.

Javascript Code

var url = "https://pal-test.adyen.com/pal/servlet/Payment/v25/authorise";

var username = "[email protected]";
var password = "J}5fJ6+?e6&lh/Zb0>r5y2W5t";
var base64Credentials = btoa(username+":"+password);

var xhttp = new XMLHttpRequest();
xhttp.open("POST", url, true);
xhttp.setRequestHeader("content-type", "application/json");
xhttp.setRequestHeader("Authorization", "Basic " + base64Credentials);

var requestParams = XXXXXXXX;
xhttp.send(requestParams);


Result

Result

Solution

  • The PAL is a Payment Authorisation API. You never want to call it from a browser. You only want to expose your username and password to send in payments in your backend code.

    In Client-side encryption, the encryption is done in the browser. You then send the encrypted data to your own server. On your server you then create a payment authorization request (of which the encrypted data is one of the elements, along side payment amount, etc).

    If you would be able to manage to make this run from your browser, your end solution will allow your shoppers to change amounts, currency's, payment meta data etc from the JavaScript layer. This should never be the case.

    The authorization is for that reason part of the "Server side" integration part of documentation: https://docs.adyen.com/developers/ecommerce-integration?ecommerce=ecommerce-integration#serverside

    Depending on your server side landscape the CURL implementation in your favorite language differs, but most of the time are easy to find.

    Kind regards,

    Arnoud