#sparkling_armadillo_08414
hollow jayBOT
Hello! We'll be with you shortly. 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.
- sparkling_armadillo_08414, 51 minutes ago, 4 messages
uneven marlin
hey there, feel free to edit your message, or clarify any question you might have here in thread
rigid isle
I'm using stripe quickstart for node tutorial with link: https://stripe.com/docs/payments/quickstart?lang=node
In the checkout.js file there are 5 functions.
initialize function helps me initialize client secret with stripe elements. When I console.log(clientSecret) in line 33 I get clientSecret printed out.
However, when I'm in the submit function and for example try to console.log(clientSecret) in line 41. I get error saying clientSecret is not defined.
These two functions are in same file I don't understand how it doesn't find clientSecret from above. Am I calling it wrong?
My front end is HTML and im using Node express
uneven marlin
Can you share the actual snippet you're running?
Ok, looking at https://stripe.com/docs/payments/quickstart?lang=node&client=html i presume this snippet:
// Fetches a payment intent and captures the client secret
async function initialize() {
const response = await fetch("/create-payment-intent", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ items }),
});
const { clientSecret } = await response.json();
const appearance = {
theme: 'stripe',
};
elements = stripe.elements({ appearance, clientSecret });
const paymentElementOptions = {
layout: "tabs",
};
const paymentElement = elements.create("payment", paymentElementOptions);
paymentElement.mount("#payment-element");
}
async function handleSubmit(e) {
e.preventDefault();
setLoading(true);
const { error } = await stripe.confirmPayment({
elements,
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "http://localhost:4242/checkout.html",
receipt_email: emailAddress,
},
});
// This point will only be reached if there is an immediate error when
// confirming the payment. Otherwise, your customer will be redirected to
// your `return_url`. For some payment methods like iDEAL, your customer will
// be redirected to an intermediate site first to authorize the payment, then
// redirected to the `return_url`.
if (error.type === "card_error" || error.type === "validation_error") {
showMessage(error.message);
} else {
showMessage("An unexpected error occurred.");
}
setLoading(false);
}
clientSecret is only defined locally in initialize
You cannot refer to it in handleSubmit unless you make it available there somehow
Why are you trying to log this?
hollow jayBOT
rigid isle
Yes that is the snippet
I'm trying to use clientSecret in submit function because I want to use confirmCardPayment method
The tutorial there has confirmPayment method being used. However that method requires me to have a return_URL and I don't want my user to be redirected. Which eleminates me from using confirmPayment.
this is how I'm using confirmCardPayment instead of confirmPayment in the submit function
const { error } = stripe.confirmCardPayment(clientSecret,{
payment_method: {
card: cardElement,
billing_details: {
name: 'Jenny Rosen',
},
},
})
rigid isle
ok hanzo
paper wharf
so just to make sure I understand correctly, you're trying to use confirmParams in to pass billing details and that requires return_url
https://stripe.com/docs/js/payment_intents/confirm_payment#confirm_payment_intent-options-confirmParams
You don't want that hence you want to use confirmCardPayment instead?
rigid isle
Yes exactly
paper wharf
You can control that redirect behavior though
You can set redirect to if_required which shouldn't trigger a redirect for card payment when using confirmPayment
rigid isle
I did see if that would work but it did no checks on the payment.
const { error } = await stripe.confirmPayment({
elements,
//no checks with this added---> redirect: "if_required",
confirmParams: {
// Make sure to change this to your payment completion page
return_url: "http://localhost:3000"
},
});
even when I left the payment card details blank and submit it would just confirm
paper wharf
That's odd. Validation shouldn't be affected with redirect set to if_required
rigid isle
do i have to add something to confirmParams?
paper wharf
even when I left the payment card details blank and submit it would just confirm
Can you share an example PaymentIntent where you saw this happen?
rigid isle
ok
you are right, it actually wasn't affecting validation. I added some javascript lines after confirmPayment which was not letting me see error message and moving on to different task.
as of now I can submit it without card details and get an error message saying you didn't fill it out
when i submit with card details, it just stays without doing anythin. Is that because i have redirect if required?
paper wharf
yup, you can check the response from confirmPayment to see if that worked.
If so, you can hide the element
rigid isle
is this a bad way to check or its ok?
its an uncaught error but i want to make sure. 😆
paper wharf
check what exactly? Sorry 😅 I'm confused
rigid isle
to check payment status
when i enter 4242 4242 4242 4242, expiration: 4/24, security code: 424 it doesn't proceed to setLoading(false) it stops at line 81
line 80 actually my bad
paper wharf
You need to check if error has any keys before you try and use them in if condition
If confirmPayment was successful then error won't really exist
rigid isle
errors are not initialized anywhere else. I'm guessing "card_error" or "validation_error" are built into stripe. Also error.type is no where else to be found.
so I looked at the document you sent to get response from confirmPayment and changed up the code a little. Now im getting 400 bad request error
paper wharf
Try looking up the network log to see if the server returned any specific errors
rigid isle
its something to do with confirm
paper wharf
Check response tab
You can also check your Test mode API logs
https://dashboard.stripe.com/test/logs
rigid isle
Sorry I'm pretty new to all this. You're teaching me a lot though. Thank you for everything
so im double confirming it. Is that because of what you think?
paper wharf
yup, since you've clicked submit many times -- the payment intent has already been confirmed before.
You can refresh the page and try again
rigid isle
makes sense
I submit the info, the pay now button does not go away. Which allows me to press it as many times as I want.
From my understanding setLoading() function makes that hidden. Do you know wht that function is not being ran?
is it because of .then() i added after confirmPayment?
paper wharf
as a developer you need to debug that on your own 🙂
We can help unblock you with Stripe related stuff.
This seems like something specific with your code. Try tweaking your code and see if it breaks/behaves differently.
rigid isle
I will get it done, I can now use confirmPayment which is great. Thank you for all the info hanzo
paper wharf
NP! 🙂 Happy to help