Виджет Яндекс.Кассы
Виджет Яндекс.Кассы имеет адаптивный дизайн платежной формы и умеет «на лету» валидировать введенные данные. В процессе оплаты вам не нужно взаимодействовать с пользователем. Достаточно создать платеж по API Яндекс.Кассы, инициализировать виджет и отобразить форму на странице оплаты. Как это работает:
  1. Пользователь переходит к оплате.
  2. Вы отправляете Яндекс.Кассе запрос на создание платежа.
  3. Яндекс.Касса возвращает вам созданный объект платежа с токеном для инициализации виджета.
  4. Вы инициализируете виджет и отображаете форму на странице оплаты.
  5. Пользователь выбирает способ оплаты, вводит данные.
  6. При необходимости виджет перенаправляет пользователя на страницу подтверждения платежа (например, для аутентификации по 3-D Secure).
  7. Пользователь подтверждает платеж.
  8. Виджет перенаправляет пользователя на страницу завершения оплаты на вашей стороне.
 Настройка способов оплаты
Виджет поддерживает оплату банковской картой, Google Pay и Apple Pay. Уточните у вашего менеджера Яндекс.Кассы, какие способы вам доступны.
Чтобы в виджете работала оплата с помощью Google Pay и Apple Pay, ваш сайт должен использовать HTTPS и действующий TLS/SSL-сертификат (минимальная версия — TLS v1.2).
Чтобы подключить Apple Pay, выполните дополнительные настройки.
 Подключение Apple Pay
Шаг 1. Сообщите вашему менеджеру Яндекс.Кассы адрес сайта, на котором будет размещаться виджет.
Шаг 2. Менеджер пришлет вам файл. Разместите его на своем сайте по адресу:
https://<домен вашего сайта>/.well-known/apple-developer-merchantid-domain-association
Путь к файлу должен быть строго таким — с точкой и дефисами. Точка в названии означает, что это скрытая папка.
Шаг 3. Чтобы оплата с помощью Apple Pay всегда была доступна в виджете, обновляйте TLS/SSL-сертификат не позднее, чем за 8 дней до окончания его срока действия.
 Подготовка страницы оплаты
Для приема платежей подготовьте страницу оплаты: подключите библиотеку и разместите виджет.
Шаг 1. Подключите скрипт из CDN. Библиотека будет доступна в глобальной области видимости под именем
YandexCheckout
.
Шаг 2. На страницу оплаты добавьте HTML-элемент, в котором хотите разместить форму. Задайте для данного элемента атрибут
id
.
Шаг 3. Для инициализации виджета создайте новый экземпляр класса
YandexCheckout
и передайте в него
confirmation_token
, который нужно получить в Яндекс.Кассе перед проведением платежа,
return_url
, на который пользователь вернется после оплаты, и callback-функцию, которая будет принимать код ошибки.
confirmation_token
нужно получать в Яндекс.Кассе для каждого платежа.
Шаг 4. Чтобы отобразить платежную форму, вызовите метод
render
. Передайте в него значение атрибута
id
, в котором нужно разместить форму.
HTML
<!--Подключение библиотеки-->
<script src="https://kassa.yandex.ru/checkout-ui/v2.js"></script>

<!--HTML-элемент, в котором будет отображаться платежная форма-->
<div id="payment-form"></div>

<script>
//Инициализация виджета. Все параметры обязательные.
const checkout = new window.YandexCheckout({
    confirmation_token: 'confirmation-token', //Токен, который перед проведением оплаты нужно получить от Яндекс.Кассы
    return_url: 'https://merchant.site', //Ссылка на страницу завершения оплаты
    error_callback(error) {
        //Обработка ошибок инициализации
    }
});

//Отображение платежной форме в заданном элементе
checkout.render('payment-form');
</script>
 Проведение платежа
Чтобы провести платеж:
  1. Создайте платеж в Яндекс.Кассе
  2. Инициализируйте виджет
  3. Завершите оплату
Если хотите протестировать виджет, создайте платеж для вашего тестового магазина и заплатите одной из тестовых карт. Подробнее о тестировании платежей
 Шаг 1. Создайте платеж
Для создания платежа отправьте Яндекс.Кассе запрос, передайте в нём данные для аутентификации запроса, ключ идемпотентности, объект
amount
с суммой платежа, объект
confirmation
с типом
embedded
и, при необходимости, параметр
description
с описанием транзакции, которое пользователь увидит при оплате. Также передайте параметр
capture
со значением
true
. Это значит, что вы получите деньги сразу после оплаты (при значении
false
нужная сумма заблокируется на счете пользователя, и после этого вы можете ее списать в удобное вам время).
В запросе можно передать любые другие параметры, кроме
save_payment_method
,
payment_method_data
,
payment_method_id
,
payment_token
,
airline
.
cURL
PHP
Python
curl https://payment.yandex.net/api/v3/payments \
  -X POST \
  -u <Идентификатор магазина>:<Секретный ключ> \
  -H 'Idempotence-Key: <Ключ идемпотентности>' \
  -H 'Content-Type: application/json' \
  -d '{
        "amount": {
          "value": "2.00",
          "currency": "RUB"
        },
        "confirmation": {
          "type": "embedded"
        },
        "capture": true,
        "description": "Заказ №72"
      }'
 Шаг 2. Инициализируйте виджет
В объекте платежа  Яндекс.Касса вернет
confirmation_token
.
JSON
{
  "id": "22d6d597-000f-5000-9000-145f6df21d6f",
  "status": "pending",
  "paid": false,
  "amount": {
    "value": "2.00",
    "currency": "RUB"
  },
  "confirmation": {
    "type": "embedded",
    "confirmation_token": "ct-24301ae5-000f-5000-9000-13f5f1c2f8e0"
  },
  "created_at": "2018-07-10T14:25:27.535Z",
  "description": "Заказ №72",
  "metadata": {},
  "recipient": {
    "account_id": "100001",
    "gateway_id": "1000001"
  },
  "refundable": false,
  "test": false
}
Используйте этот токен для создания экземпляра класса
YandexCheckout
и инициализации виджета.
Срок действия токена — до использования, но не более 1 часа. Если пользователь не оплатит в течение часа, виджет не инициализируется, токен нужно будет запрашивать заново. Если пользователь оплатит и вернется к форме, она отобразится с ошибкой.
Чтобы заново запросить токен, создайте платеж еще раз и инициализируйте виджет с новым токеном.
 Шаг 3. Завершите оплату
Когда пользователь введет данные для оплаты и подтвердит платеж, Яндекс.Касса перенаправит его на 
return_url
, который вы передадите при инициализации виджета. Вам нужно самостоятельно узнать, как завершился платеж — успехом или неудачей — и отобразить пользователю нужную информацию.
Чтобы узнать статус платежа, подождите, когда придет уведомление от Яндекс.Кассы, или периодически отправляйте запросы, чтобы получить информацию о платеже .
 Ошибки инициализации виджета
Если инициализация виджета закончилась неудачей, Яндекс.Касса передаст в callback-функцию код ошибки.
Код ошибкиОписание
token_required
Токен не передан. При инициализации виджета передайте
confirmation_token
.
invalid_token
Неверный токен. Для получения токена создайте платеж.
token_expired
Истек срок действия токена. Для получения нового токена создайте платеж.
return_url_required
URL возврата не передан. При инициализации виджета передайте
return_url
.
internal_service_error
При создании платежа возникла ошибка. Повторите инициализацию виджета.
 Что почитать еще
Быстрый стартПроведение платежейВходящие уведомления