Why doesn't my fronend Javascript show the same response from API as browser?

Question

I have Flask backend with an API function that links to a Stripe API. When I call this in Postman or a browser I get exactly what I expect (a URL that Stripe generated). However, when I call it in my Javascript code I get something completely different and I have no idea why.

Here is my code in Flask/Python:

@app.route('/manage-subscription-portal', methods=['GET'])
def manageSubscriptionPortal():
  portalTry = stripe.billing_portal.Session.create(
      customer='cus_XXXXXXXXXXX',
      return_url='https://example.com/account',
  )  
  print(portalTry["url"])
  return jsonify({'url' : portalTry["url"]})

When called in Postman I get this as a response (which I expect)

{
  "url": "https://billing.stripe.com/session/_ILW65rxo7ix3RLm3SBrZ9PQeDV7pHlm"
}

Here is my Javascript code linked to a button

 manageSubscription.addEventListener("click", function(){
    fetch('/manage-subscription-portal').then(response => {
      console.log(response)
      return response
    }).then(portalSession => {
      console.log(portalSession)
    })
  })

Both 'response' and 'portalSession' give what's shown in the picture

Does anyone know why I do not get the same in my Javascript code as in Postman?

Answer 1

Hi if you are using HTML5 fetch API you can access the returned JSON from the server like this

manageSubscription.addEventListener("click", function(){
  fetch('/manage-subscription-portal').then(response => {
    return response.json() 
  }).then(portalSession => {
    console.log(portalSession)
  })
})