# Checkout Flow: Animation de paiement

Un curseur choisit la facturation annuelle, tape un numéro de carte, coche la case des conditions et appuie sur Pay, pour finir sur un toast de réussite. Modèle vidéo : code pour Claude ou montage dans Subclip.

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

Une carte de paiement avec un sélecteur de facturation, un champ de carte et une case des conditions, remplie et payée par un curseur, avec un toast de réussite à la fin.

- Framework: Remotion
- Catégorie: Interface
- Durée: 11 s
- Format: 16:9 paysage
- Code: Obtenir le code (connexion gratuite) : https://www.subclip.app/fr/motion-graphics-templates/remotion/checkout-flow

Une carte " Upgrade your plan " apparaît et ses champs sortent du flou un par un. Un curseur clique sur Yearly dans le sélecteur de facturation, active le champ du numéro de carte pendant que " 4242 4242 4242 4242 " se tape, et coche " I accept the terms and conditions ". Il appuie ensuite sur " Pay $49 ", qui affiche un état de chargement puis passe en réussite pendant qu'un toast " Payment successful " glisse puis se ferme. L'animation dure environ 11 secondes.

Vous pouvez régler la vitesse de lecture et l'arrière-plan autour de la scène, et modifier les libellés, les valeurs et les couleurs dans le code. Utilisez-le dans une démo de tarifs SaaS, une vidéo de produit de paiement, une publicité sur le paiement rapide ou un parcours de changement de formule.

## Idéal pour

- Démos de tarifs SaaS
- Vidéos de produits de paiement
- Publicités sur le paiement rapide
- Parcours de changement de formule

## Ce que vous pouvez modifier

- `speed`: Vitesse de lecture (Nombre)
- `stageBackground`: Arrière-plan autour de la scène (Couleur)

## Comment utiliser ce template

1. Téléchargez Subclip pour Mac ou Windows. Tous les templates de cette page y sont préinstallés.
2. Ouvrez le panneau Templates, choisissez Checkout Flow et déposez-le sur votre timeline.
3. Modifiez le texte, les couleurs et le timing dans les réglages du calque, ou demandez à l'agent IA de le faire pour vous.
4. Exportez votre vidéo, ou téléchargez le code pour utiliser le template dans votre propre projet.

Basé sur Checkout Flow de remocn: https://remocn.dev