PayPal REST API fetch for access_token in react-native, "AUTHENTICATION_FAILURE"

Question

I'm trying to integrate PayPal in my react-native app by following https://medium.com/zestgeek/paypal-integration-in-react-native-9d447df4fce1 link. With postman I get a response, but with my code it gives this error:

{"links": [{"href": "https://developer.paypal.com/docs/api/overview/#error", "rel": "information_link"}], "message": "Authentication failed due to invalid authentication credentials or a missing Authorization header.", "name": "AUTHENTICATION_FAILURE"}

Expected response (with Postman - success case)

{
    "scope": "https://uri.paypal.com/services/invoicing https://uri.paypal.com/services/vault/payment-tokens/read https://uri.paypal.com/services/disputes/read-buyer https://uri.paypal.com/services/payments/realtimepayment https://uri.paypal.com/services/disputes/update-seller https://uri.paypal.com/services/payments/payment/authcapture openid https://uri.paypal.com/services/disputes/read-seller Braintree:Vault https://uri.paypal.com/services/payments/refund https://api.paypal.com/v1/vault/credit-card https://api.paypal.com/v1/payments/.* https://uri.paypal.com/payments/payouts https://uri.paypal.com/services/vault/payment-tokens/readwrite https://api.paypal.com/v1/vault/credit-card/.* https://uri.paypal.com/services/subscriptions https://uri.paypal.com/services/applications/webhooks",
    "access_token": "A21AAL0lvt6p5QhxL5p6KusbbwMNu8o_DWDyNHHWAc3KuOBK7MO4YY3s_1CTMiY1BCAZwQ-dX7MzixsxY5StFfEFrSI2pamNg",
    "token_type": "Bearer",
    "app_id": "APP-80W284485P519543T",
    "expires_in": 32400,
    "nonce": "2021-02-22T11:42:28ZIt4HFB53zPnqZtMo8CeBA17Aj1MKaRQDVAVRE9VqUJg"
}

My code that errors

    fetch('https://api.sandbox.paypal.com/v1/oauth2/token',{ grant_type: 'client_credentials' },
    { 
        method: 'POST',
        headers: { 
             'Accept': 'application/json', 
             'Accept-Language': 'en_US',
             'Content-Type': 'application/x-www-form-urlencoded',
             'Authorization': 'Basic QVVydEp4Y0hmTVVsRGpIZ1YyRkhNT1Vuek1rVWV1ODZfa203aDY3dUVIekg1YjVSTjdWby1xOEFZUHRjZHo3SWFpb2M0NnhXMEg5SlFabVQ6RU1iYkotWXFRTFQ2bGl1UHRKVVJxMnBBZ2g5V3VVVERLbVYzNTVfVkllQURzdDBCTWxuVU5LaUhWTEs3aXRDeVpGWHJFUU9leDlwOTNXTzg='
        }
    
      }) .then(response => response.json())
      .then(async (data) => {
        console.log(data)
       
    })
    .catch(function (error) {
        let edata = error.message;
        console.log('Error:', edata)
    }
    )

Answer 1

Wrong syntax for fetch (why separate object parameters?) and wrong syntax for URL-encoded form data in the part of the object intended as body.

Therefore, no request headers and also no form post data (in body) are being set for your call -- it evaluates and runs as a blank request to the endpoint, hence the error.

Here's how to do it

fetch('https://api.sandbox.paypal.com/v1/oauth2/token', { 
    method: 'POST',
    headers: { 
         'Accept': 'application/json', 
         'Accept-Language': 'en_US',
         'Content-Type': 'application/x-www-form-urlencoded',
         'Authorization': 'Basic ' + btoa('YOUR_CLIENTID:YOUR_SECRET')
    },
    body: 'grant_type=client_credentials'

}).then(response => response.json())
  .then(async (data) => {
    console.log(data)
}).catch(function (error) {
    let edata = error.message;
    console.log('Error:', edata)
}