feat(examples): add initiated QR template

examples/payments/templates/initiated.html

@@ -0,0 +1,35 @@
+{% extends "base.html" %}
+{% block title %}Fonepay QR — Demo{% endblock %}
+
+{% block topbar_extra %}
+<a class="back" href="{% url 'payments:payments-home' %}">&larr; Home</a>
+{% endblock %}
+
+{% block content %}
+<div class="card" style="max-width:600px; margin:0 auto;">
+    <div class="card-title" style="display:flex; align-items:center; gap:.5rem;">
+        <span class="swatch" style="width:7px; height:7px; border-radius:50%; background:var(--fonepay); display:inline-block;"></span>
+        Fonepay QR — <code style="font-size:.82rem;">{{ order.order_id }}</code>
+    </div>
+
+    <p style="color:var(--muted); font-size:.9rem; margin-bottom:1.25rem;">
+        Show the string below to the customer to scan (render it as a QR code in a real app).
+    </p>
+
+    <div class="qr-kind">Payment string</div>
+    <div class="qr-box" style="min-height:auto; padding:1.1rem 1.25rem; display:block; text-align:left;">
+        <code style="word-break:break-all; font-size:.83rem; color:var(--text);">{{ qr_message }}</code>
+    </div>
+
+    <hr class="ticket-divider">
+
+    <p style="font-size:.83rem; color:var(--muted); margin-bottom:1.25rem;">
+        Run <code style="font-family:var(--font-mono); background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.15rem .4rem; color:var(--text);">python manage.py monitor_fonepay</code> to watch for settlement.
+    </p>
+
+    <form method="post" action="{% url 'payments:payments-verify' order.id %}">
+        {% csrf_token %}
+        <button class="btn btn-fonepay btn-sm" type="submit">Check status now</button>
+    </form>
+</div>
+{% endblock %}