#BenH

1 messages · Page 1 of 1 (latest)

swift saffronBOT
spark sonnet
#

Ah, okay. So you can't redirect via fetch(). You would need to pass the URL back to the client via the fetch() method then do a regular redirect from the client-side

swift saffronBOT
errant marlin
#

Thank you

#

I'm now getting this back, why is it directing to localhost rather than the stripe customer portal link?

# 
export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const session = await stripe.billingPortal.sessions.create({
        customer: 'cus_O3xou2R4Cc2QXR',
        return_url: 'http://localhost:3000',
      });

      res.setHeader('Access-Control-Allow-Origin', '*');
      res.status(200).json({ url: session });
    } catch (err) {
      console.error(err);
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.status(405).end('Method Not Allowed');
  }
}
unique rampart
#

Because that's what you've provided as your return_url -- this is how your customers get redirected back to your site

errant marlin
#

Ahh ok, how can I get it to return the customer portal link?

unique rampart
#

What do you mean?

errant marlin
#

I was under the understanding that this would redirect the user to their stripe hosted customer portal

unique rampart
#

You're trying to redirect to the portal at the beginning or after some action?

errant marlin
#

so when they click my 'subscribe' button, they are redirected to the portal

#

To manage their subscriptions

#

On the docs seems to say this should return a short-lived URL

unique rampart
errant marlin
#

That's what I'm trying to return here:

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const session = await stripe.billingPortal.sessions.create({
        customer: 'cus_O3xou2R4Cc2QXR',
        return_url: 'http://localhost:3000',
      });

      res.setHeader('Access-Control-Allow-Origin', '*');
      res.status(200).json({ url: session.url });
    } catch (err) {
      console.error(err);
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.status(405).end('Method Not Allowed');
  }
}
#

But not quite sure what I'm doing wrong 😆

#

that should return the url from the session object

unique rampart
#

Well, it looks like you're sending back the url in that response json, and you're redirecting the customer to that client side?

#

What's happening when you do this?

errant marlin
#

I was under the impression that return_url, was where the user would be redirected to after they've finished with the portal

#

And nothing as it stands, I'm just console logging the url before I do any re-direct stuff

  async function loadCustomerPortal() {
    const sessionUrl = await fetch('/api/customer-portal', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'POST',
      },
      body: JSON.stringify({
        customerStripeId: userMetaData!.stripeCustomerId,
      }),
    });

    return sessionUrl;
  }

  async function handleRedirect() {
    const sessionUrl = await loadCustomerPortal();

    console.log(sessionUrl);
  }
unique rampart
#

OK, yes, you redirect the customer to session.url then when they are done in the portal they can "go back to Xyz, Inc" which redirects them to your page, via the return_url you specify

errant marlin
#

ok great that makes sense

#

but currently my session url is localhost:3000/customer-portal

#

and I'm not sure why

unique rampart
#

That's the session url? That doesn't sound right

#

Can you share an example request/session ID?

errant marlin
#

actually it's not my bad lol

#

it's returnign the url of the API route

# 

export default async function handler(req, res) {
  if (req.method === 'POST') {
    try {
      const session = await stripe.billingPortal.sessions.create({
        customer: 'cus_O3xou2R4Cc2QXR',
        return_url: 'http://localhost:3000',
      });

      res.setHeader('Access-Control-Allow-Origin', '*');
      res.status(200).json({ session: session });
    } catch (err) {
      console.error(err);
      res.status(err.statusCode || 500).json(err.message);
    }
  } else {
    res.status(405).end('Method Not Allowed');
  }
}
#

I must be doing something wrong in the return

#

getting the right info back in the network tab

unique rampart
#

Ok yea that looks right -- the https://billing.stripe.com/p/... url is the one you redirect to

errant marlin
#

Got it sorted

#

I was missing .then((session) => session.json());

#

Thank you!

unique rampart
#

ah excellent! NP!