#juchom_code
dapper crescentBOT
👋 Welcome to your new thread!
⏲️ We'll be here soon! Typically we respond in a few minutes, but sometimes we might take a bit longer if the server is busy or if you have a particularly tricky question.
⏱️ We close idle threads, which makes them read-only. Once a thread is closed it won't be reopened, but you can always start a new thread if you have another question.
🔗 This thread will always be available, even after it's closed. You can find it again using Discord's search, or you can save this link: https://discord.com/channels/841573134531821608/1234436973838729246
📝 Have more to share? Add more details, code, screenshots, videos, etc. below.
slate ingotBOT
Below are links to other discussions we've had with you in the past week in case you want to review that information. If your question is related to one of these previous discussions, please provide a comprehensive summary of the current state and what you need help with now. We help many users simultaneously, so a summary allows us to resolve your issue as soon as possible.
- juchom_best-practices, 3 days ago, 33 messages
final sparrow
👋 happy to help
the console.log lines you added are basically outside of the click event handler
trail marten
Hello
actually it's in, let me improve a bit the snippet for you
submitButton.addEventListener('click', async () => {
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url : return_url
}
})
console.log('error =>');
console.log(error);
});
And when I click on the submit button it looks like it is stuck
final sparrow
do you have a test environment version where I can replicate?
trail marten
actually no, it's on my machine
final sparrow
you can use ngrok or something similar
final sparrow
take your time
final sparrow
ngrok work with ports
regardless of the framework you're using
you launch your app and then you launch ngrok to redirect to that port
trail marten
my problem is that vite is serving js and css on another port
final sparrow
you only need to redirect your frontend
trail marten
so here is the url : https://0489-2a01-cb00-11-1600-c418-3ea2-2f14-605f.ngrok-free.app/Checkout/Payment/sub_1PAqFeJ6dDUA5fv0D0RLT6gJ
but js and css are blocked
final sparrow
the app is not found
are you sure ngrok is still on?
and pointing to the right port?
final sparrow
I can't use localhost 🤦
trail marten
oops
crap
it was my browser blocking it
this should work
I'm trying with this card : 4000002760003184
final sparrow
subscriptionService is not defined
are you using your secret key on the front end?
trail marten
subscriptionService is not defined
this is wokring on my machine
are you using your secret key on the front end?
No, I'm sending to the frontend the Publishable key and the pi secret
trail river
Hey! Taking over for my colleague. Let me catch up.
trail marten
Hello
trail river
Have you tried to download and run the quickstart first ?
https://docs.stripe.com/billing/quickstart
trail marten
no
trail river
Try to download it and run it first on your laptop and understand all the steps first then try it on your own integration
trail marten
I'm using stripe elements and stripe js
my issue is after calling confirmPayment, I don't have the console.log command in the debug console
submitButton.addEventListener('click', async () => {
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url : return_url
}
})
console.log('error =>');
console.log(error);
});
I'm trying with this card : 4000002760003184
If I first send the information with the card, I know it sending the information to stripe
but nothing happens
then if I hit F5 again, it displays the 3DS screen
trail river
hav e you tried to debug your js code ?
and see if your click event listener is beeing called?
trail marten
yes it is, I display the Payment Intent Status in the log
trail river
I don't the origine of that log line in the code you shared.
trail marten
submitButton.addEventListener('click', async () => {
console.log('Just befor confirmPayment');
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
return_url : return_url
}
})
You are right it's a bit earlier, I added a line before now
you will see it in the logs
trail river
I see this error:
subscriptionService is not defined
trail marten
weird you have this issue
trail river
I think you are facing issue with your own JS integration and not Stripe APIs
what I recommend you is to start a new fresh JS project that you test only Stripe APIs (nothing specific to your own integration)
in order to understand the features.
This github project is a good start
I invite you to clone it and run it in your laptop and follow the guide on it:
https://docs.stripe.com/billing/subscriptions/build-subscriptions?platform=web&ui=elements