merchant

Merchant backend to process payments, run by merchants
Log | Files | Refs | Submodules | README | LICENSE

show_order_details.en.must (14880B)


      1 <!doctype html>
      2 <html lang="en">
      3 <head>
      4   <meta charset="utf-8">
      5   <meta name="viewport" content="width=device-width, initial-scale=1">
      6   <meta name="referrer" content="no-referrer">
      7   <title>Payment complete for {{ order_summary }}</title>
      8   <style>
      9     :root {
     10       color-scheme: light;
     11       --taler-blue: #0042b3;
     12       --taler-slate: #586a88;
     13       --taler-ink: #172033;
     14       --taler-muted: #64748b;
     15       --taler-border: #d9dfeb;
     16       --taler-panel: #f8f9fc;
     17       --taler-qr-frame: #f1f1f4;
     18       --taler-success: #147d55;
     19       --taler-success-bg: #e9f7f1;
     20       font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
     21       font-synthesis: none;
     22     }
     23     * { box-sizing: border-box; }
     24     html { min-width: 18rem; background: #fff; color: var(--taler-ink); }
     25     body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; }
     26     a { color: var(--taler-blue); }
     27     a:focus-visible, button:focus-visible { outline: .2rem solid #7aa7f5; outline-offset: .18rem; }
     28     .site-header, .site-footer, main { width: min(72rem, calc(100% - 2rem)); margin-inline: auto; }
     29     .site-header { min-height: 5.5rem; display: flex; align-items: center; border-bottom: 1px solid var(--taler-border); }
     30     .brand { display: inline-flex; align-items: center; }
     31     .brand img { display: block; width: 8.4rem; height: auto; }
     32     main { flex: 1; display: grid; place-items: center; padding: 3.5rem 0; }
     33     .page-grid { width: 100%; display: grid; grid-template-columns: minmax(18rem, 25rem) minmax(20rem, 1fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; }
     34     .eyebrow { margin: 0 0 .55rem; color: var(--taler-blue); font-size: .78rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
     35     h1 { max-width: 18ch; margin: 0; font-size: clamp(2rem, 4.5vw, 3.5rem); line-height: 1.08; letter-spacing: -.035em; }
     36     .lede { max-width: 36rem; margin: 1rem 0 0; color: var(--taler-slate); font-size: 1.08rem; line-height: 1.65; }
     37     .amount { margin: 1.8rem 0 .2rem; color: var(--taler-blue); font-size: clamp(2.1rem, 5vw, 3rem); font-weight: 780; line-height: 1.05; letter-spacing: -.025em; overflow-wrap: anywhere; }
     38     .amount-note { margin: .55rem 0 0; color: var(--taler-slate); font-size: 1rem; }
     39     .details { margin: 2rem 0 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .8rem 1.25rem; }
     40     .details dt { color: var(--taler-muted); }
     41     .details dd { margin: 0; font-weight: 620; overflow-wrap: anywhere; }
     42     .action { display: inline-flex; min-height: 3rem; margin-top: 1.75rem; padding: .75rem 1.2rem; align-items: center; justify-content: center; border-radius: .55rem; background: var(--taler-blue); color: #fff; font-weight: 720; text-decoration: none; box-shadow: 0 .35rem 1rem rgb(0 66 179 / 20%); }
     43     .action:hover { background: #003994; }
     44     .wallet-help { margin: 1rem 0 0; color: var(--taler-muted); font-size: .92rem; }
     45     .qr-column { display: grid; justify-items: center; gap: 1rem; }
     46     .qr-instruction { margin: 0; max-width: 26rem; color: var(--taler-slate); text-align: center; line-height: 1.5; }
     47     .qr-frame { position: relative; width: min(100%, 25rem); aspect-ratio: 1; padding: 6.25%; overflow: hidden; border-radius: 8%; background: var(--taler-qr-frame); }
     48     .qr-code { width: 100%; height: 100%; background: #fff; }
     49     .qr-code > svg { display: block; width: 100%; height: 100%; fill: #000; }
     50     .qr-motion { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
     51     .qr-motion rect { fill: none; stroke: url(#taler-scan-gradient); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 57 343; animation: scan 4s linear infinite; }
     52     .qr-motion rect + rect { animation-delay: -2s; }
     53     .qr-badge { position: absolute; inset: 50% auto auto 50%; height: 12.5%; width: auto; transform: translate(-50%, -50%); }
     54     @keyframes scan { to { stroke-dashoffset: -400; } }
     55     .claimed { width: min(100%, 25rem); aspect-ratio: 1; display: grid; place-items: center; padding: 2.5rem; border-radius: 8%; background: var(--taler-qr-frame); text-align: center; }
     56     .claimed-icon { width: 4.25rem; height: 4.25rem; margin: 0 auto 1.3rem; display: grid; place-items: center; border-radius: 50%; background: var(--taler-blue); color: #fff; font-size: 2rem; }
     57     .claimed h2 { margin: 0; font-size: 1.35rem; }
     58     .claimed p { margin: .65rem 0 0; color: var(--taler-slate); line-height: 1.55; }
     59     .site-footer { padding: 1.5rem 0 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1.5rem; border-top: 1px solid var(--taler-border); color: var(--taler-muted); font-size: .82rem; }
     60     .site-footer p { margin: 0; }
     61     .site-footer a { color: inherit; }
     62     .status-card { width: min(44rem, 100%); padding: clamp(1.4rem, 4vw, 3rem); border: 1px solid var(--taler-border); border-radius: 1rem; background: #fff; box-shadow: 0 1rem 3rem rgb(30 48 80 / 8%); }
     63     .status-mark { width: 3.5rem; height: 3.5rem; margin-bottom: 1.4rem; display: grid; place-items: center; border-radius: 50%; background: var(--taler-success-bg); color: var(--taler-success); font-size: 1.65rem; font-weight: 800; }
     64     .message { margin: 1.7rem 0 0; padding: 1rem 1.1rem; border-left: .25rem solid var(--taler-blue); border-radius: .2rem .5rem .5rem .2rem; background: #f1f5ff; line-height: 1.55; }
     65     .secondary-link { display: inline-block; margin-top: 1.3rem; font-weight: 650; overflow-wrap: anywhere; }
     66     [hidden] { display: none !important; }
     67     @media (max-width: 47rem) {
     68       .site-header { min-height: 4.5rem; }
     69       .brand img { width: 7rem; }
     70       main { padding: 2.25rem 0 3rem; place-items: start center; }
     71       .page-grid { grid-template-columns: 1fr; gap: 2.5rem; }
     72       .qr-column { grid-row: 1; }
     73       .copy-column { grid-row: 2; }
     74       h1 { font-size: clamp(2rem, 10vw, 3rem); }
     75       .details { grid-template-columns: 1fr; gap: .25rem; }
     76       .details dd { margin-bottom: .75rem; }
     77       .action { width: 100%; }
     78       .site-footer { flex-direction: column; }
     79     }
     80     @media (prefers-reduced-motion: reduce) {
     81       .qr-motion rect { animation: none; }
     82       .qr-motion rect + rect { stroke-dashoffset: -200; }
     83     }
     84 </style>
     85 </head>
     86 <body>
     87 <header class="site-header">
     88   <a class="brand" href="https://taler.net/" rel="noreferrer" referrerpolicy="no-referrer" aria-label="GNU Taler">
     89     <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjQ0Ny43NjEiIGlkPSJzY3JlZW5zaG90LTUwZWRmYjcyLTU4YzMtODA2ZC04MDA3LTljZWU5ZmI3N2FiZSIgdmlld0JveD0iMCAwIDEwMDAgNDQ3Ljc2MSIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIGZpbGw9Im5vbmUiIHZlcnNpb249IjEuMSI+PGcgaWQ9InNoYXBlLTUwZWRmYjcyLTU4YzMtODA2ZC04MDA3LTljZWU5ZmI3N2FiZSIgd2lkdGg9IjY3MCIgaGVpZ2h0PSIzMDAiIHJ4PSIwIiByeT0iMCIgc3R5bGU9ImZpbGw6IHJnYigwLCAwLCAwKTsiPjxnIGlkPSJzaGFwZS01MGVkZmI3Mi01OGMzLTgwNmQtODAwNy05Y2VlOWZiNzdhYmYiIHN0eWxlPSJkaXNwbGF5OiBub25lOyI+PGcgY2xhc3M9ImZpbGxzIiBpZD0iZmlsbHMtNTBlZGZiNzItNThjMy04MDZkLTgwMDctOWNlZTlmYjc3YWJmIj48cmVjdCB3aWR0aD0iMTAwMCIgaGVpZ2h0PSI0NDcuNzYxMTk0MDI5ODUwNyIgeD0iMCIgdHJhbnNmb3JtPSJtYXRyaXgoMS4wMDAwMDAsIDAuMDAwMDAwLCAwLjAwMDAwMCwgMS4wMDAwMDAsIDAuMDAwMDAwLCAwLjAwMDAwMCkiIHN0eWxlPSJmaWxsOiBub25lOyIgcnk9IjAiIGZpbGw9Im5vbmUiIHJ4PSIwIiB5PSIwIi8+PC9nPjwvZz48ZyBpZD0ic2hhcGUtNTBlZGZiNzItNThjMy04MDZkLTgwMDctOWNlZTlmYjc3YWMwIiByeD0iMCIgcnk9IjAiIHN0eWxlPSJmaWxsOiByZ2IoMCwgMCwgMCk7Ij48ZyBpZD0ic2hhcGUtNTBlZGZiNzItNThjMy04MDZkLTgwMDctOWNlZTlmYjc3YWM2Ij48ZyBjbGFzcz0iZmlsbHMiIGlkPSJmaWxscy01MGVkZmI3Mi01OGMzLTgwNmQtODAwNy05Y2VlOWZiNzdhYzYiPjxwYXRoIGQ9Ik00MzEuMTU1LDUuNTc4QzUwOC43MTYsNS41NzgsNTc2LjA3Nyw1Mi4zNTAsNjEwLjA2NiwxMjEuMDEwTDU4MS4xMjMsMTIxLjAxMEM1NDkuNjg1LDY3Ljc3OCw0OTQuMjc0LDMyLjQyOCw0MzEuMTU1LDMyLjQyOEMzMzMuMTkyLDMyLjQyOCwyNTMuNzc3LDExNy41NjMsMjUzLjc3NywyMjIuNTgwQzI1My43NzcsMjczLjk4MiwyNzIuODEwLDMyMC42MTQsMzAzLjcyNiwzNTQuODM0QzI5Ny4wNDcsMzYwLjQxMSwyODkuOTM3LDM2NS40MjAsMjgyLjQ1NSwzNjkuNzkzQzI0OS4xMTIsMzMxLjExMiwyMjguNzMxLDI3OS40MDMsMjI4LjczMSwyMjIuNTgwQzIyOC43MzEsMTAyLjczNCwzMTkuMzU5LDUuNTc4LDQzMS4xNTUsNS41NzhaWk02MDkuNTIzLDMyNS4yNTNDNTc1LjM2MiwzOTMuMzE0LDUwOC4zMDEsNDM5LjU4Myw0MzEuMTU1LDQzOS41ODNDNDI1LjkxOCw0MzkuNTgzLDQyMC43MjcsNDM5LjM2OSw0MTUuNTg5LDQzOC45NTFDNDMwLjc3NCw0MzEuMTg0LDQ0NS4wMTAsNDIxLjYzNSw0NTguMDY5LDQxMC41NTZDNTA5LjQxNyw0MDIuMTc2LDU1My41MjEsMzcwLjE5MCw1ODAuNDY2LDMyNS4yNTNaIiBzdHlsZT0iZmlsbC1ydWxlOiBldmVub2RkOyBzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMC4zMjc5NDM7IGZpbGw6IHJnYigwLCA2NiwgMTc5KTsgZmlsbC1vcGFjaXR5OiAxOyIvPjwvZz48L2c+PGcgaWQ9InNoYXBlLTUwZWRmYjcyLTU4YzMtODA2ZC04MDA3LTljZWU5ZmI3N2FjNyI+PGcgY2xhc3M9ImZpbGxzIiBpZD0iZmlsbHMtNTBlZGZiNzItNThjMy04MDZkLTgwMDctOWNlZTlmYjc3YWM3Ij48cGF0aCBkPSJNMzE5LjQ2NSw1LjU3OEMzMjQuNzAxLDUuNTc4LDMyOS44OTIsNS43OTIsMzM1LjAzMCw2LjIxMEMzMTkuODQ1LDEzLjk3NywzMDUuNjA5LDIzLjUyNSwyOTIuNTUxLDM0LjYwNUMyMDcuMzYxLDQ4LjUwNywxNDIuMDg3LDEyNy4zNzEsMTQyLjA4NywyMjIuNTgwQzE0Mi4wODcsMjkzLjU0OCwxNzguMzU5LDM1NS40MjYsMjMyLjEwNiwzODguMDk3QzIyNC4xNzgsMzg5LjQyNywyMTYuMDUyLDM5MC4xMjIsMjA3Ljc3NCwzOTAuMTIyQzIwMS42MDcsMzkwLjEyMiwxOTUuNTI4LDM4OS43MjYsMTg5LjU0OCwzODguOTgxQzE0NS4yMjksMzQ5LjE3NCwxMTcuMDQwLDI4OS40MTEsMTE3LjA0MCwyMjIuNTgwQzExNy4wNDAsMTAyLjczNCwyMDcuNjY5LDUuNTc4LDMxOS40NjUsNS41NzhaWk0zNDYuMzc5LDQxMC41NTZDMzk3LjcyNyw0MDIuMTc2LDQ0MS44MzIsMzcwLjE4OCw0NjguNzc2LDMyNS4yNTFMNDk3LjgzNCwzMjUuMjUxQzQ2My42NzMsMzkzLjMxMiwzOTYuNjEyLDQzOS41ODMsMzE5LjQ2NSw0MzkuNTgzQzMxNC4yMjcsNDM5LjU4MywzMDkuMDM3LDQzOS4zNjksMzAzLjg5OSw0MzguOTUxQzMxOS4wODMsNDMxLjE4MywzMzMuMzIxLDQyMS42MzYsMzQ2LjM3OSw0MTAuNTU2WlpNNDY5LjQzMiwxMjEuMDEwQzQ1My44MTMsOTQuNTY5LDQzMi4yODAsNzIuNTM5LDQwNi44MjMsNTcuMDYzQzQxNC43NTEsNTUuNzM0LDQyMi44NzcsNTUuMDM5LDQzMS4xNTUsNTUuMDM5QzQzNy4zMjEsNTUuMDM5LDQ0My40MDEsNTUuNDM0LDQ0OS4zODEsNTYuMTgwQzQ2OS4zNjIsNzQuMTI2LDQ4Ni4wNjQsOTYuMTMxLDQ5OC4zODIsMTIxLjAxMFoiIHN0eWxlPSJmaWxsLXJ1bGU6IGV2ZW5vZGQ7IHN0cm9rZTogbm9uZTsgc3Ryb2tlLXdpZHRoOiAwLjMyNzk0MzsgZmlsbDogcmdiKDAsIDY2LCAxNzkpOyBmaWxsLW9wYWNpdHk6IDE7Ii8+PC9nPjwvZz48ZyBpZD0ic2hhcGUtNTBlZGZiNzItNThjMy04MDZkLTgwMDctOWNlZTlmYjc3YWM4Ij48ZyBjbGFzcz0iZmlsbHMiIGlkPSJmaWxscy01MGVkZmI3Mi01OGMzLTgwNmQtODAwNy05Y2VlOWZiNzdhYzgiPjxwYXRoIGQ9Ik0yMDcuNzc0LDUuNTc4QzIxMy4wNjksNS41NzgsMjE4LjMxNSw1Ljc5OSwyMjMuNTA4LDYuMjI2QzIwOC4zNTIsMTMuOTgyLDE5NC4xMzksMjMuNTEyLDE4MS4xMDMsMzQuNTY4Qzk1Ljc5NCw0OC4zNjEsMzAuMzk3LDEyNy4yODEsMzAuMzk3LDIyMi41ODBDMzAuMzk3LDMyNy41OTgsMTA5LjgxMiw0MTIuNzMyLDIwNy43NzQsNDEyLjczMkMyNzAuNDU5LDQxMi43MzIsMzI1LjU0NywzNzcuODcxLDM1Ny4wOTYsMzI1LjI1MUwzODYuMTQ0LDMyNS4yNTFDMzUxLjk4MywzOTMuMzEyLDI4NC45MjIsNDM5LjU4MywyMDcuNzc0LDQzOS41ODNDOTUuOTc5LDQzOS41ODMsNS4zNTAsMzQyLjQyNyw1LjM1MCwyMjIuNTgwQzUuMzUwLDEwMi43MzQsOTUuOTc5LDUuNTc4LDIwNy43NzQsNS41NzhaWk0zNTcuNzM4LDEyMS4wMTBDMzUxLjIxMSwxMDkuOTYyLDM0My42NTQsOTkuNjgxLDMzNS4yMDYsOTAuMzMxQzM0MS44ODUsODQuNzU0LDM0OC45OTQsNzkuNzQyLDM1Ni40NzYsNzUuMzY5QzM2OC4yODIsODkuMDY2LDM3OC40NjAsMTA0LjM5NywzODYuNjg3LDEyMS4wMTBaIiBzdHlsZT0iZmlsbC1ydWxlOiBldmVub2RkOyBzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMC4zMjc5NDM7IGZpbGw6IHJnYigwLCA2NiwgMTc5KTsgZmlsbC1vcGFjaXR5OiAxOyIvPjwvZz48L2c+PC9nPjxnIGlkPSJzaGFwZS01MGVkZmI3Mi01OGMzLTgwNmQtODAwNy05Y2VlOWZiNzdhYzEiPjxnIGNsYXNzPSJmaWxscyIgaWQ9ImZpbGxzLTUwZWRmYjcyLTU4YzMtODA2ZC04MDA3LTljZWU5ZmI3N2FjMSI+PHBhdGggZD0iTTM3OC43ODMsMTcxLjE4OUw0MjQuMzYwLDE3MS4xODlMNDI0LjM2MCwxNDYuMDk5TDMwNy43NDksMTQ2LjA5OUwzMDcuNzQ5LDE3MS4xODlMMzUzLjMyNywxNzEuMTg5TDM1My4zMjcsMzAwLjE2MEwzNzguNzgzLDMwMC4xNjBaIi8+PC9nPjwvZz48ZyBpZD0ic2hhcGUtNTBlZGZiNzItNThjMy04MDZkLTgwMDctOWNlZTlmYjc3YWMyIj48ZyBjbGFzcz0iZmlsbHMiIGlkPSJmaWxscy01MGVkZmI3Mi01OGMzLTgwNmQtODAwNy05Y2VlOWZiNzdhYzIiPjxwYXRoIGQ9Ik00NjAuOTMzLDI2Mi45NjdMNTI4Ljg4OCwyNjIuOTY3TDU0My40NjYsMzAwLjE2MUw1NzAuMTU2LDMwMC4xNjFMNTA2LjkyMSwxNDUuMDAwTDQ4My41MTgsMTQ1LjAwMEw0MjAuMjg0LDMwMC4xNjFMNDQ2LjE1MiwzMDAuMTYxWk01MTkuNjUwLDIzOC45NzVMNDcwLjE3NCwyMzguOTc1TDQ5NC44MDksMTc3LjM1MVoiLz48L2c+PC9nPjxnIGlkPSJzaGFwZS01MGVkZmI3Mi01OGMzLTgwNmQtODAwNy05Y2VlOWZiNzdhYzMiPjxnIGNsYXNzPSJmaWxscyIgaWQ9ImZpbGxzLTUwZWRmYjcyLTU4YzMtODA2ZC04MDA3LTljZWU5ZmI3N2FjMyI+PHBhdGggZD0iTTYxNS45NTIsMTQ2LjEwMEw1OTMuMTY0LDE0Ni4xMDBMNTkzLjE2NCwzMDAuMTYxTDY5NS4zOTAsMzAwLjE2MUw2OTUuMzkwLDI3NS43MzJDNjY4LjkxMSwyNzUuNzMyLDY0Mi40MzEsMjc1LjczMiw2MTUuOTUyLDI3NS43MzJaIi8+PC9nPjwvZz48ZyBpZD0ic2hhcGUtNTBlZGZiNzItNThjMy04MDZkLTgwMDctOWNlZTlmYjc3YWM0Ij48ZyBjbGFzcz0iZmlsbHMiIGlkPSJmaWxscy01MGVkZmI3Mi01OGMzLTgwNmQtODAwNy05Y2VlOWZiNzdhYzQiPjxwYXRoIGQ9Ik04MjguMjIwLDE0Ni4xMDBMNzIxLjg3MywxNDYuMTAwTDcyMS44NzMsMzAwLjE2MUw4MjkuMjQ3LDMwMC4xNjFMODI5LjI0NywyNzUuNzMyTDc0Ni45MjAsMjc1LjczMkw3NDYuOTIwLDIzNC41NzRMODE4Ljk4MSwyMzQuNTc0TDgxOC45ODEsMjEwLjE0Nkw3NDYuOTIwLDIxMC4xNDZMNzQ2LjkyMCwxNzAuNTMwTDgyOC4yMjAsMTcwLjUzMFoiLz48L2c+PC9nPjxnIGlkPSJzaGFwZS01MGVkZmI3Mi01OGMzLTgwNmQtODAwNy05Y2VlOWZiNzdhYzUiPjxnIGNsYXNzPSJmaWxscyIgaWQ9ImZpbGxzLTUwZWRmYjcyLTU4YzMtODA2ZC04MDA3LTljZWU5ZmI3N2FjNSI+PHBhdGggZD0iTTk1MS4xOTYsMTk2LjM5MUM5NTEuMTk2LDIwNC4zNDksOTQ4LjUyNywyMTAuNjk2LDk0My4xNTUsMjE1LjM5MEM5MzcuODE3LDIyMC4xMjMsOTMwLjU5NywyMjIuNDY5LDkyMS41MjksMjIyLjQ2OUw4ODQuNDcyLDIyMi40NjlMODg0LjQ3MiwxNzAuNTMwTDkyMS4zMjQsMTcwLjUzMEM5MzAuODAyLDE3MC41MzAsOTM4LjE1OCwxNzIuNjk0LDk0My4zNjEsMTc3LjA1OEM5NDguNTk2LDE4MS4zODcsOTUxLjE5NiwxODcuODQzLDk1MS4xOTYsMTk2LjM5MVpaTTk4MS4zNzUsMzAwLjE2MUw5NDIuNTczLDI0MS44MzdDOTQ3LjYzNywyNDAuMzcwLDk1Mi4yNTcsMjM4LjI4MSw5NTYuNDMyLDIzNS41NjVDOTYwLjYwNSwyMzIuODUxLDk2NC4xOTksMjI5LjU0OSw5NjcuMjA5LDIyNS42NjJDOTcwLjIyMSwyMjEuNzczLDk3Mi41ODIsMjE3LjI5OCw5NzQuMjkyLDIxMi4yMzdDOTc2LjAwMywyMDcuMTc1LDk3Ni44NTgsMjAxLjQxNSw5NzYuODU4LDE5NC45NTlDOTc2Ljg1OCwxODcuNDc2LDk3NS42MjcsMTgwLjY5MSw5NzMuMTYzLDE3NC42MDFDOTcwLjY5OSwxNjguNTEyLDk2Ny4xNzUsMTYzLjM3Niw5NjIuNTkxLDE1OS4xOTRDOTU4LjAwNSwxNTUuMDEzLDk1Mi4zOTQsMTUxLjc4NSw5NDUuNzU2LDE0OS41MTBDOTM5LjExNywxNDcuMjM1LDkzMS42OTIsMTQ2LjEwMCw5MjMuNDgwLDE0Ni4xMDBMODU5LjQyNSwxNDYuMTAwTDg1OS40MjUsMzAwLjE2MUw4ODQuNDcyLDMwMC4xNjFMODg0LjQ3MiwyNDYuNDYwTDkxNi4xOTEsMjQ2LjQ2MEw5NTEuNjA2LDMwMC4xNjFaIi8+PC9nPjwvZz48L2c+PC9zdmc+" alt="GNU Taler">
     90   </a>
     91 </header>
     92 <main>
     93   <article class="status-card" aria-labelledby="page-title">
     94     <div class="status-mark" aria-hidden="true">✓</div>
     95     <p class="eyebrow">Payment complete</p>
     96     <h1 id="page-title">Thank you for your payment</h1>
     97     <p class="lede">{{ order_summary }}</p>
     98     <dl class="details">
     99       <dt>Paid</dt><dd>{{ order_amount }}</dd>
    100       <dt>Merchant</dt><dd>{{ merchant_name }}</dd>
    101       <dt>Order ID</dt><dd>{{ order_id }}</dd>
    102       {{#has_refund}}<dt>Refunded</dt><dd>{{ refund_amount }}</dd>{{/has_refund}}
    103     </dl>
    104     {{#fulfillment_message}}<p class="message">{{ fulfillment_message }}</p>{{/fulfillment_message}}
    105     {{#fulfillment_url}}<a class="secondary-link" href="{{ fulfillment_url }}" rel="noreferrer" referrerpolicy="no-referrer">Continue to your purchase</a>{{/fulfillment_url}}
    106   </article>
    107 </main>
    108 <footer class="site-footer">
    109   <p>Payments with privacy by <a href="https://taler.net/" rel="noreferrer" referrerpolicy="no-referrer">GNU Taler</a></p>
    110   <p>Copyright © 2014–2026 Taler Systems SA</p>
    111 </footer>
    112 </body>
    113 </html>