Shadcn.io is not affiliated with official shadcn/ui
Checkout Split Payment
A split payment checkout block for React and Next.js with multiple payment method slots, per-method amount inputs, remaining balance indicator, and cart total validation built with shadcn/ui and Tailwind CSS
Let customers split their order across multiple payment methods with this split payment checkout block for React and Next.js. Features dynamic payment method slots with individual amount inputs, a method type selector for each slot, a live remaining balance indicator, and total validation ensuring all amounts match the cart total. Built with TypeScript, shadcn/ui Button, Input, and Select components, Lucide icons, and Tailwind CSS. Perfect for high-value orders, gift card partial redemption, and flexible payment checkout flows.
Related Components
Installments Checkout
Buy now pay later installment plans
Crypto Checkout
Cryptocurrency payment checkout
Invoice Request
B2B pay-by-invoice checkout
Pickup & Delivery
Pickup vs delivery selection
Saved Cards
Saved payment method selection
Promo Code
Discount code redemption
FAQ
Was this page helpful?
Sign in to leave feedback.
Split Layout
A two-panel checkout layout for React and Next.js with cart summary on the left and shipping plus payment form on the right using shadcn/ui Input, Label, Button, Badge, and Tailwind CSS
Store Pickup
An in-store pickup checkout block with a searchable store list showing distance, address, and hours, pickup person name field, ready estimate, and pickup instructions