Express Checkout Buttons React component
An express checkout card with wallet, saved card, pay-in-4 and bank buttons above a continue-with-email field; each opens a payment sheet with the method's details (card, instalment plan or bank choice), shipping address and speed, the total and a confirm button that shows progress and success.
About the Express Checkout Buttons component
Express Checkout Buttons gives shoppers who already have a wallet, a saved card or a pay-later account a way to pay in two taps, while everyone else continues with their email below the divider.
Each button opens a short payment sheet with only what that method needs: the saved card, a four-payment plan with dates, or a bank picker, plus where it ships, how fast and the total. Confirming shows progress and then a clear success or error, so nobody wonders whether they paid.
When to use it
Put it at the top of a cart or checkout page, or under the Add to cart button on a product page, where returning customers skip the form entirely.
Offer the methods your payment provider actually supports in the visitor's country and replace the neutral icons with official marks only where their brand rules allow.
Installation
Add the Express Checkout Buttons component to your project with the shadcn CLI. It lands in components/express-checkout-buttons.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/express-checkout-buttonsOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Express Checkout Buttons with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Express Checkout Buttons FAQ
- Why are there no wallet or card logos?
- Payment brands have strict rules for their marks, and the right set depends on your provider and region. The block ships with neutral icons and plain labels; swap in the official buttons your provider gives you.
- How do I hook up payment?
- onPay receives the method and the total. Return a promise: resolve when the payment succeeds and the sheet shows success; reject and it shows an error with a chance to retry. The spinner shows for at least about a second so it doesn't flash.
- What does Pay in 4 show?
- The total split into four equal payments with dates, the first due today. The confirm button reads Agree and pay first instalment, and success explains the remaining three.
- Can I choose which buttons appear?
- Yes, methods sets which ones and in what order. The first is drawn filled as the primary option, and the grid adapts to one, three or four buttons.
- Is it accessible?
- Buttons say what they'll pay and with what, the sheet is a modal dialog that takes focus and returns it, Escape and a click outside close it (except while confirming), choices are radio groups and the total is announced when it changes.
