# Checkout Flow: 结账动画

光标选择按年付费、输入卡号、勾选条款复选框并点击 Pay，最后弹出成功提示。 视频模板，可复制代码供 Claude 使用，或在 Subclip 中编辑。

Canonical URL: https://www.subclip.app/zh/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/zh/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. 下载 Mac 或 Windows 的 Subclip。此页面上的每个模板均已预先安装。
2. 打开"模板"面板，选择 Checkout Flow 并将其放在时间线上。
3. 更改图层设置中的文本、颜色和时间，或要求 AI 代理为您编辑。
4. 导出视频，或下载代码以在您自己的项目中使用该模板。

基于 remocn 的 Checkout Flow 制作: https://remocn.dev