#Ender1776 [syndicate]
vernal rampart
gentle tusk
was working today for a while, and made some changes to the page not related to the cardfield
modern dawn
Hi there, can you share with me the code your wrote, as well as the PaymentIntent ID.
gentle tusk
pi_3MOZVlEw8dry0on10IYGA4b1_secret_gS7itKfNG0MnLdj5zpWCD6kO8
modern dawn
The error message says card details not completed, did your customer complete the card details (card number, cvc, expiration date and postal code) before hitting the submit button?
gentle tusk
yes, the submit button is disabled until the cardfield is "complete
validateForm = () => {
const { isFormValid, cardDetails } = this.state;
let isFormValidTemp = true;
isFormValidTemp = isFormValidTemp && cardDetails?.complete;
if (isFormValidTemp !== isFormValid) {
this.setState({ isFormValid: isFormValidTemp });
}
};
modern dawn
How do you determine if the car details is complete?
gentle tusk
relevent code: onCardChange -> setCardDetails -> validate form, checking the cardDetails obj returned from the CardField event
<CardField
postalCodeEnabled
placeholders={{
number: '4242 4242 4242 4242'
}}
cardStyle={{
backgroundColor: '#FFFFFF',
textColor: '#000000'
}}
style={{
width: '100%',
height: 45
}}
onCardChange={(cardDetails) => {
this.setCardDetails(cardDetails);
}}
onFocus={(focusedField) => {
console.log('focusField', focusedField);
}}
/>
setCardDetails = (cardDetails) => {
this.setState({ cardDetails }, this.validateForm);
if (cardDetails?.complete) {
this.validateForm();
}
};
validateForm = () => {
const { isFormValid, cardDetails } = this.state;
let isFormValidTemp = true;
isFormValidTemp = isFormValidTemp && cardDetails?.complete;
if (isFormValidTemp !== isFormValid) {
this.setState({ isFormValid: isFormValidTemp });
}
};
i don't know man, i deleted the app and reran it and it now it works. it seems to get hung up on repeated attempts maybe, or there is an issue with metro and code changes maybe
had tried reloading a few times been on this issue for an hour or two
modern dawn
You shouldn't manually call validateForm again in setCardDetails(), since you've already put it in the setState 's callback