I have a blocker using an external API

Ask us anything How do I?
1

Hi, I’m trying to use Xendit for the payment process on my app. I’ve tried using custom JS and REST api request, both of which are to no avail. Whenever I use the REST api request, I always stumble upon a network error and when I try to make the request through a server, it returns an error 500.

As for the custom JS, I get blocked by the CORS policy.

Attached are some screenshots, JS code, and the api I’m trying to use:
https://developers.xendit.co/api-reference/?javascript#invoices

let body = 
{
    'external_id': 'testFee',
    'amount': 1000,
    'description': 'TestInvoiceFee',
    'customer': {
      'given_names': 'John Waldo',
      'surname': 'Magalona',
      'email': 'waldo.magalona@ahglab.com'
    },
    'customer_notification_preference': {
      'invoice_created': [
        'email'
      ],
      'invoice_reminder': [
        'email'
      ],
      'invoice_paid': [
        'email'
      ],
      'invoice_expired': [
        'email'
      ]
    },
    'success_redirect_url': window.location.href,
    'failure_redirect_url': window.location.href,
    'currency': 'PHP'
  };

fetch('https://api.xendit.co/v2/invoices', {
  method: 'POST',
  headers: {
    'Content-Type':  'application/json',
    Authorization: 'Basic eG5kX2RldmVsb3BtZW50X0ZnenRmdlkwWFJONXFrZDBGRVhxcXJZZ0tWblgyUmJrbWt5Vlh2bjhrUW8zYklzcFVSTWllMjFxbTZCTlg9PTo='
  },
  body: JSON.stringify(body),
})
.then((response) => response.json())
.then((data) => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});```

![image|690x333](upload://t1a1aFJOYN1G5VHfOmEkG0X8GVm.jpeg)
![image|690x332](upload://AmfjjPdL2zF0JtYTwqv7rXIzV2y.jpeg)
![image|690x331](upload://3rgP3nqWt3H1Iz5yxfRzCddLClI.jpeg)
2

image
image1920×927 186 KB

image
image1920×925 109 KB

image
image1920×922 104 KB

3

It looks like the API is meant to be used server side as they do not handle CORS.
The api request maybe is failing because is not getting the right data. Are you adding the data as fields or query string?
Also keep in mind that now we all know your auth password from the code you posted, and all the user of your app will know it as well. If this API is meant to be used server side you should consider to make this request on your backend.

1 Like
4

Thank you @dorilama. I guess I might do it on my backend. I’ve already deleted that auth password on my Xendit account before posting this :smiley:

2 Likes
5

Looking at your second screenshot, where you make a server-side request but still get a 500 error.

You unfolded the response. Can you also show what’s inside data of that response?

It might include more information about what is not working with the API call.

6

Hi @Joyce this is the content of data:

data
success: false
code: "INTERNAL_ERROR"

is it possible to install dependencies on our weweb app?

7

what about the data of the request? maybe it’s not the right data and the server does not handle the exception.