License Key Required

No license key entered. Enter or update your key with php artisan news:license <key>, or purchase one at scriptgain.com.

Index

site.pay.index

All Templates

Status Shipped Default Shipped File resources/views/site/pay/index.blade.php

Open The Live Page

site.pay.index 120 lines

Not Checked Yet

<x-layouts.public title="Pay Your Bill" description="Pay your utility bill, permit fees and citations online.">
    @if ($isTestMode)
        <x-site.test-mode-banner />
    @endif

    <x-site.page-hero title="Pay Your Bill"
                      eyebrow="Online Payments"
                      icon="database"
                      subtitle="Pay a utility bill, permit fee or citation online. You do not need an account."
                      :crumbs="[['label' => 'Pay Your Bill']]" />

    @if (! $isReady)
        <x-site.section :divider="false">
            <x-site.payments-unavailable :supportEmail="$supportEmail" :supportPhone="$supportPhone" />
        </x-site.section>
    @else
        {{-- Pay a bill you have a reference for --}}
        <x-site.section title="Pay A Bill You Have Received"
                        subtitle="You will need the reference number printed on your bill, and the last name or ZIP code on the account.">
            @if ($intro)
                <p class="mb-8 max-w-3xl text-lg leading-relaxed text-slate-600">{{ $intro }}</p>
            @endif

            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($types as $type)
                    <a href="{{ route('site.pay.lookup', ['type' => $type->key]) }}"
                       class="group flex items-start gap-4 rounded-2xl bg-white p-6 ring-1 ring-slate-200 shadow-sm transition hover:ring-brand-300 hover:shadow-md">
                        <span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-200">
                            <x-icon :name="$type->icon" class="w-5 h-5" aria-hidden="true" />
                        </span>
                        <span class="min-w-0">
                            <span class="block font-semibold text-slate-900 group-hover:text-brand-800">{{ $type->label }}</span>
                            @if ($type->description)
                                <span class="mt-1 block text-sm leading-relaxed text-slate-600">{{ $type->description }}</span>
                            @endif
                            <span class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700">
                                Look Up A Bill
                                <x-icon name="chevron-right" class="w-4 h-4" aria-hidden="true" />
                            </span>
                        </span>
                    </a>
                @endforeach
            </div>
        </x-site.section>

        {{-- Pay without a bill reference --}}
        @if ($openTypes->count())
            <x-site.section tone="muted"
                            title="Pay Without A Bill Reference"
                            subtitle="For fees where you have not been sent a bill, such as a permit application or a facility rental.">
                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($openTypes as $type)
                        <a href="{{ route('site.pay.open', $type->key) }}"
                           class="group flex items-start gap-4 rounded-2xl bg-white p-6 ring-1 ring-slate-200 shadow-sm transition hover:ring-brand-300 hover:shadow-md">
                            <span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-seal-50 text-seal-700 ring-1 ring-seal-200">
                                <x-icon :name="$type->icon" class="w-5 h-5" aria-hidden="true" />
                            </span>
                            <span class="min-w-0">
                                <span class="block font-semibold text-slate-900 group-hover:text-brand-800">{{ $type->label }}</span>
                                @if ($type->description)
                                    <span class="mt-1 block text-sm leading-relaxed text-slate-600">{{ $type->description }}</span>
                                @endif
                                <span class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700">
                                    Make A Payment
                                    <x-icon name="chevron-right" class="w-4 h-4" aria-hidden="true" />
                                </span>
                            </span>
                        </a>
                    @endforeach
                </div>
            </x-site.section>
        @endif

        {{-- Reassurance and other ways to pay --}}
        <x-site.section title="How Online Payments Work">
            <div class="grid gap-8 lg:grid-cols-3">
                <div class="flex items-start gap-4">
                    <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-200">
                        <x-icon name="lock" class="w-5 h-5" aria-hidden="true" />
                    </span>
                    <div class="min-w-0">
                        <h3 class="font-semibold text-slate-900">Your Card Details Stay Private</h3>
                        <p class="mt-1 text-sm leading-relaxed text-slate-600">
                            Card details are entered directly with our payment processor and are never stored on
                            this website. We keep only the last four digits, so you can recognise your own payment.
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-200">
                        <x-icon name="envelope" class="w-5 h-5" aria-hidden="true" />
                    </span>
                    <div class="min-w-0">
                        <h3 class="font-semibold text-slate-900">You Get A Receipt</h3>
                        <p class="mt-1 text-sm leading-relaxed text-slate-600">
                            Every payment gets a reference number and a receipt you can download or have emailed
                            to you. Keep it: it is your proof of payment.
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-200">
                        <x-icon name="building" class="w-5 h-5" aria-hidden="true" />
                    </span>
                    <div class="min-w-0">
                        <h3 class="font-semibold text-slate-900">Other Ways To Pay</h3>
                        <p class="mt-1 text-sm leading-relaxed text-slate-600">
                            You can still pay in person at the town offices or by mail. Online payment is an
                            option, never a requirement.
                            @if ($supportPhone)
                                Questions: <a href="tel:{{ preg_replace('/[^0-9+]/', '', $supportPhone) }}" class="font-medium text-brand-700 hover:underline">{{ $supportPhone }}</a>.
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </x-site.section>
    @endif
</x-layouts.public>

Change Note

Optional. Shown in the version history so the next person knows why.

Saving runs the same check. An invalid template is refused, not stored.

Compiled PHP

What Blade turns your template into. This is what the syntax check parses.

Loading…

Available Variables And Components

A guide to what this template can use, derived from the shipped source. Click any item to insert it at your cursor. It is a helpful reference, not a runtime guarantee.

Always Available

Shared with every public page by the site layout.

Validation error bag. Always present. Pairs with @error('field').

All site settings as an array, e.g. $site['site_name'].

The municipality's short display name.

The full legal name, e.g. "City Of Springfield".

Main navigation items. Loop over it with @foreach.

The small utility links in the top bar.

The footer navigation links.

The Quick Links grid items.

The first few Quick Links, featured in the hero.

The current emergency alert, or null when none is live.

Up to eight departments listed in the footer.

The configured page-width class, e.g. max-w-7xl. Use on your outer container.

The current year, for the footer copyright line.

URL of the uploaded site logo, or null.

URL of the uploaded favicon, or null.

In This Template

Intro.

Is Ready.

Is Test Mode.

Open Types.

Support Email.

Support Phone.

Types.

Drop any of these in. Click to insert the opening tag at your cursor.

General

type, info, title

initials, src, name, size, md

color, neutral, dot

action, label, Record, modal

variant, primary, size, md, href, …

title, subtitle, padding, flush

name, action, method, POST, title, …

action, name, title, message, confirm, …

href, icon, danger

align, right, width

icon, folder, title, description

label, for, hint, error, required

href, icon, title, variant, secondary, …

name

type, text

name, title, subtitle, icon, tone, …

href, icon, active

title, subtitle, icon, back

title, subtitle, href, linkLabel

ids

id, label, Row

items

label, value, icon, trend, trendColor, …

color, neutral, pulse, label

name

flush

tabs, default

name, checked, label, description

Admin Panel

title, message, icon, folder, href, …

tree, active, rootLabel, rootHref

title, subtitle, icon, edit, action, …

title, icon, folder, subtitle, records, …

search, placeholder, createHref, createLabel

edit, delete, preview, name, title, …

record, kind, Page

Layouts

title, shellMaxWidth

title, description, heroless, maxWidth

Records

name, action, reference, trigger, icon

Site (Public)

href, title, description, icon, meta, …

title, message, icon, folder

title, subtitle, eyebrow, icon, crumbs, …

supportEmail, supportPhone

disclaimer, takedownContact, retentionDays, compact

title, subtitle, href, linkLabel, tone, …

maxWidth

Common Blade

Print a value, safely escaped. The default choice.

Print raw HTML. Only for content you trust.

Show something conditionally.

Loop over a collection.

Loop, with a fallback when the collection is empty.

Show a validation message for a field.

A small block of PHP. Never on line 1. Keep logic out of templates.

A comment that never reaches the browser.

Civic Helpers

Build a URL to a named route, e.g. a department page.

Link to a single news post.

Turn a stored upload path into a public URL.

A cache-busted URL for a bundled asset.

Read a config value, e.g. the site width class.

Build an absolute URL to a path.

No History Yet

Every save, revert, and reset of this template is recorded here, with a one-click way back to any of them.

The Template That Shipped With The Product

Read only. This is what Reset To Default puts back.

<x-layouts.public title="Pay Your Bill" description="Pay your utility bill, permit fees and citations online.">
    @if ($isTestMode)
        <x-site.test-mode-banner />
    @endif

    <x-site.page-hero title="Pay Your Bill"
                      eyebrow="Online Payments"
                      icon="database"
                      subtitle="Pay a utility bill, permit fee or citation online. You do not need an account."
                      :crumbs="[['label' => 'Pay Your Bill']]" />

    @if (! $isReady)
        <x-site.section :divider="false">
            <x-site.payments-unavailable :supportEmail="$supportEmail" :supportPhone="$supportPhone" />
        </x-site.section>
    @else
        {{-- Pay a bill you have a reference for --}}
        <x-site.section title="Pay A Bill You Have Received"
                        subtitle="You will need the reference number printed on your bill, and the last name or ZIP code on the account.">
            @if ($intro)
                <p class="mb-8 max-w-3xl text-lg leading-relaxed text-slate-600">{{ $intro }}</p>
            @endif

            <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                @foreach ($types as $type)
                    <a href="{{ route('site.pay.lookup', ['type' => $type->key]) }}"
                       class="group flex items-start gap-4 rounded-2xl bg-white p-6 ring-1 ring-slate-200 shadow-sm transition hover:ring-brand-300 hover:shadow-md">
                        <span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-200">
                            <x-icon :name="$type->icon" class="w-5 h-5" aria-hidden="true" />
                        </span>
                        <span class="min-w-0">
                            <span class="block font-semibold text-slate-900 group-hover:text-brand-800">{{ $type->label }}</span>
                            @if ($type->description)
                                <span class="mt-1 block text-sm leading-relaxed text-slate-600">{{ $type->description }}</span>
                            @endif
                            <span class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700">
                                Look Up A Bill
                                <x-icon name="chevron-right" class="w-4 h-4" aria-hidden="true" />
                            </span>
                        </span>
                    </a>
                @endforeach
            </div>
        </x-site.section>

        {{-- Pay without a bill reference --}}
        @if ($openTypes->count())
            <x-site.section tone="muted"
                            title="Pay Without A Bill Reference"
                            subtitle="For fees where you have not been sent a bill, such as a permit application or a facility rental.">
                <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                    @foreach ($openTypes as $type)
                        <a href="{{ route('site.pay.open', $type->key) }}"
                           class="group flex items-start gap-4 rounded-2xl bg-white p-6 ring-1 ring-slate-200 shadow-sm transition hover:ring-brand-300 hover:shadow-md">
                            <span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-seal-50 text-seal-700 ring-1 ring-seal-200">
                                <x-icon :name="$type->icon" class="w-5 h-5" aria-hidden="true" />
                            </span>
                            <span class="min-w-0">
                                <span class="block font-semibold text-slate-900 group-hover:text-brand-800">{{ $type->label }}</span>
                                @if ($type->description)
                                    <span class="mt-1 block text-sm leading-relaxed text-slate-600">{{ $type->description }}</span>
                                @endif
                                <span class="mt-3 inline-flex items-center gap-1.5 text-sm font-semibold text-brand-700">
                                    Make A Payment
                                    <x-icon name="chevron-right" class="w-4 h-4" aria-hidden="true" />
                                </span>
                            </span>
                        </a>
                    @endforeach
                </div>
            </x-site.section>
        @endif

        {{-- Reassurance and other ways to pay --}}
        <x-site.section title="How Online Payments Work">
            <div class="grid gap-8 lg:grid-cols-3">
                <div class="flex items-start gap-4">
                    <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-200">
                        <x-icon name="lock" class="w-5 h-5" aria-hidden="true" />
                    </span>
                    <div class="min-w-0">
                        <h3 class="font-semibold text-slate-900">Your Card Details Stay Private</h3>
                        <p class="mt-1 text-sm leading-relaxed text-slate-600">
                            Card details are entered directly with our payment processor and are never stored on
                            this website. We keep only the last four digits, so you can recognise your own payment.
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-200">
                        <x-icon name="envelope" class="w-5 h-5" aria-hidden="true" />
                    </span>
                    <div class="min-w-0">
                        <h3 class="font-semibold text-slate-900">You Get A Receipt</h3>
                        <p class="mt-1 text-sm leading-relaxed text-slate-600">
                            Every payment gets a reference number and a receipt you can download or have emailed
                            to you. Keep it: it is your proof of payment.
                        </p>
                    </div>
                </div>
                <div class="flex items-start gap-4">
                    <span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-brand-50 text-brand-700 ring-1 ring-brand-200">
                        <x-icon name="building" class="w-5 h-5" aria-hidden="true" />
                    </span>
                    <div class="min-w-0">
                        <h3 class="font-semibold text-slate-900">Other Ways To Pay</h3>
                        <p class="mt-1 text-sm leading-relaxed text-slate-600">
                            You can still pay in person at the town offices or by mail. Online payment is an
                            option, never a requirement.
                            @if ($supportPhone)
                                Questions: <a href="tel:{{ preg_replace('/[^0-9+]/', '', $supportPhone) }}" class="font-medium text-brand-700 hover:underline">{{ $supportPhone }}</a>.
                            @endif
                        </p>
                    </div>
                </div>
            </div>
        </x-site.section>
    @endif
</x-layouts.public>

Blade In One Screen

The directives you will use most.

{{ $variable }}

Print a value, escaped. Safe by default.

{!! $html !!}

Print raw HTML. Only for content you trust.

@if / @else / @endif

Show something conditionally.

@foreach / @endforeach

Loop over a collection.

<x-card>

Use a shared component. Every component in Shared Components is available.

{{-- comment --}}

A comment that never reaches the browser.

House Rules

Follow these and your edits will survive updates.

Never start line 1 with @php. Blade mis-parses it and the page fails. The editor refuses to save it.
Keep logic out of templates. If you need a calculation, it belongs in a composer or component class, not here.
The shipped file is never modified. Reset To Default always gets you back.
Every save is versioned. You can revert to any earlier version in one click.
Press Tab inside the editor to indent rather than jump to the next field.