Updating subscription

Developer help
1

I’m working on a custom membership page. I’d like to display the available tiers and let the user pick one. (No, I don’t want to use the built-in Portal page. I need more customization.)

I’m good on displaying tiers, and if I have a user without an account, the link I’m creating work. (They look like this: <a class="c-btn Monthly" href="javascript:void(0)" data-portal="signup/{{id}}/monthly"> )

But I’m having trouble figuring out how to let a user who already has a subscription choose a different plan. That link doesn’t work - I get a popup that says: “A subscription exists for this Member.”

This is doable using Portal - there’s no problem there to edit a subscription. I opened dev tools and I can see that when I go through the process of changing a subscription (as a user), I first see a request to /members/api/session . I can do that with fetch, and I get back a long string, no errors. Then I see a PUT request to https://demo.spectralwebservices.com/members/api/subscriptions/sub_1MikcPHXfUM0q3dxMn6EYpkV/ , where that last part is the subscription I’m trying to change to. The body for that PUT looks like: {"cancel_at_period_end":false,"identity":"<bigstringfromaminuteago>","tierId":"640615f0ce7981003de31937","cadence":"month"}

Trying to exactly replicate that PUT request, I’m getting a 400 error.

Can anyone nudge me in the right direction? What am I missing?

2

What’s the response of the 400 error? A 400 usually implies that the request payload was invalid

3

I’m seeing ‘400 Bad Request’ in the chrome console. I was testing last night on Ghost Pro, but maybe I need to move my testing elsewhere (still with an ssl certificate) so that I can see what’s happening server side.

4

The console will show Bad Request, but the Network Tab should include the error response: Network features reference - Chrome Developers

5

Here are the response headers:

image
image855×584 13 KB

The actual response tab is totally blank:

image
image1155×642 27.6 KB

With no response body at all, I’m struggling to figure out what the API doesn’t like…

6

How are you making the request? If it’s using fetch, make sure you add .then(response => response.json()) to it so the browser downloads the response instead of giving up

7

Thanks again for your help, Vikas. I was missing a content-type in my fetch request, and that (eventually) made all the difference.

1 Like