Checkout

Open source

Checkout pages — a contact/shipping/payment form beside a sticky order-summary card with promo code and totals.

4 of 4

resources/views/blocks/checkout-express.blade.php Blade

@props([
    'action'    => '#',
    'currency'  => '$',
    'amount'    => '49.00',
    'itemCount' => 2,
])

@php
    $wallets = [
        ['value' => 'apple_pay', 'label' => 'Apple Pay', 'svg' => '<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.8-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>'],
        ['value' => 'google_pay', 'label' => 'Google Pay', 'svg' => '<path d="M12 11v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57C21.36 19.92 22.56 17.1 22.56 13.75c0-.78-.07-1.53-.2-2.25H12z"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/>'],
        ['value' => 'paypal', 'label' => 'PayPal', 'svg' => '<path d="M7.08 21.34H2.47a.64.64 0 0 1-.63-.74L4.94.9C5.03.38 5.47 0 6 0h7.46c2.57 0 4.58.54 5.69 1.81 1.01 1.15 1.3 2.42 1.01 4.29-.02.14-.05.29-.08.44-.98 5.05-4.35 6.8-8.65 6.8H9.24c-.52 0-.97.38-1.05.9l-1.11 7.1z"/>'],
    ];
@endphp

<x-ui.section space="md" {{ $attributes }}>
    <div class="mx-auto max-w-md px-4">
        <x-ui.card>
            <x-ui.card.header>
                <x-ui.card.title>{{ __('Express checkout') }}</x-ui.card.title>
                <x-ui.card.description>{{ __('Complete your purchase instantly.') }}</x-ui.card.description>
            </x-ui.card.header>
            <x-ui.card.content class="space-y-6">
                <form method="POST" action="{{ $action }}" class="space-y-2">
                    @csrf
                    @foreach ($wallets as $w)
                        <button type="submit" name="intent" value="{{ $w['value'] }}" class="flex w-full items-center justify-center gap-2 rounded-md border border-input bg-transparent py-2 text-sm font-medium text-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2">
                            <svg viewBox="0 0 24 24" fill="currentColor" class="size-5 shrink-0" aria-hidden="true">{!! $w['svg'] !!}</svg>
                            <span>{{ __($w['label']) }}</span>
                        </button>
                    @endforeach
                </form>

                <div class="flex items-center gap-4">
                    <x-ui.separator class="flex-1" />
                    <span class="shrink-0 text-xs text-muted-foreground">{{ __('or pay with card') }}</span>
                    <x-ui.separator class="flex-1" />
                </div>

                <form method="POST" action="{{ $action }}" id="checkout-express-card-form" class="space-y-4">
                    @csrf
                    <x-ui.field>
                        <x-ui.label for="express-email" required>{{ __('Email') }}</x-ui.label>
                        <x-ui.input id="express-email" type="email" name="email" autocomplete="email" required placeholder="you@example.com" />
                    </x-ui.field>
                    <x-ui.field>
                        <x-ui.label for="express-card-number" required>{{ __('Card number') }}</x-ui.label>
                        <x-ui.input id="express-card-number" type="text" name="card_number" inputmode="numeric" autocomplete="cc-number" required placeholder="1234 5678 9012 3456" />
                    </x-ui.field>
                    <div class="grid grid-cols-2 gap-4">
                        <x-ui.field>
                            <x-ui.label for="express-expiry" required>{{ __('Expiry') }}</x-ui.label>
                            <x-ui.input id="express-expiry" type="text" name="card_expiry" inputmode="numeric" autocomplete="cc-exp" required placeholder="MM / YY" />
                        </x-ui.field>
                        <x-ui.field>
                            <x-ui.label for="express-cvc" required>{{ __('CVC') }}</x-ui.label>
                            <x-ui.input id="express-cvc" type="text" name="card_cvc" inputmode="numeric" autocomplete="cc-csc" required placeholder="123" />
                        </x-ui.field>
                    </div>
                    <x-ui.field>
                        <x-ui.label for="express-card-name" required>{{ __('Name on card') }}</x-ui.label>
                        <x-ui.input id="express-card-name" type="text" name="card_name" autocomplete="cc-name" required placeholder="Jane Smith" />
                    </x-ui.field>
                    <x-ui.field>
                        <x-ui.label for="express-postcode" required>{{ __('Postcode / ZIP') }}</x-ui.label>
                        <x-ui.input id="express-postcode" type="text" name="postal_code" autocomplete="postal-code" required placeholder="SW1A 1AA" />
                    </x-ui.field>

                    <x-ui.separator />

                    <div class="flex items-center justify-between">
                        <span class="flex items-center gap-2 text-sm text-muted-foreground">{{ __('Total') }} <x-ui.badge variant="secondary" size="sm">{{ $itemCount }} {{ __('items') }}</x-ui.badge></span>
                        <span class="text-base font-bold text-foreground">{{ $currency }}{{ $amount }}</span>
                    </div>

                    <x-ui.button type="submit" class="w-full">{{ __('Pay') }} {{ $currency }}{{ $amount }}</x-ui.button>
                </form>

                <p class="flex items-center justify-center gap-2 text-xs text-muted-foreground">
                    <svg class="size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="5" y="11" width="14" height="10" rx="2" /><path d="M8 11V7a4 4 0 0 1 8 0v4" /></svg>
                    {{ __('Secure checkout — 256-bit SSL encrypted.') }}
                </p>
            </x-ui.card.content>
        </x-ui.card>
    </div>
</x-ui.section>

Installation

terminal

php artisan ui:add blocks/checkout-express

Installs these dependencies automatically:

badge button card field input label section separator

Registry contract

Install confidence

php artisan ui:add blocks/checkout-express 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/checkout-express.blade.php

Registry dependencies

badge button card field input label 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.

checkout-express.md

# Brok UI block: Checkout Express (`checkout-express`)

A single-column express checkout with wallet pay buttons, a card form and a total, in a compact card.

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/checkout-express
```

## Render it

```blade
<x-blocks.checkout-express />
```

## Props

- `action` (string, default `#`)
- `currency` (string, default `$`)
- `amount` (string, default `49.00`)
- `item-count` (int, default `2`)

## Use when

- Checking a small cart out on a single compact card with wallet pay buttons (Apple Pay, Google Pay, PayPal) above a card form.
- Keeping the whole flow to one column and one total for a fast, low-friction purchase.

## Avoid when

- Use checkout-two-column for a full shipping-and-payment checkout, or checkout-subscription for a subscription billing-cycle checkout.

## Rules

- Render the installed block with `<x-blocks.checkout-express />` 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/checkout-express
- Registry JSON (files, props, contract): https://brokui.dev/r/open/blocks/checkout-express.json

Ask about Checkout Express 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

Checking a small cart out on a single compact card with wallet pay buttons (Apple Pay, Google Pay, PayPal) above a card form.
Keeping the whole flow to one column and one total for a fast, low-friction purchase.

Avoid when

Use checkout-two-column for a full shipping-and-payment checkout, or checkout-subscription for a subscription billing-cycle checkout.

Anti-patterns

Do not replace semantic props with conflicting utility classes.
Do not remove labels, focus styles, or state attributes.

Usage

Render the block as a component, passing data where useful:

resources/views/welcome.blade.php Blade

<x-blocks.checkout-express />

Built from primitives

Composes <brok:*> Semantic tokens Re-themeable RTL-ready

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.