I am using @stripe/stripe-react-native and already passed the stripe provider to my app.js
with the public-key and have no problem so far.
In my component, I am using CardField
, and I set the cardDetails
using useState
.
I want to obtain a paymentMethodId
with this:
const {error, paymentMethod} = await stripe.createPaymentMethod({
paymentMethodType: 'Card',
paymentMethodData: {
cardDetails,
billingDetails: {
name: checkout.payment.fullName,
},
});
if (error) {
console.log(error);
return;
}
But cannot obtain it as the log says:
LOG {"code": "Failed",
"declineCode": null,
"localizedMessage": "Card details not complete",
"message": "Card details not complete",
"stripeErrorCode": null,
"type": null}
cardDetails
is equal to:
LOG {"brand": "Visa",
"complete": true,
"expiryMonth": 5,
"expiryYear": 25,
"last4": "4242",
"validCVC": "Valid",
"validExpiryDate": "Valid",
"validNumber": "Valid"}
I tried with several ways to write the params, but I have seen that createPaymentMethod
is waiting for this:
export declare type CardParams = {
paymentMethodType: 'Card';
paymentMethodData?: {
token?: string;
billingDetails?: BillingDetails;
};
} | {
paymentMethodType: 'Card';
paymentMethodData: {
paymentMethodId: string;
cvc?: string;
billingDetails?: BillingDetails;
};
};
Which does not include the card details.
I am quite confused that the error tells me to give the card details knowing that it is not await
ed by createPaymentMethod
.
I have also read that I do not need to give card details, but I cannot understand how would I obtain a paymentMethodId
if I did not. I tried anyway and the result is the same error message.
The SDK should collect the card details from the CardField
automatically, so you aren't expected to pass those explicitly. Instead, you pass only additional billingDetails
(such as address). See the example using CardField
here:
const billingDetails: BillingDetails = {
email: 'email@stripe.com',
phone: '+48888000888',
address: {
city: 'Houston',
country: 'US',
line1: '1459 Circle Drive',
line2: 'Texas',
postalCode: '77063',
},
}; // mocked data for tests
// 2. Create payment method
const { paymentMethod, error } = await createPaymentMethod({
paymentMethodType: 'Card',
paymentMethodData: { billingDetails },
});