Центр помощи
Текущая статья

Как спроектировать удобный интерфейс биллинга

Токен — это зашифрованное представление банковской карты клиента, которое хранится в платежной системе.

Клиент вводит данные карты один раз, после чего они сохраняются в виде токена. В дальнейшем внешняя система использует этот токен для проведения новых списаний без повторного ввода данных карты. Сумма каждого списания может быть разной.

Для SaaS-сервисов API-эндпоинты Allpay для работы с токенами обеспечивают более гибкое управление биллингом, чем API подписок. Получив токен карты, ваша система может передавать его через API при каждом новом платеже, самостоятельно определяя сумму, дату и условия списания. Это позволяет менять тарифы и реализовывать собственные сценарии повторных платежей в соответствии с бизнес-моделью продукта.

Поэтому для построения биллинга в SaaS-продуктах мы рекомендуем использовать API-эндпоинты для работы с токенами.

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

Согласие на будущие списания

До сохранения карты клиент должен понимать условия будущих списаний.

Покажите стоимость, периодичность платежей, дату первого списания и условия отмены подписки. Если сумма может меняться, объясните, от чего она зависит.

Клиент должен явно подтвердить согласие на последующие автоматические списания.

Автоматические повторные попытки

Если платеж не прошёл, например из-за недостатка средств, настройте автоматические повторные попытки.

Рекомендуется делать 5–7 попыток, постепенно увеличивая интервал между ними.

Сообщите клиенту о неудачном списании и дайте ему возможность пополнить счёт или обновить карту до следующей попытки.

Повтор платежа вручную

Добавьте кнопку «Повторить платеж», чтобы клиент мог самостоятельно инициировать списание после устранения проблемы.

Кнопка должна оставаться доступной, пока платеж не будет успешно проведён или отменён.

Управление картами

Позвольте клиенту добавить новую карту, выбрать основную и удалить сохранённую карту.

В интерфейсе показывайте бренд и последние четыре цифры карты.

Сначала выполняйте списание с основной карты. Если платеж не прошёл, попробуйте списать средства с резервной. Это снижает риск приостановки сервиса.

История операций

Показывайте в истории все успешные и неудачные списания, а также возвраты.

Для каждой операции укажите сумму, дату и статус. Для возврата также покажите связанную с ним исходную транзакцию.

Простая отмена подписки

Кнопка отмены подписки должна быть заметной и доступной.

После отмены прекратите дальнейшие списания. Не удаляйте сохранённую карту автоматически, если клиент сам этого не запросил. Предоставьте отдельную возможность удалить её.

Понятная информация о тарифе

Покажите клиенту:

  • название тарифа;
  • стоимость подписки;
  • налоги и комиссии;
  • периодичность платежей;
  • дату следующего списания;
  • итоговую сумму.

Клиент должен понимать за что, когда и сколько он платит.

Уведомления

Сообщайте клиенту о важных событиях:

  • предстоящем списании, если его сумма изменилась;
  • успешном продлении;
  • неудачном списании;
  • изменении стоимости;
  • возврате средств;
  • отмене подписки.

Уведомления можно отправлять по электронной почте или другим доступным способом, а также показывать в интерфейсе.

Рекомендации по разработке интерфейса биллинга для управления списаниями через токены платежной системы: автоматизация повторных попыток, прозрачность транзакций, работа с несколькими картами и удобство для пользователей.
Похожие статьи
Категории статьи
API
Обновления
Важные обновления на канале Allpay в Telegram (без рекламы).
Подписаться

Ответы на вопросы

Можно ли подключить Allpay к сайту, созданному с помощью AI?

Да. Так же, как вы создали сайт, вы можете попросить AI внедрить платежи через Allpay. Смотрите рекомендации и примеры промптов.

У вас есть вебхуки (webhooks)?

Да, Allpay может посылать webhook об успешном платеже. Читать подробнее.

Поддерживает ли ваш API Hosted Fields?

Да. Поля ввода карты можно встроить в ваш сайт или приложение, полностью адаптировав их дизайн. Подробнее о Hosted Fields.