Patterns

Connection card

A product card for a payment provider / connection. Shows the provider logo + name and switches between two states: not connected (type badge + Connect) and connected (selection checkbox + copy/menu actions + Active status + the payment methods routed through it).

Updated Jul 17, 2026 by Juan Pablo Turina

Anatomy

Both states are a Card with a header (logo + name, plus a checkbox and actions when connected) and a bordered footer. Not connected: type Badge + Connect Button. Connected: Active StatusBadge + payment-method logos + a +N overflow button. Hover lifts the card (primary border + shadow-xl).

Adyen

This is a card description.

Active

1
Provider logo
40px IconWrapper (logos variant) holding the provider mark. Pass your own via the logo prop.
2
Title + description
CardTitle (provider name). The description line only shows in the connected state.
3
Selection + actions
Connected only: a Checkbox on the left, Copy + overflow menu on the right.
4
Footer badge
Not connected: an outline type Badge (e.g. Processor). Connected: a green Active StatusBadge.
5
Payment methods
Connected only: the method logos routed through this connection + a +N overflow Button.

States

Not connected

Logo + name + type badge + a Connect button. Use for a provider the merchant has not linked yet.

Adyen

Processor

<ConnectionCard name="Adyen" badge="Processor" onConnect={connect} />

Connected

Selection checkbox + logo + copy/menu actions, an Active status, and the payment methods routed through the connection.

Adyen

This is a card description.

Active

<ConnectionCard
  connected
  name="Adyen"
  description="This is a card description."
  statusLabel="Active"
  extraCount={5}
/>

Import

Copy this import line at the top of the file where you compose this molecule.

A molecule composed of Card + Badge + Checkbox + IconWrapper. Drop it in with defaults, or drive both states with props.

import { ConnectionCard } from "@/components/patterns/connection-card";

Props

Everything else is forwarded to the underlying elements via ...props.

Prop	Type	Default	Description
name	string	'Adyen'	Provider name shown as the card title.
provider	string	'adyen'	Slug for the Yuno CDN logo (https://icons.prod.y.uno/{provider}_logosimbolo.png). Verified slugs: stripe / adyen / dlocal / payu / mercadopago / 2c2p / visa / mastercard / amex. Ignored when `logo` is passed.
logo	ReactNode	CDN logo for `provider`	Override the provider logo. Only pass this when you need a custom brand mark; otherwise leave the CDN handle it via `provider`.
connected	boolean	false	Switches the whole layout to the connected state.
badge	string	'Processor'	Type badge in the footer (not-connected state).
connectLabel	string	'Connect'	Label of the Connect button (not-connected state).
onConnect	() => void	—	Connect button handler (not-connected state).
description	string	'This is a card description.'	Description line under the title (connected state).
defaultChecked	boolean	true	Initial state of the selection checkbox (connected state).
onCheckedChange	(checked: boolean) => void	—	Fires when the selection checkbox toggles.
onCopy	() => void	—	Copy action handler (connected state).
onMenu	() => void	—	Overflow menu handler (connected state).
statusLabel	string	'Active'	Status badge label (connected state).
paymentMethods	ReactNode[]	3 demo tiles	Payment-method logos routed through the connection.
extraCount	number	5	"+N" overflow count. Set 0 to hide the button.
onExtraClick	() => void	—	Handler for the +N overflow button.
className	string	—	Extra classes merged onto the Card.

Cross-links to the atoms this molecule composes and sibling patterns.

CardThe atom this molecule is built on.
BadgeThe type + status badges in the footer.
Icon wrapperThe 40px logo surface.