Bento

Bento Payments

Pronew

A hub with up to five payment methods wired into it and payments pulsing along the wires.

Cards

Wallets

Bank

QR code

Invoices

Every way to pay

Cards, bank debits, wallets and QR codes through one integration, settled to one balance.

Installation

npx shadcn@latest add @blank-pro/bento-payments

Needs a Blank Pro licence key and the @blank-pro registry. Set up Pro access

Usage

import { BentoPayments } from "@/components/ui/bento-payments"

<BentoPayments
  icon={<WalletIcon />}
  methods={[
    { label: "Cards", icon: <CreditCardIcon /> },
    { label: "Bank", icon: <LandmarkIcon /> },
  ]}
/>

Methods fill the slots in order: left, right, lower left, lower right, below. The stage is drawn at a fixed 336 × 208 px so the wires stay crisp, and it is centered in the card. Use generic icons, not payment brand marks.