shadcn.io is not affiliated with official shadcn/ui
Payment Methods Storefront Block for React
A table of six ways to pay, each with a fee and a limit, tested against a basket total you type: Available, Not available over $2,500, Needs $100 or more, or how much a gift card covers.
Installation
Overview
Show which ways to pay work for a basket, with this table for React with Base UI. A header says what Trellis & Twine, a craft supplies shop, accepts. The first band holds a basket total field; under it a table lists six ways to pay (card, wallet, bank transfer, pay in instalments, gift card and store credit), each with a typed fee and limit and a last column worked out from the total. Card brands and the wallet are named in text with two-letter tiles, never logos. The status line counts what works. It's built from Field, Input and Guides, with a plain table that becomes a list on a phone. No card number is asked. For a payment page, a help page or a cart.
FAQ
How is each method judged?
Each has a smallest and a largest order in cents, typed in METHODS. A total above the largest says "Not available over $2,500"; below the smallest, "Needs $100 or more". A gift card and store credit pay part of an order, so they say how much they cover instead ("Covers $120.00").
What can I type in the basket total?
Dollars with up to two decimals, up to six digits. The total starts at 1,800 and is read as whole cents. An empty field says so in the status line and every row waits for a total.
Does it take card details?
No. A page that only lists ways to pay has no need of one, and a real checkout should collect it in your payment provider's hosted fields, never in your own inputs. The tiles only name Visa, Mastercard and Apple Pay in text.
What stays in the page, and how do I connect it?
Everything. The fees, limits and results are typed and computed in the page. To make it real, read the methods your account has enabled for the shopper's country and currency from your payment provider, and use its limits.