I have a function that is supposed to submit card details to Stripe.
The stripe.confirmCardPayment
is inside handleSubmit
and while debugging I realized that my form details clears whenever a function is called ( tokenize()
or confirmCardPayment()
)
How can I prevent that ?
The handleSubmit function:
//Submit payment to Stripe and handle error
const handleSubmit = async(e) => {
e.preventDefault();
console.log('CheckoutHandleSubmit');
//verify instance and token is there
if(!stripe || !elements || !token || !data){
console.log('return !')
return
}
//Get CardElement and attach to DOM
const cardElement = elements.getElement(CardElement);
cardElement.mount('#card-element');
debugger
//console.log('creating payment intent');
//console.log('myData:', data);
//console.log('beforeTokenizing:');
//Tokenize card details and handle errors
try{
console.log('HEYY:', stripe)
const payload = await stripe.confirmCardPayment(
data.info.clientSecret,
{
payment_method: {
card: cardElement,
//billing_details: { name: formData.lastnameInput },
},
}
)
//console.log('payload:', payload)
}catch(err){
console.log('err:', err)
}
const tokenize = await swell.payment.tokenize({
card: {
onError: (err) => {
//inform the customer there was an error
if(err){
console.log('error:', err);
}
//setProcessing(false);
},
onSuccess: async() => {
//submit the form
}
}
})
};