#Desh
vague lantern
surreal meadow
Is that happening in all cases? or just one?
surreal meadow
Screenshots of code are hard to work with. Can you copy/paste that code along with a request ID?
Here's how you can find a request ID: https://support.stripe.com/questions/finding-the-id-for-an-api-request
surreal meadow
Where is the error occuring?
inner gust
here:
const { setupIntent, error } = await confirmSetupIntent(ClientSecret, {
type: "Card",
paymentMethodData: {
billingDetails,
},
});
surreal meadow
No, where is that error coming up? Console? Browser console? 3rd party app?
inner gust
console from my react native project
surreal meadow
Okay, and if you do a console.log() of billingDetails, what comes up?
inner gust
ClientSecret: seti_1LzoTIJi60f9RWrmlKYn00Vw_secret_MjH1yIJEv3YgocSINeJ1Rw6MlSjso9z
billingDetails: Object {
"email": "nidianhs@gmail.com",
}
error: Object {
"code": "Failed",
"declineCode": null,
"localizedMessage": "Card details not complete",
"message": "Card details not complete",
"stripeErrorCode": null,
"type": null,
}
surreal meadow
What all are you entering for card details when you submit the form from your browser?
surreal meadow
Where are you entering the email?
surreal meadow
I'm not sure what those are. Can you be more specific?
inner gust
I get the email from the user's login data
surreal meadow
Let me dig a bit on this and circle back
inner gust
ok
tight dragon
👋 can you add the postal code back in and test with postal code?
Also what version of the React Native SDK are you on?
inner gust
a moment
"@stripe/stripe-react-native": "0.6.1",
"expo": "~45.0.0",
"react-native": "0.68.2",
inner gust
👋 can you add the postal code back in and test with postal code?
let me try
same error
tight dragon
K, comment out billingDetails next and re-test
inner gust
console
const { setupIntent, error } = await confirmSetupIntent(ClientSecret, {
type: "Card",
paymentMethodData: {
// billingDetails,
},
});
inner gust
yes
<StripeProvider
publishableKey={Configuration.stripe.publishableKey}
merchantIdentifier={Configuration.stripe.merchantIdentifier}
>
<View style={styles.contInput}>
<CardField
style={{
alignItems: "center",
height: AppStyles.size.width * 0.1,
width: AppStyles.size.width,
marginHorizontal: AppStyles.size.width * 0.05,
}}
cardStyle={{
backgroundColor: "#FFFFFF",
textColor: "#000000",
}}
postalCodeEnabled={true}
onCardChange={(details) => {
console.log("CardDetails: ", details);
}}
/>
<View style={{ marginVertical: AppStyles.size.height * 0.03 }}>
<Boton textBoton="Add new card" onSubmit={() => handlePayPress()} />
</View>
</View>
tight dragon
Let's try to just create a PaymentMethod
Instead of doing confirmSetupIntent do let test = await createPaymentMethod({ type: 'Card', }) console.log("test: ", test);
tight dragon
Yeah from stripe-react-native
inner gust
okas
CardDetails: Object {
"brand": "Visa",
"complete": true,
"expiryMonth": 12,
"expiryYear": 23,
"last4": "4242",
"postalCode": "8150215",
"validCVC": "Valid",
"validExpiryDate": "Valid",
"validNumber": "Valid",
}
test: Object {
"error": Object {
"code": "Failed",
"declineCode": null,
"localizedMessage": "Card details not complete",
"message": "Card details not complete",
"stripeErrorCode": null,
"type": null,
},
}
tight dragon
Interesting
Okay so likely has to do with something going on with your Card Field
Like it is unmounting or something on handlePayPress
I noticed you are using a <Boton /> Component
Is that custom?
inner gust
i can send you a screenshot?
inner gust
Is that custom?
yes
inner gust
don´t
tight dragon
Have you logged out your publishable key?
inner gust
yes
tight dragon
Are you using a FlatList?
tight dragon
Okay, let's try this: take out StripeProvider and let's try initStripe() instead. So something like: useEffect(() => { async function initialize() { await initStripe({ publishableKey: PUBLIC_KEY, }); } initialize().catch(console.error); }, []);
inner gust
ok
tight dragon
The other thing to look into is how you are rendering this Component in general
Oh wait is your handlePayPress outside of your StripeCard component that is rendering CardForm?
tight dragon
Not positive but that might be the issue, I'd move the function inside that component.
tight dragon
Okay that's helpful. So you are wrapping in scrollview and stuff. Looks like there has been some reports of issues like this with Flatlists: https://github.com/stripe/stripe-react-native/issues/625. If moving the handlePayPres inside your StripeCard Component doesn't do it then I would remove all the wrapping Components temporarily and pare down to just StripeCard
tight dragon
Remove <ImageBackground />
tight dragon
Same error?
inner gust
yes
tight dragon
You are using initStripe right now?
inner gust
yep
useEffect(() => {
getInitSaveCard().then(async (resp) => {
setClientSecret(resp.client_secret);
});
async function initialize() {
await initStripe({
publishableKey: Configuration.stripe.publishableKey,
});
}
initialize().catch(console.error);
}, []);
I'll jump off the roof! hehehe
😆
tight dragon
Jeez yeah I'm a bit stumped 😦
inner gust
maybe changing the stripe version?
tight dragon
I mean yeah if you are willing to bump to a newer version that would definitely be a good thing to try.
tight dragon
Yeah that works. Expo 46 is on a newer Stripe React Native SDK
inner gust
my english is bad sorry hehe
right now i have this version
"@stripe/stripe-react-native": "0.6.1",
Do you recommend an older version?
tight dragon
No not older
inner gust
mmmm....
tight dragon
👍
inner gust
thanks