Pay in Installments

Buy-now-pay-later card with provider header, four-dot installment timeline where paid steps fill in tone and the line progresses, plus a fineprint footer.

Pay in 4·Klarna

$192

$48Today

$48Apr 28

$48May 5

$48May 12

0% interest. No fees.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Commerce24 } from "@/components/beste/piece/commerce24";

<Commerce24
  total="$192"
  provider="Klarna"
  installments={[
    {
      "amount": "$48",
      "date": "Today",
      "paid": true
    },
    {
      "amount": "$48",
      "date": "Apr 28"
    },
    {
      "amount": "$48",
      "date": "May 5"
    },
    {
      "amount": "$48",
      "date": "May 12"
    }
  ]}
  fineprint="0% interest. No fees."
  tone="primary"
/>