Blade Component

The quickest way to put a QR on a page.

<x-raast-qr amount="2500" />

Attributes

Attribute	Description
iban	Destination IBAN. Falls back to config('raast-qr.iban').
amount	Amount in PKR. Omit for a static code.
expiry	YYYY-MM-DD, YYYY-MM-DDTHH:mm or a date object. Pass false to keep the amount but emit no expiry.
size	Edge length in pixels.
margin	Quiet zone in modules.
color	Colour of the dark modules.
background	Colour behind the modules.
logo	Absolute path to a centre logo.
label	Caption printed under the code.
format	png (default) or svg.
alt	Alt text. Defaults to "Raast payment QR code".

Examples

Bound values work as you'd expect:

<x-raast-qr :amount="$order->total" size="320" />

<x-raast-qr
    :iban="$vendor->iban"
    :amount="$order->total"
    :expiry="$order->pay_by"
    format="svg"
    size="400"
    color="#01411C"
    label="Order #{{ $order->id }}"
/>

Extra Attributes Pass Through

Anything you don't name is merged onto the rendered element, so your CSS framework works normally:

<x-raast-qr :amount="$order->total" class="rounded-lg shadow-md mx-auto" id="pay-qr" />

In png format this renders an <img>; in svg format it renders a <div> wrapping the inline SVG, with role="img" and aria-label set from alt.

PNG or SVG?

{{-- Default: an <img> with a data URL --}}
<x-raast-qr :amount="$order->total" />

{{-- Inline SVG, styleable with CSS, scales perfectly --}}
<x-raast-qr :amount="$order->total" format="svg" />

SVG is better for print stylesheets and high-DPI screens. PNG is a single self-contained tag that behaves predictably everywhere.

Customising the Markup

Publish the view and edit it:

php artisan vendor:publish --tag=raast-qr-views

It lands at resources/views/vendor/raast-qr/components/qr.blade.php.

A Complete Payment Block

<div class="rounded-xl border p-6 text-center">
    <h3 class="font-semibold">Pay with any banking app</h3>

    <x-raast-qr
        :amount="$order->total"
        size="280"
        color="#01411C"
        class="mx-auto my-4"
    />

    <p class="text-lg font-medium">PKR {{ number_format($order->total, 2) }}</p>

    <p class="mt-2 text-sm text-gray-600">
        You should see <strong>{{ config('raast-qr.account_title') }}</strong>
        in your app. Please check it before you confirm.
    </p>
</div>

Always tell people to check the name

The payload carries no account title — the name a payer sees comes from their own banking app. A line asking them to confirm it is the single most useful thing you can put next to a QR.

Made with ❤️ from Pakistan