License Key Required
No license key entered.
Enter or update your key with php artisan news:license <key>,
or purchase one at scriptgain.com.
Review
site.pay.review
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
- Bill.
- Is Ready.
- Is Test Mode.
- Support Email.
- Support Phone.
Drop any of these in. Click to insert the opening tag at your cursor.
General
Admin Panel
Layouts
Records
Site (Public)
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="Review Your Bill">
@if ($isTestMode)
<x-site.test-mode-banner />
@endif
<x-site.page-hero title="Review Your Bill"
eyebrow="Online Payments"
icon="file-text"
subtitle="Check the details below, then continue to payment."
:crumbs="[['label' => 'Pay Your Bill', 'href' => route('site.pay.index')], ['label' => 'Review']]" />
<x-site.section :divider="false">
@if (! $isReady)
<x-site.payments-unavailable :supportEmail="$supportEmail" :supportPhone="$supportPhone" />
@else
<div class="mx-auto max-w-2xl">
@error('payment')
<div role="alert" class="mb-6 rounded-xl bg-rose-50 px-4 py-3 text-sm text-rose-800 ring-1 ring-rose-200">
{{ $message }}
</div>
@enderror
{{-- The bill --}}
<div class="overflow-hidden rounded-2xl bg-white ring-1 ring-slate-200 shadow-sm">
<div class="flex flex-wrap items-start justify-between gap-3 border-b border-slate-100 bg-slate-50/70 px-6 py-4">
<div class="min-w-0">
<p class="text-xs font-semibold uppercase tracking-wide text-slate-500">Bill Reference</p>
<p class="mt-0.5 font-semibold tabular text-slate-900">{{ $bill->reference }}</p>
</div>
<x-badge :color="$bill->statusColor()" dot>{{ $bill->isOverdue() ? 'Overdue' : $bill->statusLabel() }}</x-badge>
</div>
<dl class="divide-y divide-slate-100">
<div class="flex items-start justify-between gap-4 px-6 py-4">
<dt class="text-sm text-slate-500">What This Is For</dt>
<dd class="text-right text-sm font-medium text-slate-900">
{{ $bill->type?->label }}
@if ($bill->description)
<span class="block font-normal text-slate-600">{{ $bill->description }}</span>
@endif
</dd>
</div>
@if ($bill->account_number)
<div class="flex items-start justify-between gap-4 px-6 py-4">
<dt class="text-sm text-slate-500">Account Number</dt>
<dd class="text-right text-sm tabular text-slate-900">{{ $bill->account_number }}</dd>
</div>
@endif
@if ($bill->payer_name)
<div class="flex items-start justify-between gap-4 px-6 py-4">
<dt class="text-sm text-slate-500">Billed To</dt>
<dd class="text-right text-sm text-slate-900">{{ $bill->payer_name }}</dd>
</div>
@endif
<div class="flex items-start justify-between gap-4 px-6 py-4">
<dt class="text-sm text-slate-500">Due Date</dt>
<dd class="text-right text-sm {{ $bill->isOverdue() ? 'font-semibold text-rose-700' : 'text-slate-900' }}">
{{ $bill->dueLabel() }}
</dd>
</div>
<div class="flex items-start justify-between gap-4 px-6 py-4">
<dt class="text-sm text-slate-500">Bill Total</dt>
<dd class="text-right text-sm tabular text-slate-900">{{ $bill->amountFormatted() }}</dd>
</div>
@if ($bill->amount_paid_cents > 0)
<div class="flex items-start justify-between gap-4 px-6 py-4">
<dt class="text-sm text-slate-500">Already Paid</dt>
<dd class="text-right text-sm tabular text-emerald-700">- {{ $bill->paidFormatted() }}</dd>
</div>
@endif
</dl>
<div class="flex items-center justify-between gap-4 border-t-2 border-slate-200 bg-brand-50/60 px-6 py-5">
<span class="text-base font-semibold text-slate-900">Amount To Pay Now</span>
<span class="text-2xl font-semibold tabular text-brand-800">{{ $bill->balanceFormatted() }}</span>
</div>
</div>
{{-- Contact details for the receipt --}}
<form method="POST" action="{{ route('site.pay.start') }}" class="mt-6 rounded-2xl bg-white p-6 sm:p-8 ring-1 ring-slate-200 shadow-sm">
@csrf
<h2 class="text-base font-semibold text-slate-900">Where Should We Send Your Receipt?</h2>
<p class="mt-1 text-sm text-slate-600">Optional, but it is the easiest way to keep proof of payment.</p>
<div class="mt-5 grid gap-5 sm:grid-cols-2">
<div>
<label for="payer_name" class="block text-sm font-medium text-slate-700">Your Name</label>
<input id="payer_name" name="payer_name" type="text" maxlength="150"
value="{{ old('payer_name', $bill->payer_name) }}" autocomplete="name"
class="mt-1.5 block w-full rounded-lg border-0 py-2.5 px-3 text-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-brand-600">
</div>
<div>
<label for="payer_email" class="block text-sm font-medium text-slate-700">Email Address</label>
<input id="payer_email" name="payer_email" type="email" maxlength="150"
value="{{ old('payer_email', $bill->payer_email) }}" autocomplete="email"
class="mt-1.5 block w-full rounded-lg border-0 py-2.5 px-3 text-sm ring-1 ring-inset ring-slate-300 focus:ring-2 focus:ring-brand-600">
@error('payer_email')
<p class="mt-1.5 text-sm text-rose-600">{{ $message }}</p>
@enderror
</div>
</div>
<div class="section-divider mt-6 pt-6 flex flex-wrap items-center justify-between gap-3">
<a href="{{ route('site.pay.lookup') }}"
class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-600 transition hover:text-brand-700">
<x-icon name="chevron-left" class="w-4 h-4" aria-hidden="true" />
Look Up A Different Bill
</a>
<button type="submit"
class="inline-flex items-center gap-2 rounded-lg bg-brand-700 px-6 py-3.5 text-base font-semibold text-white transition hover:bg-brand-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-500 focus-visible:ring-offset-2">
Continue To Payment
<x-icon name="chevron-right" class="w-4 h-4" aria-hidden="true" />
</button>
</div>
</form>
</div>
@endif
</x-site.section>
</x-layouts.public>
Blade In One Screen
The directives you will use most.
- Print a value, escaped. Safe by default.
- Print raw HTML. Only for content you trust.
- Show something conditionally.
- Loop over a collection.
- Use a shared component. Every component in Shared Components is available.
- A comment that never reaches the browser.
{{ $variable }}
{!! $html !!}
@if / @else / @endif
@foreach / @endforeach
<x-card>
{{-- comment --}}
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.