I am converting this cURL code to javascript.

curl -u <YOUR_KEY_ID>:<YOUR_KEY_SECRET> \
-X POST  \
-H "Content-Type: application/json" \
-d '{
  "name": "Gaurav Kumar1"
  "email": "[email protected]"
  "contact": "9123456781"
}'

<script>
    function createCustomer() {

 console.log("createCustomer");
     const url="";
     fetch(url, {
        method: 'post',
        headers: {
 "x-api-key": "MY_KEY_ID",
       "content-type": "application/json",
    "cache-control": "no-cache"
        },
        body: {
          "name": "Gaurav Kumar1",
            "email": "[email protected]",
            "contact": "9123456781"
        }
})
        .then(response => response.json())
        .then((data) => {
        console.log("data",data)
                  })
}

</script>

when i check this in postman it is giving the correct response. But when i use this in my site it is giving the error.

POST 401 (Unauthorized) data : error: {code: "BAD_REQUEST_ERROR", description: "Please provide your api key for authentication purposes."}

I am converting this cURL code to javascript.

curl -u <YOUR_KEY_ID>:<YOUR_KEY_SECRET> \
-X POST https://api.razorpay./v1/customers \
-H "Content-Type: application/json" \
-d '{
  "name": "Gaurav Kumar1"
  "email": "[email protected]"
  "contact": "9123456781"
}'

<script>
    function createCustomer() {

 console.log("createCustomer");
     const url="https://api.razorpay./v1/customers";
     fetch(url, {
        method: 'post',
        headers: {
 "x-api-key": "MY_KEY_ID",
       "content-type": "application/json",
    "cache-control": "no-cache"
        },
        body: {
          "name": "Gaurav Kumar1",
            "email": "[email protected]",
            "contact": "9123456781"
        }
})
        .then(response => response.json())
        .then((data) => {
        console.log("data",data)
                  })
}

</script>

when i check this in postman it is giving the correct response. But when i use this in my site it is giving the error.

POST https://api.razorpay./v1/customers 401 (Unauthorized) data : error: {code: "BAD_REQUEST_ERROR", description: "Please provide your api key for authentication purposes."}

• javascript
• curl
• razorpay

• Please read the razorpay documentation on how to pass API Key. Hint, it uses basic auth – Ayush Gupta Commented Nov 23, 2019 at 7:02
• Possible duplicate of Basic authentication with fetch? – Ayush Gupta Commented Nov 23, 2019 at 7:05
• Just a brownie point, having your authorization token in frontend is a serious security issue, you should call your server with the details of the Customer and let the server call razor pay APIs for you its a lot safer that way. – Ayyub Kolsawala Commented Nov 23, 2019 at 7:27
• @pooja How did you solve this? – Priyanka Commented Mar 23, 2020 at 10:26

2 Answers 2

You are missing the header Authorization, have a look at this I use jquery AJAX for it I get the code from postman itself.

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "https://api.razorpay./v1/customers",
  "method": "POST",
  "headers": {
    "Content-Type": "application/x-www-form-urlencoded",
    "Authorization": "Basic cnpwX2xpdmVfa2V5OmFfbG9uZ19wYXNzd29yZA==",
    "User-Agent": "PostmanRuntime/7.13.0",
    "Accept": "*/*",
    "Cache-Control": "no-cache",
    "Postman-Token": "f1c3919b-d2b8-4646-8ce0-caa60f2dfc3a,9dd079e3-ddab-41a8-8b1d-5ac53c00e07b",
    "Host": "api.razorpay.",
    "accept-encoding": "gzip, deflate",
    "content-length": "59",
    "Connection": "keep-alive",
    "cache-control": "no-cache"
  },
  "data": {
    "name": "Gaurav Kumar1",
    "email": "[email protected]",
    "contact": "9123456781"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});

Refer to the steps to Generate the Authorization Key and Secret this is from the official documentation.

https://razorpay./docs/assets/images/generate-api-keys.gif

Hope this helps :)

Here's my code.its work perfect

you have to encode keys and secret by the following methong :

key:key_secret

by base64 encrypt algorithym ,

then you will pass to authorization token for you api >>>

               fetch("https://api.razorpay./v1/orders", {
                 method: "POST",
                 headers: {
                   "Content-Type": "application/json",
                   Authorization: "Basic cnpwX3Rlc3RfMWNIbVVzREJRczhUVVY6WDRTRG95YVBqcHNTb3dac0JHQ29TdEs5",
                   Accept: "application/json",
                   "Cache-Control": "no-cache",
                   Host: "api.razorpay."
                 },
                 body: JSON.stringify({
                   amount: 50000,
                   currency: "INR",
                   receipt: "receipt#1",
                   payment_capture: 1
                 })
               })
                 .then(response => response.json())
                 .then(responseJson => {
                   console.log("responseJson", responseJson);
                   var order = responseJson;
                 });