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.
The import and the props worth knowing about, in one place.
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"
/>Wallet-pay button row with Apple Pay, Google Pay, and PayPal in their brand colors above an or-pay-with-card divider, with the order total in the header.
Coming-soon product card with a tone Pre-order pill, notify-count, calendar release date, price, and a tone-filled Reserve button.
Four-step checkout stepper: the connector fills toward the next node while each summary panel slides in from the right, ending on a placed order with a check.
Post-purchase card with an emerald check, order id, total price, a package-arrival line, and the receipt email destination.