Some relative stuff

2024-05-11 23:27:01 +03:00
parent 57ff8a59e8
commit 75bfc7ea6b
10 changed files with 200 additions and 19 deletions
--- a/web/payment.html
+++ b/web/payment.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+<html>
+ <head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Прием платежа с помощью виджета ЮKassa</title>
+
+  <!--Подключение библиотеки для инициализации виджета ЮKassa-->
+  <script src="https://yookassa.ru/checkout-widget/v1/checkout-widget.js"></script>
+ </head>
+ <body>
+  Ниже отобразится платежная форма. Если вы еще не создавали платеж и не передавали токен для инициализации виджета, появится сообщение об ошибке.
+
+  <!--Контейнер, в котором будет отображаться платежная форма-->
+  <div id="payment-form"></div>
+
+  Данные банковской карты для оплаты в <b>тестовом магазине</b>:
+
+   - номер — <b>5555 5555 5555 4477</b>
+   - срок действия — <b>01/30</b> (или другая дата, больше текущей)
+   - CVC — <b>123</b> (или три любые цифры)
+   - код для прохождения 3-D Secure — <b>123</b> (или три любые цифры)
+
+  <a href=https://yookassa.ru/developers/payment-acceptance/testing-and-going-live/testing#test-bank-card>Другие тестовые банковские карты</a>
+
+  <script>
+  //Инициализация виджета. Все параметры обязательные.
+  const checkout = new window.YooMoneyCheckoutWidget({
+      confirmation_token: 'ct-287e0c37-000f-5000-8000-16961d35b0fd', //Токен, который перед проведением оплаты нужно получить от ЮKassa
+      return_url: 'https://example.com/', //Ссылка на страницу завершения оплаты, это может быть любая ваша страница
+
+      //При необходимости можно изменить цвета виджета, подробные настройки см. в документации
+       //customization: {
+        //Настройка цветовой схемы, минимум один параметр, значения цветов в HEX
+        //colors: {
+            //Цвет акцентных элементов: кнопка Заплатить, выбранные переключатели, опции и текстовые поля
+            //control_primary: '#00BF96', //Значение цвета в HEX
+
+            //Цвет платежной формы и ее элементов
+            //background: '#F2F3F5' //Значение цвета в HEX
+        //}
+      //},
+      error_callback: function(error) {
+          console.log(error)
+      }
+  });
+
+  //Отображение платежной формы в контейнере
+  checkout.render('payment-form');
+  </script>
+ </body>
+</html>