# Checkout Flow: Анимация оплаты

Курсор выбирает годовую оплату, вводит номер карты, ставит галочку согласия с условиями и нажимает Pay, и все заканчивается тостом об успехе. Видеошаблон: код для Claude или монтаж в Subclip.

Canonical URL: https://www.subclip.app/ru/motion-graphics-templates/remotion/checkout-flow

Preview video: https://subclipweb.subclip.app/motion-graphics-templates/v1/previews/motion-template-remotion-remocn-checkout-flow.mp4?v=62e416395c

Карточка оплаты с переключателем периода, полем карты и флажком согласия, которую курсор заполняет и оплачивает, а в конце появляется тост об успехе.

- Фреймворк: Remotion
- Категория: Интерфейс
- Длительность: 11 с
- Соотношение сторон: 16:9, горизонтальное
- Код: Получить код (бесплатный вход): https://www.subclip.app/ru/motion-graphics-templates/remotion/checkout-flow

Карточка "Upgrade your plan" плавно появляется, и ее поля по одному проявляются из размытия. Курсор нажимает Yearly в переключателе периода оплаты, ставит фокус в поле номера карты, пока вводится "4242 4242 4242 4242", и отмечает "I accept the terms and conditions". Затем он нажимает "Pay $49", кнопка показывает загрузку и переходит в успех, а тост "Payment successful" выезжает и позже закрывается. Анимация длится около 11 секунд.

Вы можете настроить скорость воспроизведения и фон вокруг сцены, а подписи, значения и цвета -- изменить в коде. Используйте шаблон в демо тарифов SaaS, ролике о платежном продукте, рекламе быстрой оплаты или обзоре сценария перехода на другой тариф.

## Для чего подходит

- Демо тарифов SaaS
- Ролики о платежных продуктах
- Реклама быстрой оплаты
- Обзоры перехода на другой тариф

## Что можно изменить

- `speed`: Скорость воспроизведения (Число)
- `stageBackground`: Фон вокруг сцены (Цвет)

## Как использовать этот шаблон

1. Скачайте Subclip для Mac или Windows. Все шаблоны с этой страницы уже установлены в приложении.
2. Откройте панель шаблонов, выберите Checkout Flow и перетащите его на таймлайн.
3. Измените текст, цвета и тайминг в настройках слоя или попросите ИИ-агента сделать это за вас.
4. Экспортируйте видео или скачайте код, чтобы использовать шаблон в своем проекте.

Основан на Checkout Flow из remocn: https://remocn.dev