# Checkout Flow: Checkout Animation

A cursor picks yearly billing, types a card number, ticks the terms box and presses Pay, ending in a success toast. Use this video template in Subclip or copy its code for Claude.

Canonical URL: https://www.subclip.app/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

A checkout card with a billing toggle, card input and terms checkbox, filled in by a cursor and paid, with a success toast at the end.

- Framework: Remotion
- Category: UI
- Duration: 11 s
- Aspect ratio: 16:9 landscape
- Code: Get the code (free sign-in): https://www.subclip.app/motion-graphics-templates/remotion/checkout-flow

An "Upgrade your plan" card fades in and its fields blur in one by one. A cursor clicks Yearly on the billing toggle, focuses the card number field as "4242 4242 4242 4242" types in, and ticks "I accept the terms and conditions". It then presses "Pay $49", which shows a loading state and turns to success while a "Payment successful" toast slides in and later dismisses. It runs about 11 seconds.

You can adjust the playback speed and the background around the scene, and edit the labels, values and colors in the code. Use it in a SaaS pricing demo, a payments product video, an ad about fast checkout or an upgrade flow walkthrough.

## Use it for

- SaaS pricing demos
- Payments product videos
- Fast checkout ads
- Upgrade flow walkthroughs

## What you can change

- `speed`: Playback speed (Number)
- `stageBackground`: Background around the scene (Color)

## How to use this template

1. Download Subclip for Mac or Windows. Every template on this page comes pre-installed.
2. Open the Templates panel, pick Checkout Flow and drop it on your timeline.
3. Change the text, colors and timing in the layer settings, or ask the AI agent to edit it for you.
4. Export your video, or download the code to use the template in your own project.

Built on Checkout Flow from remocn: https://remocn.dev