#roycwilliams
stuck wharf
rotund nimbus
Hi 👋 can you elaborate a bit more regarding what is working in test mode that is not working as expected in live mode?
coarse moat
Hey sorry. So my checkout button during test mode redirects me to the test checkout page but when in live mode it just refresh or doesn't do any actions at all
rotund nimbus
Gotcha, is this button associated with a Payment Link, or is it a button that you're using to redirect a user to a Checkout Session? (or possibly a different integration path)
Are you seeing any errors thrown to the browser console by your frontend code, or are you seeing any errors being thrown by your server-side code?
coarse moat
It sends to the checkout session. I'm using the pre-built checkout page for this to work.
not seeing any errors once I inspect it or on the server side code
rotund nimbus
Is the page where this behavior is occurring publicly accessible?
coarse moat
My repository is private but i can add you on to it
I also wanted to know does it have to have the form attribute around the button in order for it to work? That's the only time it works for me is when I set it's action and method along with some fields to fill-in
I'm using firebase to host my site
rotund nimbus
Sorry, I'm not familiar with the specifics of developing inside of Firebase, so I'm not exactly sure of the verbiage to use. If you have a button that doesn't have any sort of action associated with it being clicked, then that is a possible cause of the behavior that you're describing.
You mentioned that this worked in test mode, how is the button set up in your test mode project?
coarse moat
going to send you the screen shots of my code right now
the site is kingdomsdomain.web.app
rotund nimbus
I think that looks plumbed up correctly, is that the code that works as expected?
coarse moat
Yes. Another way I've tried it is by following this https://youtu.be/1r-F3FIONl8
rotund nimbus
I'm not seeing the click listener on the button on the live version of your page, and the action seems to redirect to a page that doesn't do anything.
coarse moat
should be the second picture. I have put addEventListener to click when prompted
I just played with my redirects in firebase json now i am getting a 404 so that's progress
orchid mango
👋 stepping in as toby needs to step away
Can you added a event.preventDefault (https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) in your click handler?
coarse moat
So instead of the addeventlistener use that?
orchid mango
Nope it would be the first line in your event listener
You want ```checkoutButton.addEventListener('click', (event) => {
event.preventDefault(event)
...
so like this?
coarse moat
checkoutButton.addEventListener('click', (event) => {
event.preventDefault(event)
orchid mango
That is what happens now on button click?
coarse moat
it directs me to the 404.html page
but it has my website name with the /createStripeCheckout? behind it
Don't know why there's a "?" though
orchid mango
That is firebase setting that right? That is something to do with firebase not liking your code?
I'm not intimately familiar with firebase
Something else I would recommend is doing a server-side redirect to the Checkout Session instead of a client-side redirect with stripe.redirectToCheckout
Ahh looking at your code it looks like you have both an HTML form action going on and a click handler
That is likely the issue
You shouldn't be using both methods
Okay let's simplify here.
Can you comment out your click handler completely from your JS code?
Then, in your server-side code instead of returning the Session ID, let's just do a server-side redirect
So it would look something like res.redirect(303, session.url);
If firebase supports that
Might need to look up how to do a server-side redirect with firebase
coarse moat
Can you comment out your click handler completely from your JS code?
So i would just comment out the event listener?
orchid mango
Yeah you shouldn't need that at all since you are already doing a form action from your HTML to hit that endpoint
coarse moat
but is there a way to use the button without the form attribute?
orchid mango
Yes then you would use a click handler
You should only be using one or the other though
You also are missing method="POST" from your HTML form action
That may be why you saw the 404 before
Because it is trying to GET that page
Instead of POST to it for the redirect
coarse moat
would a action need to be set as well?
coarse moat
ok so I am trying to sell multiple products so I am not trying to using the form to directly go to the checkout because the items wouldn't pop up due it being directly in my server-side code
Is what i am saying is valid or would it work regardless?
orchid mango
I'm not sure I understand
You don't want to redirect to Stripe Checkout upon the clicking of that checkout button?
coarse moat
No i do but what I am saying is there a way to not use the form attribute?
Just directly add a the click button to redirect to the checkout
ignore the a
orchid mango
Sure
You can use JS with a click handler instead
And with stripe.redirectToCheckout
Like you are doing above.
Imo that is more complicated
But overall the most important thing is you shouldn't be doing both
orchid mango
Can you show me your updated code?
Looks like there is a 404 on page load from something in your index.js file
Not sure if that is affecting things here
coarse moat
orchid mango
K that looks fine as far as I can tell, however it seems to me you aren't even reaching this portion of your code potentially due to the 404 that is happening on page load for https://kingdomsdomain.web.app/index.js
Is this code in your index.js file?
Or what is in there?
coarse moat
orchid mango
I'd also recommend adding some logs to your code to easily see which points you are getting to in Console
What is at line 17 in index.js
There also appears to be an issue with using an import in checkout.js
coarse moat
a comment "// first firebase cloud function"
orchid mango
Not sure what you are trying to import there but that would be another thing to check on
Hmm line 17 is commented out code?
Console clearly shows an error originating from there:
What are you importing in line 2 of checkout.js?
I'd recommend deleting that immediately
Looks like it has your firebase API key
This is a public server so anyone can see that
coarse moat
ooo thank you !
orchid mango
I thought with the firebase extension you don't actually create the Checkout Session yourself. You use the extension to do that?
Are you mixing the extension with your own code?
coarse moat
No not at all but i thought it was needed when creating the firebase account. It asked me for a restricted key and webhook
orchid mango
With the extension don't you just call cloud functions that are already set up for you?
Sorry, I'm not intimately familiar with firebase. But I thought that the extension did all of this for you... as opposed to actually creating the Checkout Session using stripe.checkout.sessions.create from the backend
What documentation are you following?
orchid mango
Yeah okay that video isn't using the Stripe Firebase extension though, right? Like it never uses the @stripe/firestore-stripe-payments SDK
It just creates its own firebase functions
bitter abyss
Hello! I'm taking over and catching up...
coarse moat
ok no problem
bitter abyss
Okay, so it sounds like you're trying to remove the Stripe Firebase functions. How is that going?
coarse moat
It's done but I don't think that'll fix my original issue
i dont think the extension is stopping the function from working
bitter abyss
What's the main thing blocking you at this point?
coarse moat
At this point, I'm trying to figure out why my checkout button isn't redirecting me to the stripe session.
The initial problem was that i had the server side code and the form attribute directing to the same site
when the form attribute surrounds the actual button it redirects me but gives me a 404 but I don't want to use the form attribute in order for it to work
I'm using the pre-built checkout btw
bitter abyss
Looking at some of the code you shared above it looks like you're using redirectToCheckout in Stripe.js, which is deprecated and not recommended: https://stripe.com/docs/js/deprecated/redirect_to_checkout
Really what you need to do is 1) set up a URL which, when visited, will create a Checkout Session and redirect the requester to that Checkout Session's url and 2) set up a link to that URL on your site.
coarse moat
may i see an example if any?
bitter abyss
We have a quickstart here: https://stripe.com/docs/checkout/quickstart
It doesn't cover Firebase though.
coarse moat
Yes i've tried the quick start as well while using netlify and firebase but it's the same result for both
bitter abyss
Okay, let's get into the specifics of what's blocking you. You said there's a button you click on that should take you to Checkout but it doesn't, correct? Are you seeing errors when you click on that button in the web browser's console or the server logs?
coarse moat
web browser's console
bitter abyss
What error(s) do you see there?
coarse moat
bitter abyss
Okay, so both of those errors seem relevant, but the second one is likely the main problem. It looks like you're trying to use import outside of a module. Can you resolve that error?
coarse moat
I don't really know how to would i remove it and put into the server?
bitter abyss
Not sure what you mean... how much experience do you have with client-side JavaScript?