Payment Methods
An account settings card listing saved payment cards with default badge, edit/remove actions, and an add-card button.
Preview
resources/views/blocks/payment-methods.blade.php
@props([
'heading' => 'Payment methods',
'subheading' => 'Manage the cards used for purchases and subscriptions.',
'cards' => null,
])
@php
$cards ??= [
[
'brand' => 'visa',
'label' => 'Visa',
'number' => '4242 4242 4242 4242',
'holder' => 'Avery Stone',
'expiry' => '08/27',
'default' => true,
],
[
'brand' => 'mastercard',
'label' => 'Mastercard',
'number' => '5454 5454 5454 8210',
'holder' => 'Avery Stone',
'expiry' => '11/26',
'default' => false,
],
[
'brand' => 'amex',
'label' => 'American Express',
'number' => '3782 822463 10005',
'holder' => 'Acme Inc.',
'expiry' => '03/28',
'default' => false,
],
];
@endphp
<x-ui.section
aria-label="{{ __('Payment methods') }}"
data-slot="payment-methods"
space="lg" {{ $attributes }}
>
<x-ui.container gutter="sm">
<x-ui.card class="mx-auto max-w-2xl p-0">
{{-- Header --}}
<header class="flex flex-col gap-2 p-6 pb-4">
<h2 class="text-xl font-semibold tracking-tight">{{ __($heading) }}</h2>
@if ($subheading)
<p class="text-pretty text-sm text-muted-foreground">{{ __($subheading) }}</p>
@endif
</header>
<x-ui.separator />
{{-- Saved cards --}}
<ul role="list" class="flex flex-col">
@foreach ($cards as $i => $card)
@if ($i > 0)
<li role="presentation" aria-hidden="true">
<x-ui.separator />
</li>
@endif
<li class="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
<div class="flex min-w-0 items-center gap-4">
{{-- Size via a wrapper: credit-card is w-full and uses a
plain attribute merge, so a w-24 on it wouldn't win. --}}
<div class="w-24 shrink-0 sm:w-28">
<x-ui.credit-card
:brand="$card['brand']"
:number="$card['number']"
:holder="$card['holder']"
:expiry="$card['expiry']"
variant="muted"
role="img"
aria-hidden="true"
class="rounded-md p-2 shadow-sm"
/>
</div>
<div class="min-w-0">
<div class="flex flex-wrap items-center gap-2">
<p class="text-sm font-semibold text-foreground">
{{ __($card['label']) }} <span class="text-muted-foreground">•••• {{ \Illuminate\Support\Str::substr(preg_replace('/\D/', '', $card['number']), -4) }}</span>
</p>
@if (!empty($card['default']))
<x-ui.badge variant="secondary" size="sm">{{ __('Default') }}</x-ui.badge>
@endif
</div>
<p class="mt-2 text-sm text-muted-foreground">
{{ __('Expires :date', ['date' => $card['expiry']]) }}, {{ $card['holder'] }}
</p>
</div>
</div>
<div class="flex shrink-0 items-center gap-2">
<x-ui.button
variant="ghost"
size="sm"
type="button"
aria-label="{{ __('Edit :label card ending :last4', ['label' => __($card['label']), 'last4' => \Illuminate\Support\Str::substr(preg_replace('/\D/', '', $card['number']), -4)]) }}"
>
<x-slot:icon>
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z" />
</svg>
</x-slot:icon>
{{ __('Edit') }}
</x-ui.button>
<x-ui.button
variant="outline"
size="sm"
type="button"
class="text-destructive hover:text-destructive"
aria-label="{{ __('Remove :label card ending :last4', ['label' => __($card['label']), 'last4' => \Illuminate\Support\Str::substr(preg_replace('/\D/', '', $card['number']), -4)]) }}"
>
<x-slot:icon>
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 6h18" />
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
<path d="M10 11v6M14 11v6" />
</svg>
</x-slot:icon>
{{ __('Remove') }}
</x-ui.button>
</div>
</li>
@endforeach
</ul>
<x-ui.separator />
{{-- Footer --}}
<footer class="p-6 pt-4">
<x-ui.button variant="outline" type="button" class="w-full sm:w-auto">
<x-slot:icon>
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14" />
</svg>
</x-slot:icon>
{{ __('Add payment method') }}
</x-ui.button>
</footer>
</x-ui.card>
</x-ui.container>
</x-ui.section>Installation
terminal
php artisan ui:add blocks/payment-methodsRegistry contract
Install confidence
php artisan ui:add blocks/payment-methods
writes only the generated targets below. The CLI validates each file hash before writing and
prompts before replacing local changes unless --force is used.
- Version
- 1.0.5
- License
- open
- Stability
- stable
- Contract
- v1
- Foundation
- ≥ 1.0.0
| Type | Generated target |
|---|---|
| blade | resources/views/blocks/payment-methods.blade.php |
Registry dependencies
badge
button
card
container
credit-card
section
separator
Package dependencies
composer: jml/brok:^0.2
Use with AI
A brief for your coding agent: what the block is, the install command, how to render it, its props and the rules. Copy it, or open a prompt about this block in an assistant.
payment-methods.md
# Brok UI block: Payment Methods (`payment-methods`)
An account settings card listing saved payment cards with default badge, edit/remove actions, and an add-card button.
Brok UI is a Laravel Blade registry. `ui:add` copies this block into the app as plain Blade the app owns; it composes installed `<brok:*>` primitives and semantic design tokens.
## Install
```bash
php artisan ui:add blocks/payment-methods
```
## Render it
```blade
<x-blocks.payment-methods />
```
## Props
- `heading` (string, default `Payment methods`) — Card heading text.
- `subheading` (string, default `Manage the cards used for purchases and subscriptions.`) — Supporting copy under the heading.
- `cards` (mixed|null, default `null`) — Array of saved cards ({brand, label, number, holder, expiry, default}); null falls back to sample cards.
## Use when
- Listing a customer's saved payment cards in account settings with a default badge and per-card edit/remove actions.
- Offering an add-payment-method action alongside the existing saved cards.
## Avoid when
- Collecting a new card during checkout; use a checkout payment form instead of this settings list.
## Rules
- Render the installed block with `<x-blocks.payment-methods />` and pass data through its props; edit the copied file only for structural changes.
- Keep the semantic design tokens (`bg-background`, `text-muted-foreground`); never swap in raw colour utilities.
- Keep the `data-slot` attributes and the logical (start/end) spacing so the markup still mirrors under `dir="rtl"`.
## Links
- Docs: https://brokui.dev/blocks/payment-methods
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/payment-methods.json
Ask about Payment Methods in
Working in Claude Code, Cursor or Codex? Give the agent the whole registry through the MCP server or the Brok UI skill.
Guidance
Use when
- Listing a customer's saved payment cards in account settings with a default badge and per-card edit/remove actions.
- Offering an add-payment-method action alongside the existing saved cards.
Avoid when
- Collecting a new card during checkout; use a checkout payment form instead of this settings list.
Anti-patterns
- Do not replace semantic props with conflicting utility classes.
- Do not remove labels, focus styles, or state attributes.
- Anatomy
Usage
Render the block as a component, passing data where useful:
resources/views/welcome.blade.php
<x-blocks.payment-methods />Built from primitives
This block composes installed <brok:*> primitives and semantic design
tokens only — it does not reimplement any primitive. Re-theme it (light, dark, admin, customer) by
editing CSS variables; flip the preview to RTL to confirm it mirrors.
Source
The exact, editable file ui:add writes
into your app. The preview above renders this same source — there are no preview-only blocks.
resources/views/blocks/payment-methods.blade.php
@props([
'heading' => 'Payment methods',
'subheading' => 'Manage the cards used for purchases and subscriptions.',
'cards' => null,
])
@php
$cards ??= [
[
'brand' => 'visa',
'label' => 'Visa',
'number' => '4242 4242 4242 4242',
'holder' => 'Avery Stone',
'expiry' => '08/27',
'default' => true,
],
[
'brand' => 'mastercard',
'label' => 'Mastercard',
'number' => '5454 5454 5454 8210',
'holder' => 'Avery Stone',
'expiry' => '11/26',
'default' => false,
],
[
'brand' => 'amex',
'label' => 'American Express',
'number' => '3782 822463 10005',
'holder' => 'Acme Inc.',
'expiry' => '03/28',
'default' => false,
],
];
@endphp
<x-ui.section
aria-label="{{ __('Payment methods') }}"
data-slot="payment-methods"
space="lg" {{ $attributes }}
>
<x-ui.container gutter="sm">
<x-ui.card class="mx-auto max-w-2xl p-0">
{{-- Header --}}
<header class="flex flex-col gap-2 p-6 pb-4">
<h2 class="text-xl font-semibold tracking-tight">{{ __($heading) }}</h2>
@if ($subheading)
<p class="text-pretty text-sm text-muted-foreground">{{ __($subheading) }}</p>
@endif
</header>
<x-ui.separator />
{{-- Saved cards --}}
<ul role="list" class="flex flex-col">
@foreach ($cards as $i => $card)
@if ($i > 0)
<li role="presentation" aria-hidden="true">
<x-ui.separator />
</li>
@endif
<li class="flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between">
<div class="flex min-w-0 items-center gap-4">
{{-- Size via a wrapper: credit-card is w-full and uses a
plain attribute merge, so a w-24 on it wouldn't win. --}}
<div class="w-24 shrink-0 sm:w-28">
<x-ui.credit-card
:brand="$card['brand']"
:number="$card['number']"
:holder="$card['holder']"
:expiry="$card['expiry']"
variant="muted"
role="img"
aria-hidden="true"
class="rounded-md p-2 shadow-sm"
/>
</div>
<div class="min-w-0">
<div class="flex flex-wrap items-center gap-2">
<p class="text-sm font-semibold text-foreground">
{{ __($card['label']) }} <span class="text-muted-foreground">•••• {{ \Illuminate\Support\Str::substr(preg_replace('/\D/', '', $card['number']), -4) }}</span>
</p>
@if (!empty($card['default']))
<x-ui.badge variant="secondary" size="sm">{{ __('Default') }}</x-ui.badge>
@endif
</div>
<p class="mt-2 text-sm text-muted-foreground">
{{ __('Expires :date', ['date' => $card['expiry']]) }}, {{ $card['holder'] }}
</p>
</div>
</div>
<div class="flex shrink-0 items-center gap-2">
<x-ui.button
variant="ghost"
size="sm"
type="button"
aria-label="{{ __('Edit :label card ending :last4', ['label' => __($card['label']), 'last4' => \Illuminate\Support\Str::substr(preg_replace('/\D/', '', $card['number']), -4)]) }}"
>
<x-slot:icon>
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
<path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4Z" />
</svg>
</x-slot:icon>
{{ __('Edit') }}
</x-ui.button>
<x-ui.button
variant="outline"
size="sm"
type="button"
class="text-destructive hover:text-destructive"
aria-label="{{ __('Remove :label card ending :last4', ['label' => __($card['label']), 'last4' => \Illuminate\Support\Str::substr(preg_replace('/\D/', '', $card['number']), -4)]) }}"
>
<x-slot:icon>
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M3 6h18" />
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
<path d="M10 11v6M14 11v6" />
</svg>
</x-slot:icon>
{{ __('Remove') }}
</x-ui.button>
</div>
</li>
@endforeach
</ul>
<x-ui.separator />
{{-- Footer --}}
<footer class="p-6 pt-4">
<x-ui.button variant="outline" type="button" class="w-full sm:w-auto">
<x-slot:icon>
<svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M12 5v14M5 12h14" />
</svg>
</x-slot:icon>
{{ __('Add payment method') }}
</x-ui.button>
</footer>
</x-ui.card>
</x-ui.container>
</x-ui.section>
Ownership & lifecycle
Owner, release state, review evidence and adoption for this item.
- Owner
- Platform UI (@JoshJML)
- Current version
-
1.0.5 - Status
- Stable
- License
-
open - Deprecation
- Not deprecated
- Contract
-
v1 - Foundation
-
≥ 1.0.0