A dark two-column checkout with a brand panel on the left holding the order, a promotion code field and trust badges, and a card form on the right. The total counts to its new value when a code is applied.
Pay Lumen Studio
$373.43
npx shadcn@latest add https://hyperblur.dev/r/checkout-split-summary.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/checkout-split-summary.tsx.
import { CheckoutSplitSummary } from "@/components/hyperblur/checkout-split-summary"
<CheckoutSplitSummary merchant="Lumen Studio" onPay={(values) => console.log(values)} />| Prop | Type | Default | Description |
|---|---|---|---|
| merchant | string | "Lumen Studio" | Merchant name shown in the brand panel and the pay line. |
| items | { name: string; detail: string; amount: number }[] | 3 items | Order lines in the brand panel. |
| promoCodes | { code: string; percent: number }[] | [{ code: "LAUNCH20", percent: 20 }] | Codes accepted by the promotion field, checked locally and case-insensitively. |
| taxRate | number | 0.07 | Sales tax applied after the discount. |
| currency | string | "USD" | ISO currency code. |
| badges | string[] | ["256-bit encryption", "30-day refund", "Cancel any time"] | Trust badges at the bottom of the brand panel. |
| onPromoApply | (code: string, valid: boolean) => void | Called when a code is submitted. | |
| onPay | (values: CheckoutSplitValues) => void | Called after a valid payment with email, name, country, postal code, promo, save choice, card brand, last four digits and total. | |
| accent | string | "#8b5cf6" | Panel glow, focus and button color. |
| className | string | "" | Extra classes for the section element. |
| style | CSSProperties | Inline styles merged after the accent variable. |