#rolexx-react-paymentelement
signal inlet
@narrow badger if you've never done this before you really should use Checkout instead, way easier to integrate
narrow badger
Yeah i've seen it but I feel i'm close to the end, i just have to know where to do my function once the payment is accepted.
Otherwise everthing else works perfectly Server side and Client side^^
@signal inlet
signal inlet
So what are you seeing? What's blocking you exactly as the developer? What happens after you call stripe.confirmPayment() exactly? Doesn't it redirect to another view/page?
narrow badger
Yeah it does. No problem on it. But as I said i have a handleRegister() function that is supposed to register the user / post data into my db once the payment successful. I don't know where to includes this function to do it in that way. I have put comments where i have put this function but either it doesn't post data or either it post it successfully but it does on form submit (so if payment isn't confirm, it does post data anyway).
Should i maybe do it that way ?
const {error} = await stripe.confirmPayment({ elements, confirmParams: { // Make sure to change this to your payment completion page return_url: return_url, }, }, handleRegister());
uncut turtle
👋 @narrow badger I'm hopping in since @signal inlet had to head out - give me a few minutes to catch up!
No, what you just sent over won't work because if confirmation is successful, we'll redirect you to the return_url before the Promise actually resolves to handleRegister() will only be hit if confirmation fails (You can read more about this under the "Returns" section here https://stripe.com/docs/js/payment_intents/confirm_payment). You should change your integration so that you deal with any post confirmation logic from the return URL page
narrow badger
And like this ? Following the link you have sent to me
stripe .confirmPayment({ elements, confirmParams: { return_url: return_url, }, }) .then(function(result){ if(result.error){ setMessage(error.message); } else { handleRegister() } })
uncut turtle
No, that won't work - as I said earlier, if confirmation is successful then you'll be redirected before the promise ever resolves.
narrow badger
OK, and can I just remove the return url of the confirmPayment and make it by myself ?
I saw that we can set return_url : if_required, something like this
uncut turtle
You can disable redirecting for payment method types that don't need it, but it will make your life harder down the line if you want to accept more than just cards
narrow badger
If I just wand to accept cards/GPay/ApplePay then it would be ok right ?
uncut turtle
If you want to get something working right now and just want to accept Card/Gpay/Apple Pay then yes, I believe it should work
narrow badger
Ok the best solution would be to use Stripe Checkout ? In any case thank you for your time, very helpful
uncut turtle
The simplest solution that still requires some code would be Checkout 👍
narrow badger
` const {error} = await stripe.confirmPayment({
elements,
confirmParams: {
redirect: "if_required",
},
});
if (error) {
setIsLoading(false)
setMessage(error.message);
} else {
handleRegister().then(window.location.replace(return_url))
}`
something like this ?
uncut turtle
That would work, but is your goal to still do the redirect afterwards? Why can't you just have whatever is happening in handleRegister to take place AFTER the redirect?
narrow badger
Because when I redirect i loose all my react state. Like, in return url we only can put an url right ? It would be perfect for me if i could redirect to a react component by passing all my data to then register the user
There may be a simple way to handle this but I haven't found it lol
uncut turtle
What state are you hoping to retain? You could keep it somewhere like local storage to retain it after the redirect