Pay — OutfitKit
Pay · Métodos de pago
Selector de método de pago para TPV. Construido a partir de primitivos: no existe ningún componente Pay en OutfitKit. Es composición de una List de Item button con icono + nombre + sub. Consulta el ejemplo completo en examples/domain/pay.html.
Composición: una
List + varios Item button; cada uno con un .icon-box + Label (con .title.sm + .meta dentro). Aspecto pulsado con aria-pressed="true".
Cobro · 4 métodos
Tarjeta
Visa · MC · Amex
Efectivo
Cambio automático
Bizum
QR contactless
Mixto
2+ métodos
<div style="max-width:480px;width:100%">
<div class="list">
<div class="item" role="button" aria-pressed="true">
<span class="icon-box brand" aria-hidden="true"><iconify-icon icon="lucide:credit-card"></iconify-icon></span>
<div class="label"><div class="title sm">Tarjeta</div><div class="meta">Visa · MC · Amex</div></div>
</div>
<div class="item" role="button">
<span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:banknote"></iconify-icon></span>
<div class="label"><div class="title sm">Efectivo</div><div class="meta">Cambio automático</div></div>
</div>
<div class="item" role="button">
<span class="icon-box info" aria-hidden="true"><iconify-icon icon="lucide:smartphone"></iconify-icon></span>
<div class="label"><div class="title sm">Bizum</div><div class="meta">QR contactless</div></div>
</div>
<div class="item" role="button">
<span class="icon-box warn" aria-hidden="true"><iconify-icon icon="lucide:split"></iconify-icon></span>
<div class="label"><div class="title sm">Mixto</div><div class="meta">2+ métodos</div></div>
</div>
</div>
</div><div style="max-width:480px;width:100%">
<List>
<Item attrs={"role": "button", "aria-pressed": "true"}>
<span class="icon-box brand" aria-hidden="true"><iconify-icon icon="lucide:credit-card"></iconify-icon></span>
<Label>
<div class="title sm">Tarjeta</div>
<div class="meta">Visa · MC · Amex</div>
</Label>
</Item>
<Item attrs={"role": "button"}>
<span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:banknote"></iconify-icon></span>
<Label>
<div class="title sm">Efectivo</div>
<div class="meta">Cambio automático</div>
</Label>
</Item>
<Item attrs={"role": "button"}>
<span class="icon-box info" aria-hidden="true"><iconify-icon icon="lucide:smartphone"></iconify-icon></span>
<Label>
<div class="title sm">Bizum</div>
<div class="meta">QR contactless</div>
</Label>
</Item>
<Item attrs={"role": "button"}>
<span class="icon-box warn" aria-hidden="true"><iconify-icon icon="lucide:split"></iconify-icon></span>
<Label>
<div class="title sm">Mixto</div>
<div class="meta">2+ métodos</div>
</Label>
</Item>
</List>
</div><div style="max-width:480px;width:100%">
<List>
<Item attrs={"role": "button", "aria-pressed": "true"}>
<span class="icon-box brand" aria-hidden="true"><iconify-icon icon="lucide:credit-card"></iconify-icon></span>
<Label>
<div class="title sm">Tarjeta</div>
<div class="meta">Visa · MC · Amex</div>
</Label>
</Item>
<Item attrs={"role": "button"}>
<span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:banknote"></iconify-icon></span>
<Label>
<div class="title sm">Efectivo</div>
<div class="meta">Cambio automático</div>
</Label>
</Item>
<Item attrs={"role": "button"}>
<span class="icon-box info" aria-hidden="true"><iconify-icon icon="lucide:smartphone"></iconify-icon></span>
<Label>
<div class="title sm">Bizum</div>
<div class="meta">QR contactless</div>
</Label>
</Item>
<Item attrs={"role": "button"}>
<span class="icon-box warn" aria-hidden="true"><iconify-icon icon="lucide:split"></iconify-icon></span>
<Label>
<div class="title sm">Mixto</div>
<div class="meta">2+ métodos</div>
</Label>
</Item>
</List>
</div>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />Datastar · selección reactiva
Tarjeta
Visa · MC · Amex
Efectivo
Cambio automático
Bizum
QR contactless
Método seleccionado:
<div data-signals="{ method: 'card' }" style="max-width:480px;width:100%">
<div class="list">
<div class="item" role="button"
data-on:click="$method = 'card'"
data-attr:aria-pressed="$method === 'card'">
<span class="icon-box brand" aria-hidden="true"><iconify-icon icon="lucide:credit-card"></iconify-icon></span>
<div class="label"><div class="title sm">Tarjeta</div><div class="meta">Visa · MC · Amex</div></div>
</div>
<div class="item" role="button"
data-on:click="$method = 'cash'"
data-attr:aria-pressed="$method === 'cash'">
<span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:banknote"></iconify-icon></span>
<div class="label"><div class="title sm">Efectivo</div><div class="meta">Cambio automático</div></div>
</div>
<div class="item" role="button"
data-on:click="$method = 'bizum'"
data-attr:aria-pressed="$method === 'bizum'">
<span class="icon-box info" aria-hidden="true"><iconify-icon icon="lucide:smartphone"></iconify-icon></span>
<div class="label"><div class="title sm">Bizum</div><div class="meta">QR contactless</div></div>
</div>
</div>
<p class="meta" style="margin-top:8px">Método seleccionado: <b data-text="$method"></b></p>
</div><div data-signals="{ method: 'card' }" style="max-width:480px;width:100%">
<List>
<Item attrs={"role": "button", "data-on:click": "$method = 'card'", "data-attr:aria-pressed": "$method === 'card'"}>
<span class="icon-box brand" aria-hidden="true"><iconify-icon icon="lucide:credit-card"></iconify-icon></span>
<Label><div class="title sm">Tarjeta</div><div class="meta">Visa · MC · Amex</div></Label>
</Item>
<Item attrs={"role": "button", "data-on:click": "$method = 'cash'", "data-attr:aria-pressed": "$method === 'cash'"}>
<span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:banknote"></iconify-icon></span>
<Label><div class="title sm">Efectivo</div><div class="meta">Cambio automático</div></Label>
</Item>
<Item attrs={"role": "button", "data-on:click": "$method = 'bizum'", "data-attr:aria-pressed": "$method === 'bizum'"}>
<span class="icon-box info" aria-hidden="true"><iconify-icon icon="lucide:smartphone"></iconify-icon></span>
<Label><div class="title sm">Bizum</div><div class="meta">QR contactless</div></Label>
</Item>
</List>
<p class="meta" style="margin-top:8px">Método seleccionado: <b data-text="$method"></b></p>
</div><div data-signals="{ method: 'card' }" style="max-width:480px;width:100%">
<List>
<Item attrs={"role": "button", "data-on:click": "$method = 'card'", "data-attr:aria-pressed": "$method === 'card'"}>
<span class="icon-box brand" aria-hidden="true"><iconify-icon icon="lucide:credit-card"></iconify-icon></span>
<Label><div class="title sm">Tarjeta</div><div class="meta">Visa · MC · Amex</div></Label>
</Item>
<Item attrs={"role": "button", "data-on:click": "$method = 'cash'", "data-attr:aria-pressed": "$method === 'cash'"}>
<span class="icon-box success" aria-hidden="true"><iconify-icon icon="lucide:banknote"></iconify-icon></span>
<Label><div class="title sm">Efectivo</div><div class="meta">Cambio automático</div></Label>
</Item>
<Item attrs={"role": "button", "data-on:click": "$method = 'bizum'", "data-attr:aria-pressed": "$method === 'bizum'"}>
<span class="icon-box info" aria-hidden="true"><iconify-icon icon="lucide:smartphone"></iconify-icon></span>
<Label><div class="title sm">Bizum</div><div class="meta">QR contactless</div></Label>
</Item>
</List>
<p class="meta" style="margin-top:8px">Método seleccionado: <b data-text="$method"></b></p>
</div>Install the Jinja addon and import the component:
pip install outfitkitThen in your template:
{% from "<component>.jinja" import <component> %}
{{ <component>(...) }}Or with JinjaX:
<Component ... />