# Checkout Flow: Checkout-Animation

Ein Cursor wählt jährliche Abrechnung, tippt eine Kartennummer, setzt das Häkchen bei den Bedingungen und drückt Pay, am Ende erscheint ein Erfolgs-Toast. Videovorlage: Code für Claude kopieren oder in Subclip bearbeiten.

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

Eine Checkout-Karte mit Abrechnungsumschalter, Karteneingabe und Bedingungs-Checkbox, die ein Cursor ausfüllt und bezahlt, mit einem Erfolgs-Toast am Ende.

- Framework: Remotion
- Kategorie: Oberfläche
- Dauer: 11 s
- Seitenverhältnis: 16:9 Querformat
- Code: Code holen (kostenlose Anmeldung): https://www.subclip.app/de/motion-graphics-templates/remotion/checkout-flow

Eine Karte "Upgrade your plan" blendet ein, und ihre Felder erscheinen nacheinander aus der Unschärfe. Ein Cursor klickt im Abrechnungsumschalter auf Yearly, fokussiert das Kartennummernfeld, während sich "4242 4242 4242 4242" eintippt, und setzt das Häkchen bei "I accept the terms and conditions". Dann drückt er "Pay $49", was einen Ladezustand zeigt und auf Erfolg wechselt, während ein Toast "Payment successful" hereingleitet und später verschwindet. Die Animation dauert etwa 11 Sekunden.

Sie können Wiedergabegeschwindigkeit und den Hintergrund rund um die Szene anpassen und Beschriftungen, Werte und Farben im Code bearbeiten. Verwenden Sie die Vorlage in einer SaaS-Preisdemo, einem Video über ein Zahlungsprodukt, einer Werbung für schnellen Checkout oder einem Walkthrough eines Upgrade-Ablaufs.

## Geeignet für

- SaaS-Preisdemos
- Videos zu Zahlungsprodukten
- Werbung für schnellen Checkout
- Walkthroughs von Upgrade-Abläufen

## Was du anpassen kannst

- `speed`: Wiedergabegeschwindigkeit (Zahl)
- `stageBackground`: Hintergrund rund um die Szene (Farbe)

## So nutzt du diese Vorlage

1. Lade Subclip für Mac oder Windows herunter. Alle Vorlagen auf dieser Seite sind dort bereits vorinstalliert.
2. Öffne das Vorlagen-Panel, wähle Checkout Flow aus und zieh die Vorlage auf deine Timeline.
3. Passe Text, Farben und Timing in den Ebeneneinstellungen an oder lass den KI-Agenten die Änderungen für dich übernehmen.
4. Exportiere dein Video oder lade den Code herunter, um die Vorlage in deinem eigenen Projekt zu verwenden.

Basiert auf Checkout Flow von remocn: https://remocn.dev