1

I have an issue upgrading firebase stripe extention sdk version 8 code that they have at the official source code to version 9.

https://github.com/stripe/stripe-firebase-extensions/blob/master/firestore-stripe-payments/POSTINSTALL.md

Even though I managed to upgrade the one time purchase and the subscription purchase i just can't figure out how to upgrade the rediraction to the portal code..

The version 8 code that they provide is this:

`const functionRef = firebase
.app()
.functions('${param:LOCATION}')
.httpsCallable('${function:createPortalLink.name}');
const { data } = await functionRef({
returnUrl: window.location.origin,
locale: "auto", // Optional, defaults to "auto"
configuration: "bpc_1JSEAKHYgolSBA358VNoc2Hs", // Optional ID of a portal configuration:                https://stripe.com/docs/api/customer_portal/configuration
});
window.location.assign(data.url);`

With some digging i came up with this code but it doesn't work

`import { getFunctions, httpsCallable } from "firebase/functions";
constructor(private initialize: InitializeService, private afApp: FirebaseApp) { }
functions = getFunctions(this.afApp, "europe-west1");


async customerPortal() {
const functionRef = httpsCallable(this.functions, 'ext-firestore-stripe-subscriptions-      createPortalLink');
functionRef({
returnUrl: window.location.origin
}).then((result) => {
const data = result.data;
});`

The errors that i'm getting is either blocked by Cors or when i disable cors on my browser(not optimal by any means) is FirebaseError: permission-denied GET 403.

Error Cors

Error 403

i get these errors even when i place as Stripe API key with restricted access at firebase extention config the stripe secret or stripe public key

Any thoughts??

Thank you in advance :)

1 Answers1

2

Depending on which version of the extension you're using, the Firebase function may have a different name (in version 0.2.2 Stripe renamed it to ext-firestore-stripe-payments).

If you are using 0.2.2 or newer, then the Firebase function name in the example you shared is wrong. It should be ext-firestore-stripe-payments-createPortalLink. Using v9 of the Firebase client, something like this should work:

import { getFunctions, httpsCallable } from 'firebase/functions'

const functions = getFunctions(firebase, 'europe-west2')

const billingPortalSession = httpsCallable(functions, 'ext-firestore-stripe-payments-createPortalLink')

const { data } = await billingPortalSession({
  returnUrl: window.location.origin
})

window.location.assign(data.url)

Also, be sure that the regionOrCustomDomain argument passed to getFunctions is the region your Firebase instance is in.

Jonathan Steele
  • 1,502
  • 4
  • 7
  • First of all thanks for the reply indeed i don't get the cors and 403 errors anymore. But at the part window.location.assign(data.url) the compiler give me this error: Property 'url' does not exist on type 'unknown'.. – Thomas Papadimitriou Nov 29 '22 at 17:38
  • Can you log the return value of the `billingPortalSession` function? – Jonathan Steele Nov 29 '22 at 20:41