Категории
Как добавить оплату по карте в самописный интернет-магазин — пошаговый гайд
30.01.2026 | Статья из категории: Создание сайтов
Представьте: у вас есть самописный интернет-магазин, один товар, всё работает, но нет возможности оплатить картой. Покупатели уходят, продажи падают.
Сегодня разберём, как за 2 часа подключить оплату по карте на примере реального проекта с одним товаром. Без лишней теории — только практика.
Содержание:
Что понадобится
Перед началом убедитесь, что у вас есть:
- ✅ Хостинг с поддержкой PHP 7.4+
- ✅ Домен с HTTPS (обязательно для приёма платежей)
- ✅ Базовый уровень знаний PHP и JavaScript
- ✅ 2 часа свободного времени
💡 Совет: Если у вас нет HTTPS — большинство платёжных систем откажут в работе. Бесплатный SSL можно получить через Let's Encrypt.
Выбор и регистрация в платёжной системе
Для начала работы нужно выбрать платёжную систему. Рекомендую:
ЮКасса (Яндекс.Касса)
- ✅ Поддержка РФ и СНГ
- ✅ Простое API
- ✅ Множество способов оплаты (карты, СБП, электронные кошельки)
- ✅ Тестовый режим для отладки
Регистрация:
- Перейдите на yookassa.ru
- Создайте аккаунт продавца
- Укажите реквизиты (ИНН, расчётный счёт)
- Получите Shop ID и API Key
⚠️ Важно: API Key показывается только один раз! Сохраните его в надёжном месте.
Структура проекта
Для примера возьмём магазин с одним товаром. Структура файлов:
/your-shop
├── index.php # Карточка товара
├── success.php # Страница после оплаты
├── .env # API-ключи (не коммитить в Git!)
├── api/
│ └── create-payment.php # Создание платежа
├── webhook/
│ └── yookassa.php # Обработчик уведомлений
└── logs/
├── payments.log # Лог успешных платежей
└── errors.log # Лог ошибок
Бэкенд: создание платежа
Создадим эндпоинт, который будет создавать платёж в ЮКассе.
<?php
// api/create-payment.php
// Получаем данные из запроса
$data = json_decode(file_get_contents('php://input'), true);
$productId = $data['product_id'];
$amount = $data['amount']; // например, 1500.00
// Загружаем .env (или используйте getenv)
require_once '../vendor/autoload.php';
$shopId = getenv('YOOKASSA_SHOP_ID');
$secretKey = getenv('YOOKASSA_SECRET_KEY');
// Формируем запрос к ЮКассе
$paymentData = [
'amount' => [
'value' => number_format($amount, 2, '.', ''),
'currency' => 'RUB'
],
'confirmation' => [
'type' => 'redirect',
'return_url' => 'https://yoursite.com/success.php'
],
'capture' => true,
'description' => 'Оплата товара #' . $productId,
'metadata' => [
'product_id' => $productId,
'timestamp' => time()
]
];
// Отправляем запрос
$ch = curl_init('https://api.yookassa.ru/v3/payments');
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($paymentData));
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Content-Type: application/json',
'Idempotence-Key: ' . uniqid(),
'Authorization: Basic ' . base64_encode($shopId . ':' . $secretKey)
]);
$response = curl_exec($ch);
curl_close($ch);
$responseData = json_decode($response, true);
// Возвращаем URL для редиректа
echo json_encode([
'success' => true,
'payment_url' => $responseData['confirmation']['confirmation_url'],
'payment_id' => $responseData['id']
]);
?>
💡 Idempotence-Key — уникальный ключ для защиты от дублирования платежей. Используйте
uniqid() или UUID.
Фронтенд: кнопка оплаты
Теперь добавим кнопку «Оплатить картой» в карточку товара.
<!DOCTYPE html>
<!-- index.php -->
<html>
<head>
<title>Крутой товар</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 50px auto;
padding: 20px;
background: #f5f5f5;
}
.buy-btn {
background: #ff5500;
color: white;
padding: 15px 30px;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
transition: all 0.2s;
}
.buy-btn:hover {
background: #e64a00;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 85, 0, 0.3);
}
</style>
</head>
<body>
<h1>Крутой товар</h1>
<p>Цена: <strong>1 500 ₽</strong></p>
<button class="buy-btn" onclick="buyProduct()">
💳 Оплатить картой
</button>
<script>
async function buyProduct() {
const productId = 1; // ID товара
const amount = 1500.00; // Цена
try {
const response = await fetch('/api/create-payment.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
product_id: productId,
amount: amount
})
});
const data = await response.json();
if (data.success) {
// Редирект на страницу оплаты ЮКассы
window.location.href = data.payment_url;
} else {
alert('Ошибка создания платежа');
}
} catch (error) {
console.error('Ошибка:', error);
alert('Произошла ошибка при создании платежа');
}
}
</script>
</body>
</html>
✅ Результат: При нажатии на кнопку пользователь перенаправляется на платёжную страницу ЮКассы, где вводит данные карты.
Webhook: обработка уведомлений
После оплаты ЮКасса отправит уведомление на ваш сервер. Это называется webhook.
<?php
// webhook/yookassa.php
// Получаем данные от ЮКассы
$event = json_decode(file_get_contents('php://input'), true);
// В реальном проекте — проверка подписи!
// Для теста пропустим, но в продакшене ОБЯЗАТЕЛЬНО проверяйте!
$eventType = $event['event'];
$payment = $event['object'];
if ($eventType === 'payment.succeeded') {
$productId = $payment['metadata']['product_id'];
$paymentId = $payment['id'];
// Логируем успешную оплату
$log = [
'timestamp' => date('Y-m-d H:i:s'),
'payment_id' => $paymentId,
'product_id' => $productId,
'status' => 'paid'
];
file_put_contents(
__DIR__ . '/../logs/payments.log',
json_encode($log) . PHP_EOL,
FILE_APPEND
);
// Здесь можно:
// - отправить письмо покупателю
// - изменить статус заказа в БД
// - начать подготовку к отправке
http_response_code(200);
exit;
}
http_response_code(200); // ЮКасса требует 200 даже на ненужные события
?>Настройка в панели ЮКассы:
- Перейдите в настройки → «Уведомления»
- Укажите URL:
https://yoursite.com/webhook/yookassa.php - Включите уведомления о смене статуса
Тестирование
Перед запуском в продакшен обязательно протестируйте:
Включить тестовый режим в настройках ЮКассы
Проверить создание платежа — нажать кнопку, должен открыться платёжный виджет
Протестировать успешную оплату — использовать тестовую карту:
4242 4242 4242 4242 (любые валидные CVV и дата)Проверить вебхук — в логах должен появиться запись об оплате
Проверить редирект на
success.phpЧек-лист для быстрого старта
Вот готовый чек-лист, который можно распечатать и отмечать галочками:
Подготовка (15 минут)
Выбрать платёжную систему (рекомендую ЮКассу)
Зарегистрироваться и получить API-ключи
Сохранить ключи в
.env файлБэкенд (30 минут)
Создать файл
api/create-payment.phpРеализовать запрос к API платёжной системы
Добавить обработку ошибок и логирование
Фронтенд (20 минут)
Добавить кнопку «Оплатить» в карточку товара
Написать JavaScript для создания платежа
Проверить редирект на платёжную страницу
Webhook (25 минут)
Создать файл
webhook/yookassa.phpРеализовать обработку успешной оплаты
Настроить уведомления в панели ЮКассы
Дополнительно (10 минут)
Создать страницу
success.phpПротестировать в тестовом режиме
Отключить тестовый режим и запустить
Что дальше?
После успешной интеграции можно добавить:
- 📧 Уведомления на почту при оплате
- 📊 Аналитику конверсии
- 💳 Несколько способов оплаты (СБП, электронные кошельки)
- 🛒 Корзину и несколько товаров
⚠️ Важно помнить:
- Никогда не храните данные карт на своём сервере
- Всегда проверяйте подпись вебхуков
- Используйте тестовый режим перед продакшеном
- Ведите логи всех транзакций
Вывод
Интеграция платёжной системы — это не страшно. Следуя этому гайду, вы сможете добавить оплату по карте в свой магазин за пару часов.
Главное — не бояться начать и тестировать на каждом этапе.
Комментарии
Пока нет комментариев. Будьте первым!