Юкасса (YooKassa) – развернуто

25 сентября 2023

1 В личном кабинете ЮKassa нужно получить id магазина приема платежей и секретный ключ

Для начала нужно зарегистрироваться в ЮKassa – https://yookassa.ru/joinups
Если уже зарегистрированы, входим в личный кабинет – https://yookassa.ru/my/payments (понадобится Сбер Id)

В ЛК выбираем тестовый магазин – понадобится shopId – 316ХХХ

И в меню Интеграция->Ключи API->Секретный ключ test_crVRccOteeDUP8TyuХХХХХХХХХХVQwzUn0QbovI_m_c

2 Страница для приема платежей содержит форму или кнопку. Пользователь должен совершить действие для начала платежа – заполнить форму и нажать на кнопку.

Платежная форма нужна для получения данных для формирования платежа yookassa. Платеж — главная сущность API ЮKassa.

Форма может быть довольно сложной, позволяющей выбрать или ввести сумму платежа, данные плательщика, описание платежа и другую информацию.

Если платеж фиксированный, форма может состоять только из кнопки.

<form id="vh-payment-form" name="vh_payment_form">
  <div class="payment-terms">
    <label>
      <input id="pay-term" type="checkbox" required="" onfocus="clear_error('term-error');"> 
      Принимаю <a target="_blank" href="/dogovor/" rel="noopener">условия</a> платежа
    </label>
    <span id="term-error"></span>
  </div>
  <div id="payment-button" class="payment-button">
    <a id="submit" href="javascript:void(0)" onclick="vh_payment_submit(); return false;">Заплатить</a>
  </div>
  <input type="hidden" id="description" value="Пожертвование на уставную деятельность" />
  <div id="errors" class="error-message"></div>
</form>

3 Обрабатываются данные формы, формируется и отправляется запрос платежа в API ЮKassa. Запрос должен содержать URL на сайте на который пользователь вернется после оплаты.

Обработчика формы лучше делать 2.

Обработчик JavaScript – срабатывает при нажатии на кнопку подтверждения платежа. Производит валидацию полей, запускает php-обработчик, в зависимости от результата запроса к АПИ Юкасса или перенаправляет пользователя на платежную страницу ЮKassa или выводит на экран ошибку создания платежа.

Обработчик php – подключается к API ЮKassa, проверяет существование аккаунта магазина, формирует именованный массив с данными – платеж Юкасса, отправляет ЮKassa запрос и получает ответ, который возвращает в обработчик JavaScript.

4 ЮKassa возвращает объект платежа, содержащий id платежа и редирект на платежную страницу. Пользователь перенаправляется на эту страницу.

Обработчик php – минимально передает Юкасса сумму платежа и URL, на который пользователь вернется после оплаты.
На самом деле данных бывает существенно больше, можно передать
Реквизиты плательщика
Описание платежа
Способ платежа
Периодичность платежей (рекуррентный/автоплатеж)

Юкасса вернет объект платежа в статусе pending, ссылку на страницу оплаты нужно вернуть в обработчик JavaScript.

5 После оплаты пользователем, ЮKassa направляет пользователя обратно на сайт по URL из запроса платежа.

6 Результат платежа можно узнать по id платежа, направляя запросы к ЮKassa. Можно зарегистрировать webhook и ЮKassa пришлет уведомление об изменении статуса платежа.

Если нет времени и желания разбираться самостоятельно – обращайтесь