Привет, сегодня я хочу поделиться процедурой интеграции платежей в приложение React Native через Stripe.

Постановка на учет

Во-первых, вам нужно создать свою учетную запись на панели инструментов Stripe.
Панель инструментов Stripe в тестовом режиме будет выглядеть так.

Монтаж

Для установки на стороне сервера вы можете обратиться к этой ссылке
Для установки на стороне, запустите эту команду в терминале

yarn add @stripe/stripe-react-native

А чтобы установить необходимые нативные зависимости, запустите эту команду в папке ios . Android не требует дополнительных действий.

pod install

Конфигурация

Теперь оберните тег <App/> в тег <StripeProvider> и передайте ему публикуемый ключ вашей учетной записи. Вы можете найти этот ключ на вкладке «Главная» на панели инструментов Stripe.

import { StripeProvider } from '@stripe/stripe-react-native';
function App() {
  return (
    <StripeProvider
      publishableKey="pk_test_TYooMQauvdEDq54NiTphI7jx"
      urlScheme="your-url-scheme" // required for 3D Secure and bank redirects
      merchantIdentifier="merchant.com.{{YOUR_APP_NAME}}" // required for Apple Pay
    >
      // Your app code here
    </StripeProvider>
  );
}

Карточный компонент

В Stripe есть несколько элементов на выбор. Я выбираю Элемент карты, это встроенный компонент пользовательского интерфейса для безопасного сбора данных карты.

import { CardField, useStripe } from '@stripe/stripe-react-native';
function PaymentScreen() {
  // ...
  return (
    <View>
      <CardField
        postalCodeEnabled={false}
        placeholder={{
          number: '4242 4242 4242 4242',
        }}
        onCardChange={(cardDetails) => {
          console.log('cardDetails', cardDetails);
        }}
      />
    </View>
  );
}

onCardChange обратный вызов возвращает неконфиденциальную информацию о карте. Вы можете использовать эту информацию, чтобы включить или отключить кнопку Оформить заказ или отобразить сообщение об ошибке.

Создать платежный отступ

После этого мы создаем платежное намерение для получения платежа от пользователя.
Но для создания платежного намерения нам нужен API, поскольку серверная часть сохраняется, а не клиентская. Пожалуйста, следуйте этим шагам, чтобы создать API платежных намерений.

Теперь мы получим секрет клиента из этого API.

function PaymentScreen() {
  const fetchPaymentIntentClientSecret = async () => {
    const response = await fetch(`${API_URL}/create-payment-intent`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        currency: 'usd',
      }),
    });
    const {clientSecret} = await response.json();
    return clientSecret;
  };
  const handlePayPress = async () => {
    if (!card) {
      return;
    }
    // Fetch the intent client secret from the backend.
    const clientSecret = await fetchPaymentIntentClientSecret();
  };
  return (
    <View>
      <CardField
        onCardChange={(cardDetails) => console.log('cardDetails', cardDetails)}
      />
      <Button onPress={handlePayPress} title="Pay" disabled={loading} />
    </View>
  );
}

Отправить платеж

Затем мы отправим секрет клиента и сведения о пользователе методу confirmPayment, доступ к которому можно получить с помощью хука useConfirmPayment.

const {confirmPayment, loading} = useConfirmPayment();
const handlePayPress = async () => {
    // Gather the customer's billing information (for example, email)
    const billingDetails: BillingDetails = {
      email: '[email protected]',
    };
    // Fetch the intent client secret from the backend
    const clientSecret = await fetchPaymentIntentClientSecret();
    // Confirm the payment with the card details
    const {paymentIntent, error} = await confirmPayment(clientSecret, {
      type: 'Card',
      billingDetails,
    });
    if (error) {
      console.log('Payment confirmation error', error);
    } else if (paymentIntent) {
      console.log('Success from promise', paymentIntent);
    }
  };

После этого вы можете проверить статусы платежей на панели инструментов Stripe.

Тестовые карты

Существует список тестовых карт разных марок для проверки ваших платежей.

Спасибо за прочтение!
Не стесняйтесь подключаться к Twitter