YooMoney API
Guides
Old versions of the API
Help
Sign up for YooMoney
Выплаты с использованием виджета для сбора данных
Выплаты с использованием виджета — это самый простой способ в ЮKassa делать выплаты на банковские карты. В статье описано, какие возможности есть у виджета и как виджет можно использовать при проведении выплат.
Виджет для выплат: форма сбора данных
 
Возможности виджета
С помощью виджета ЮKassa вы можете встроить на сайт готовую форму сбора данных. Форма автоматически подстраивается под размеры устройства пользователя, проверяет вводимые данные и подсказывает пользователю, если что-то введено некорректно. Можно настроить язык интерфейса и цветовую схему формы.
Когда пользователь вводит свой номер карты в форму сбора данных, ЮKassa сохраняет номер карты в своей системе, а вам возвращает эти данные:
  • Синоним карты — идентификатор банковской карты в системе ЮKassa. Синоним нужно использовать при проведении выплаты.
  • Маскированный номер банковской карты (маска карты) и другие данные для отображения в вашем интерфейсе информации о карте пользователя.
Вы можете хранить эти данные на своей стороне без опасения утечки: их публикация не приводит к финансовым или имиджевым потерям.
Синоним банковской карты можно использовать несколько раз и для разных выплат. Для одной и той же карты можно сделать несколько синонимов. Синоним можно получить в любой момент до проведения выплаты.
В виджете есть версионирование. Это значит, что виджет на вашем сайте будет вести себя предсказуемым для вас образом: будет отображаться та версия, которую вы подключали. Список версий
Сценарии проведения выплат с использованием виджета
Вы можете обменять номер карты на синоним заранее или непосредственно перед проведением выплаты.
Получение данных заранее
В этом сценарии получение данные банковской карты и проведение выплат — это два разных процесса. Например, пользователь вводит номер карты для выплат при регистрации в вашем сервисе, а сами выплаты вы делаете потом, после регистрации.
Получение и сохранение данных карты:
  1. Пользователь на вашем сайте переходит к вводу номера банковской карты, на которую он хочет получить деньги.
  2. Вы инициализируете виджет и отображаете форму.
  3. Получатель выплаты вводит номер банковской карты и нажимает кнопку Дальше.
  4. Виджет отображает пользователю, что данные в обработке.
  5. Виджет передает номер карты в ЮKassa.
  6. ЮKassa возвращает синоним банковской карты и другие данные.
  7. Виджет возвращает вам данные, полученные от ЮKassa.
  8. Вы сохраняете синоним карты и данные для отображения информации о карте в интерфейсе.
  9. Вы сообщаете пользователю, что успешно сохранили номер его карты.
Проведение выплаты:
  1. Вы отправляете ЮKassa запрос на проведение выплаты с использованием синонима карты.
  2. ЮKassa отправляет эквайеру распоряжение на перевод денег получателю выплаты.
  3. Эквайер обрабатывает запрос и сообщает результат выполнения операции.
  4. ЮKassa возвращает вам объект выплаты с финальным статусом.
  5. Вы сообщаете пользователю результаты проведения выплаты.
Получение данных в процессе выплаты
В этом сценарии вы получаете данные банковской карты сразу перед проведением выплаты:
  1. Пользователь на вашем сайте переходит к вводу номера банковской карты, на которую он хочет получить деньги.
  2. Вы инициализируете виджет и отображаете форму.
  3. Получатель выплаты вводит номер банковской карты и нажимает кнопку Дальше.
  4. Виджет отображает пользователю, что данные в обработке.
  5. Виджет передает номер карты в ЮKassa.
  6. ЮKassa возвращает синоним банковской карты и другие данные.
  7. Виджет возвращает вам данные, полученные от ЮKassa.
  8. Если в дальнейшем нужно делать выплаты этому же пользователю, вы сохраняете синоним карты и данные для отображения информации о карте в интерфейсе.
  9. Вы отправляете ЮKassa запрос на проведение выплаты с использованием синонима карты.
  10. ЮKassa отправляет эквайеру распоряжение на перевод денег получателю выплаты.
  11. Эквайер обрабатывает запрос и сообщает результат выполнения операции.
  12. ЮKassa возвращает вам объект выплаты с финальным статусом.
  13. Вы сообщаете пользователю результаты проведения выплаты.
Как делать выплаты с использованием виджета
Шаг 1. Выберите нужный вам сценарий проведения выплат.
Шаг 2. Подключите виджет. При необходимости настройте цветовую схему и язык интерфейса.
Шаг 3. Реализуйте нужную логику проведения выплат с использованием синонима банковской карты.
Что почитать еще