Updating subscription

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?

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

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.

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

Here are the response headers:

The actual response tab is totally blank:

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

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

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