---
title: "Checkout Flow"
description: "A composed checkout flow with plan summary, payment field rows, total, and purchase action"
---

import { InstallCommand } from "/snippets/install-command.jsx";

<iframe src="/public/catalog/preview/components/checkout-flow.html" className="w-full aspect-video rounded-xl border border-zinc-200 dark:border-zinc-800" loading="lazy" title="Checkout Flow preview" />

## Install

<InstallCommand command="npx hyperframes add checkout-flow" />

That writes one file: `compositions/components/checkout-flow.html`.

## Source

<Accordion title={`checkout-flow.html`}>

```html
<!--
  Checkout Flow - Remocn-inspired composed UI flow for HyperFrames.

  Paste the markup and CSS into a composition. Use the timeline integration
  note at the bottom as the starting point for deterministic GSAP animation.
-->

<div class="hf-ui-checkout-flow">
  <div class="hf-ui-checkout-plan"><span>Pro plan</span><strong>$29/mo</strong></div>
  <div class="hf-ui-checkout-fields">
    <div>Card number <strong>4242 4242 4242 4242</strong></div>
    <div>Expiry <strong>12/30</strong></div>
  </div>
  <div class="hf-ui-checkout-total"><span>Total today</span><strong>$29.00</strong></div>
  <button type="button">Complete purchase</button>
</div>

<style>
  .hf-ui-checkout-flow {
    display: grid;
    gap: 16px;
    width: 440px;
    padding: 26px;
    border: 1px solid #e4e4e7;
    border-radius: 28px;
    background: #ffffff;
    color: #18181b;
    font-family: Inter, system-ui, sans-serif;
    box-shadow: 0 28px 84px rgba(0, 0, 0, 0.12);
  }
  .hf-ui-checkout-plan,
  .hf-ui-checkout-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .hf-ui-checkout-plan {
    padding: 18px;
    border-radius: 18px;
    background: #18181b;
    color: #ffffff;
  }
  .hf-ui-checkout-plan span,
  .hf-ui-checkout-total span {
    color: inherit;
    opacity: 0.72;
    font-size: 14px;
    font-weight: 850;
  }
  .hf-ui-checkout-plan strong,
  .hf-ui-checkout-total strong {
    font-size: 22px;
  }
  .hf-ui-checkout-fields {
    display: grid;
    gap: 10px;
  }
  .hf-ui-checkout-fields div {
    display: grid;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid #e4e4e7;
    border-radius: 15px;
    color: #71717a;
    font-size: 13px;
    font-weight: 800;
  }
  .hf-ui-checkout-fields strong {
    color: #18181b;
    font-size: 16px;
  }
  .hf-ui-checkout-flow button {
    height: 50px;
    border: 0;
    border-radius: 15px;
    /* The primary action is the one accent-carrying element here. */
    background: var(--accent, #18181b);
    color: #ffffff;
    font-weight: 900;
  }
</style>

<!--
  Timeline integration:
  tl.fromTo('.hf-ui-checkout-flow', { opacity: 0, y: 28 }, { opacity: 1, y: 0, duration: 0.36, ease: 'power2.out' }, 0.25);
  tl.fromTo('.hf-ui-checkout-fields div', { x: -16, opacity: 0 }, { x: 0, opacity: 1, duration: 0.26, stagger: 0.08, ease: 'power2.out' }, 0.62);
  tl.fromTo('.hf-ui-checkout-total', { opacity: 0 }, { opacity: 1, duration: 0.24, ease: 'power2.out' }, 0.92);
  tl.to('.hf-ui-checkout-flow button', { scale: 0.96, duration: 0.12, yoyo: true, repeat: 1, ease: 'power1.inOut' }, 1.18);
-->
```

</Accordion>

## Usage

Open `compositions/components/checkout-flow.html` and paste its contents into your composition. See the comment header in the file for detailed instructions.

{/* hf:generated-footer */}

Tagged `ui-flow` `remocn-port` `checkout` `commerce`.

## Related topics

- [Browse the complete Catalog](/catalog)
- [Add assets and Catalog items in Studio](/studio/assets-and-blocks)
- [Build a richer composition](/go-further)