Как получить payMethodId с помощью createPaymentMethod из полосы с помощью React Native?

Я использую @stripe/stripe-react-native и уже передал поставщика полос своему app.js с открытым ключом, и пока у меня нет проблем.

В своем компоненте я использую CardField и устанавливаю cardDetails с помощью useState.

Я хочу получить paymentMethodId следующим образом:

const {error, paymentMethod} = await stripe.createPaymentMethod({
  paymentMethodType: 'Card',
  paymentMethodData: {
     cardDetails,
     billingDetails: {
     name: checkout.payment.fullName,
  },

});
if (error) {
  console.info(error);
  return;
}

Но не могу получить его, как написано в журнале:

LOG  {"code": "Failed",
      "declineCode": null,
      "localizedMessage": "Card details not complete",
      "message": "Card details not complete",
      "stripeErrorCode": null,
      "type": null}

cardDetails равен:

LOG  {"brand": "Visa",
      "complete": true,
      "expiryMonth": 5,
      "expiryYear": 25,
      "last4": "4242",
      "validCVC": "Valid",
      "validExpiryDate": "Valid",
      "validNumber": "Valid"}

Я пробовал несколькими способами записать параметры, но увидел, что createPaymentMethod ждет этого:

export declare type CardParams = {
    paymentMethodType: 'Card';
    paymentMethodData?: {
        token?: string;
        billingDetails?: BillingDetails;
    };
} | {
    paymentMethodType: 'Card';
    paymentMethodData: {
        paymentMethodId: string;
        cvc?: string;
        billingDetails?: BillingDetails;
    };
};

Который не включает данные карты.

Меня очень смущает то, что ошибка просит меня предоставить данные карты, зная, что она не await подтверждена createPaymentMethod.

Я также прочитал, что мне не нужно предоставлять данные карты, но я не могу понять, как бы я получил paymentMethodId, если бы я этого не сделал. Я все равно попробовал, и результат - то же сообщение об ошибке.

Умерло ли Create-React-App?
Умерло ли Create-React-App?
В этом документальном фильме React.dev мы исследуем, мертв ли Create React App (CRA) и какое будущее ждет этот популярный фреймворк React.
Освоение React Native: Пошаговое руководство для начинающих
Освоение React Native: Пошаговое руководство для начинающих
React Native - это популярный фреймворк с открытым исходным кодом, используемый для разработки мобильных приложений. Он был разработан компанией...
В чем разница между react native и react ?
В чем разница между react native и react ?
React и React Native - два популярных фреймворка для создания пользовательских интерфейсов, но они предназначены для разных платформ. React - это...
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
От React к React Native: Руководство для начинающих по разработке мобильных приложений с использованием React
Если вы уже умеете работать с React, создание мобильных приложений для iOS и Android - это новое приключение, в котором вы сможете применить свои...
Хуки React: что это такое и как их использовать
Хуки React: что это такое и как их использовать
Хуки React - это мощная функция библиотеки React, которая позволяет разработчикам использовать состояние и другие возможности React без написания...
1
0
58
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

SDK должен автоматически собирать данные карты из CardField, поэтому от вас не требуется их явной передачи. Вместо этого вы передаете только дополнительные billingDetails (например, адрес). См. пример использования CardFieldздесь:

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

Ранее я пытался объявить свойства billingDetails непосредственно в параметрах, но это не сработало. Но это сработало, как только я инициализировал BillingDetails в константе, прежде чем передавать их в параметрах, как вы предложили. Возможно, я сделал это неправильно, когда попробовал сначала. В любом случае, благодарю Вас!

Julien 07.06.2024 23:48

Другие вопросы по теме