Alert is shown for entering username and password even though am passing basic auth

Question

I am trying to generate order id using order's api in razorpay.

My code:-

This code is in script of head:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The below code is in the script of the body

    var jsonData = {
  "currency": "INR",
  "amount": "10000",
};

$.ajax({
  type: 'POST',
  dataType: 'jsonp',
  url: url,
  data: { json: JSON.stringify(jsonData) },
  xhrFields: {
    withCredentials: true
  },
  beforeSend: function (xhr) {
    xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
  },
  contentType: "application/json; charset=utf-8",
  success: function (response) {
    alert("done");
  },
  error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    jsonValue = jQuery.parseJSON(xhr.responseText);
    console.log(xhr.Message);
  },
});

The above code continuously shows me alert box with status code as 0.

`0` means that there is an error. Have you logged `thrownError` as well to see what exactly is going wrong? — Ivar, Sep 05 '21 at 08:12
Does this answer your question? [Why is AJAX returning HTTP status code 0?](https://stackoverflow.com/questions/2000609/why-is-ajax-returning-http-status-code-0) — Ivar, Sep 05 '21 at 08:14

score 0 · Answer 1 · edited Nov 22 '22 at 23:00

I tried to reproduce your output [alert with status 0] and I was able to do it

Then I started to search for a solution and I found this answer as a nice place to start with. Following the link I found this answer and this other very useful. Setting dataType: 'jsonp' changed the game

The snippet that eventually gave me a 200 back alert is the following:

var jsonData = {
    "text1" : "textData1",
    "number": 10
};

$.ajax({
  type: 'POST',
  dataType: 'jsonp',
  url: 'https://your.endpoint',
  //crossDomain: true,
  data : { json: JSON.stringify(jsonData) },
  contentType: "application/javascript; charset=utf-8",
  success: function (response){
    alert("done");
  },
  error: function (xhr, ajaxOptions, thrownError) {
    alert(xhr.status);
    console.log(thrownError.Message);
  },
});

Since we triggered the error despite being successful, you may want to look at this answer too

I also took a look at RazorPay APIs [I never worked on them]. With regards to creating an order I saw that amount is passed as an integer, not as a string. Then I modified the script according to this answer. And by the way I guess you will need to multiply it by 100 because the amount is expressed in "currency subunits" ["For example, for an amount of ₹295, enter 29500"]

Have updated the ques with new code. Please check .. After trying your code am getting an alert to enter username and password. — Deepak Lohmod, Sep 05 '21 at 13:32
My sample was a client-server talk with no auth involved because the original problem was about receiving an alert box with status 0, i.e. the reason for a wrong status. This issue was solved. Since the focus has now shifted on authentication, you should have posted another question. By the way, I think that so far you got the max using jsonp, as discussed in [this answer](https://stackoverflow.com/a/1691971). So now check [here](https://jsonp.afeld.me/) or [here](https://kevinkuchta.com/2012/01/basic-authentication-with-jsonp/) following [Nick's words](https://stackoverflow.com/a/3571126) — Antonino, Sep 05 '21 at 16:30

Alert is shown for entering username and password even though am passing basic auth

1 Answers1