hasan

[onyx kettle]

Hi
This looks like a cors error in your integration.

Can you share some of your code and how are you dowing the redirection? server/front side ?

[celest cairn]

yes sure

server side:
//ConfigurationCreateOptions
var options3 = new SessionCreateOptions
{
Customer = "cus_NOjoutzkLPVc4U",
ReturnUrl = "https://example.com/account",
};
var service = new SessionService();
var session = service.Create(options3);

        return Redirect(session.Url);

front: api service: getPortalURL(){
return this.http.get(this.APIBasePath + '/CustomerPortal' , {responseType: 'text'})
}

front: component: ngOnInit(): void {this.sharedService.getPortalURL().subscribe((res:any)=>{
this.url = res;
})}
customerPortal(){
window.open(this.url, "_blank")
}

[onyx kettle]

I'm quiet confused here, are you using Stripe Checkout Session or customer portal ? when exactly you are having the error?

can you also share a complete screenhot (url, console error log...)

[celest cairn]

I'm using both, but the error is occurring when calling the customer portal url. This is the full server side code after seeing the stripe documentation on customer portal:

this is a ss of the console

[onyx kettle]

Please don't share your Stripe secret key, in public channels.

[onyx kettle]

What part of code is triggering this/the redirection?

[celest cairn]

you're right, my bad. This is a test account tho, no real payment info or real customers on it. This part here on the front is triggering the error : ngOnInit(): void {this.sharedService.getPortalURL().subscribe((res:any)=>{
this.url = res;
})
} I'm calling the api that returns the url here

[onyx kettle]

and then what are you doing with this.url?

[celest cairn]

I have a button on my website that calls the following function: customerPortal(){
window.open(this.url, "_blank")
}

[onyx kettle]

let me do a quick test...

You should implement the redirection like this actually:
https://stripe.com/docs/customer-management/integrate-customer-portal#redirect

[celest cairn]

I actually have this in my code, last few lines, but when implemented alone it was redirecting me to the portal where the user can only view his/her subscription and invoice history. Whereas what I'm looking for is something like in the demo by stripe: https://billing.stripe.com/p/session/test_YWNjdF8xR3kxaUZBbHF2S3B4SkN1LF9OUXZubXZtRkpkRXJiTW95cVdjMzBsZ3BIc09PWGxQ0100zcmo7ZZe where the user can also ugrade/downgrade/cancel... plans products and subscriptions

which is why I implemented the other pieces of code, and it is also when the cors problem strated persisting

[onyx kettle]

but when implemented alone it was redirecting me to the portal where the user can only view his/her subscription and invoice history
This is something related just to portal configuration and has no link with redirection. At the end both are urls.

Your button

customerPortal(){
    window.open(this.url, "_blank")
  }

should be calling your backend, creating a customer portal and do the redirection in server-side not from your frontend.

[celest cairn]

so does saving the url n a variable on the front and calling the variable have something to do with the cors problem?

and how do you suggest I should go about to have a portal with actions like in the demo?

[onyx kettle]

You shouldn't do the redirection from your frontend. You need to do it in your backend.

[onyx kettle]

The same endpoint that is actually creating CustomerPortal with the actions you need (using portal_configruation) but in place of sending back the url to your frontned and store it then do the redirection, you need to do the redirection directly from your backend.

something like this :

[HttpPost("create-customer-portal-session")]
public async Task<IActionResult> CustomerPortal()
{
  // .. your current code
  var service = new SessionService();
  var session = service.Create(options);

// do the redirection
  return Redirect(session.Url);
}

[celest cairn]

okay will try that, thank you for time and patience 🙏