How to obtain paymentMethodId using createPaymentMethod from stripe with React Native?

Question

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 awaited 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.

Answer 1

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 protected]',
  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 },
});