Как подключить платёжные сервисы (ЮKassa или Stripe) к React-приложению?
Подключение платёжных сервисов к React-приложению требует работы как на фронтенде, так и на бэкенде. Рассмотрим оба варианта.
## Подключение Stripe к React
**1. Установка зависимостей**
npm install @stripe/stripe-js @stripe/react-stripe-js
**2. Настройка провайдера**
Оберните приложение в `Elements` провайдер:
jsx
import { loadStripe } from ‘@stripe/stripe-js’;
import { Elements } from ‘@stripe/react-stripe-js’;
const stripePromise = loadStripe(‘pk_test_ВАШ_ПУБЛИЧНЫЙ_КЛЮЧ’);
function App() {
return (
);
}
**3. Создание формы оплаты**
Используйте хук `useStripe` и компонент `CardElement`:
jsx
import { useStripe, useElements, CardElement } from ‘@stripe/react-stripe-js’;
function CheckoutForm() {
const stripe = useStripe();
const elements = useElements();
const handleSubmit = async (e) => {
e.preventDefault();
const { paymentMethod } = await stripe.createPaymentMethod({
type: ‘card’,
card: elements.getElement(CardElement),
});
// Отправьте paymentMethod.id на бэкенд для создания платежа
};
return (
);
}
**4. Бэкенд (Node.js)**
На сервере создайте PaymentIntent:
js
const stripe = require(‘stripe’)(‘sk_test_СЕКРЕТНЫЙ_КЛЮЧ’);
app.post(‘/create-payment-intent’, async (req, res) => {
const paymentIntent = await stripe.paymentIntents.create({
amount: 1000, // в центах
currency: ‘usd’,
});
res.json({ clientSecret: paymentIntent.client_secret });
});
—
## Подключение ЮKassa к React
ЮKassa не имеет официального React SDK, но предоставляет JavaScript-виджет.
**1. Подключение виджета через CDN**
Добавьте в `index.html`:
html
**2. Создание компонента оплаты**
jsx
import { useEffect } from ‘react’;
function YookassaCheckout({ confirmationToken }) {
useEffect(() => {
const checkout = new window.YooMoneyCheckoutWidget({
confirmation_token: confirmationToken,
return_url: ‘https://ваш-сайт.ru/success’,
error_callback: (error) => console.error(error),
});
checkout.render(‘payment-form’);
return () => checkout.destroy();
}, [confirmationToken]);
return
;
}
**3. Бэкенд для получения токена**
Через API ЮKassa создайте платёж и верните `confirmation.confirmation_token` на фронтенд.
—
## Важные рекомендации по безопасности
— **Никогда** не храните секретные ключи на фронтенде — только на сервере.
— Используйте HTTPS для всех запросов.
— Настройте webhook для отслеживания статуса платежей.
— Валидируйте суммы на бэкенде, а не на клиенте.
— Для Stripe используйте `PaymentIntent` вместо устаревшего `Charge`.
Оба сервиса предоставляют тестовые ключи и тестовые карты для отладки без реальных транзакций.