# Checkout Flow: Animación de pago

Un cursor elige facturación anual, escribe un número de tarjeta, marca la casilla de condiciones y pulsa Pay, y termina con un toast de éxito. Plantilla de vídeo: copia el código para Claude o edítala en Subclip.

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

Una tarjeta de pago con selector de facturación, campo de tarjeta y casilla de condiciones, que un cursor rellena y paga, con un toast de éxito al final.

- Framework: Remotion
- Categoría: Interfaz
- Duración: 11 s
- Relación de aspecto: 16:9 horizontal
- Código: Consigue el código (inicio de sesión gratis): https://www.subclip.app/es/motion-graphics-templates/remotion/checkout-flow

Una tarjeta "Upgrade your plan" aparece y sus campos surgen del desenfoque uno a uno. Un cursor pulsa Yearly en el selector de facturación, enfoca el campo del número de tarjeta mientras se escribe "4242 4242 4242 4242" y marca "I accept the terms and conditions". Luego pulsa "Pay $49", que muestra un estado de carga y pasa a éxito mientras entra un toast "Payment successful" que después se cierra. Dura unos 11 segundos.

Puedes ajustar la velocidad de reproducción y el fondo alrededor de la escena, y editar las etiquetas, los valores y los colores en el código. Úsala en una demo de precios de un SaaS, el vídeo de un producto de pagos, un anuncio sobre pago rápido o un recorrido por un flujo de mejora de plan.

## Úsala para

- Demos de precios de SaaS
- Vídeos de productos de pagos
- Anuncios de pago rápido
- Recorridos por flujos de mejora de plan

## Qué puedes cambiar

- `speed`: Velocidad de reproducción (Número)
- `stageBackground`: Fondo alrededor de la escena (Color)

## Cómo usar esta plantilla

1. Descarga Subclip para Mac o Windows. Todas las plantillas de esta página vienen preinstaladas.
2. Abre el panel de plantillas, elige Checkout Flow y arrástrala a tu línea de tiempo.
3. Cambia el texto, los colores y el ritmo en los ajustes de la capa, o pide al agente de IA que la edite por ti.
4. Exporta tu video o descarga el código para usar la plantilla en tu propio proyecto.

Basada en Checkout Flow de remocn: https://remocn.dev