added on WebSTLs (webstls.com) at 2026-07-01 22:26:59
| 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.0"> | |
| 6 | <link rel="icon" type="image/svg+xml" href="/assets/images/favicon.svg"> | |
| 7 | <title>Order #$order_id · $store_name</title> | |
| 8 | <link rel="stylesheet" href="/assets/css/site.css"> | |
| 9 | <style>:root { $theme_css_vars }</style> | |
| 10 | <style> | |
| 11 | body { background: var(--col-bg); color: var(--col-text); font-family: var(--font-ui, sans-serif); margin: 0; } | |
| 12 | .cc-page { max-width: 720px; margin: 0 auto; padding: 60px 24px 100px; } | |
| 13 | .cc-card { background: var(--col-surface-1); border:1px solid var(--col-border-2); border-radius:16px; padding:36px 32px; } | |
| 14 | .cc-card h1 { margin:0 0 12px; font-size:28px; color: var(--col-text); } | |
| 15 | .cc-line { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--col-border); font-size:14px; align-items:center; gap:14px; } | |
| 16 | .cc-line:last-child { border-bottom:0; } | |
| 17 | .cc-line .qty { color:var(--col-text-3); font-size:12px; margin-left:6px; } | |
| 18 | .cc-total-row { display:flex; justify-content:space-between; margin-top:16px; padding-top:14px; border-top:2px solid var(--col-border-2); font-weight:700; font-size:18px; color:var(--col-text); } | |
| 19 | .cc-btn { display:inline-block; padding:8px 14px; border-radius:8px; background:linear-gradient(130deg, var(--col-accent), var(--col-accent-bright)); border:0; color:#fff; font-size:13px; font-weight:700; text-decoration:none; } | |
| 20 | .cc-btn.secondary { background:var(--col-surface-2); border:1px solid var(--col-border); color:var(--col-text); } | |
| 21 | .cc-status { display:inline-block; padding:6px 12px; border-radius:99px; font-size:12px; font-weight:600; letter-spacing:0.4px; text-transform:uppercase; } | |
| 22 | .cc-status.paid { background:rgba(34,197,94,0.15); color:#86efac; border:1px solid rgba(34,197,94,0.35); } | |
| 23 | .cc-status.pending { background:rgba(234,179,8,0.15); color:#fcd34d; border:1px solid rgba(234,179,8,0.35); } | |
| 24 | .cc-status.failed { background:rgba(239,68,68,0.15); color:#fca5a5; border:1px solid rgba(239,68,68,0.35); } | |
| 25 | .cc-foot { margin-top: 28px; display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } | |
| 26 | </style> | |
| 27 | [if:$is_pending] | |
| 28 | <meta http-equiv="refresh" content="6"> | |
| 29 | [/if] | |
| 30 | </head> | |
| 31 | <body> | |
| 32 | $store_chrome_html | |
| 33 | <main class="cc-page"> | |
| 34 | ||
| 35 | <div class="cc-card"> | |
| 36 | [if:$is_paid] | |
| 37 | <span class="cc-status paid">Paid</span> | |
| 38 | <h1 style="margin-top:14px">Thanks for your order.</h1> | |
| 39 | <p>Order <strong>#$order_id</strong> · receipt sent to <strong>$buyer_email</strong>. Your downloads are ready.</p> | |
| 40 | [/if] | |
| 41 | ||
| 42 | [if:$is_pending] | |
| 43 | <span class="cc-status pending">Processing</span> | |
| 44 | <h1 style="margin-top:14px">Almost done.</h1> | |
| 45 | <p>Your payment is settling with Stripe. This page refreshes automatically; downloads unlock the moment payment confirms (usually a few seconds).</p> | |
| 46 | [/if] | |
| 47 | ||
| 48 | [if:$is_failed] | |
| 49 | <span class="cc-status failed">Failed</span> | |
| 50 | <h1 style="margin-top:14px">Payment didn't go through.</h1> | |
| 51 | <p>Your card was declined or the payment was cancelled. Nothing was charged. You can retry from the cart.</p> | |
| 52 | [/if] | |
| 53 | ||
| 54 | [if:$has_items] | |
| 55 | <div style="margin-top:22px"> | |
| 56 | [loop:@items] | |
| 57 | <div class="cc-line"> | |
| 58 | <span>$loop1.title<span class="qty">x$loop1.qty</span></span> | |
| 59 | <span style="display:flex;gap:10px;align-items:center"> | |
| 60 | <span class="font-mono">$loop1.line_total</span> | |
| 61 | [if:$loop1.download_url]<a href="$loop1.download_url" class="cc-btn">Download</a>[/if] | |
| 62 | </span> | |
| 63 | </div> | |
| 64 | [/loop] | |
| 65 | [if:$has_tax] | |
| 66 | <div class="cc-line"><span>Subtotal</span><span class="font-mono">$subtotal_display</span></div> | |
| 67 | [loop:@tax_lines] | |
| 68 | <div class="cc-line" style="color:var(--col-text-2)"><span>$loop1.label ($loop1.rate%)</span><span class="font-mono">$loop1.cents</span></div> | |
| 69 | [/loop] | |
| 70 | [/if] | |
| 71 | <div class="cc-total-row"><span>Total</span><span class="font-mono">$total_display</span></div> | |
| 72 | </div> | |
| 73 | [/if] | |
| 74 | ||
| 75 | <div class="cc-foot"> | |
| 76 | [if:$is_paid]<a href="$orders_href" class="cc-btn secondary">All my orders</a>[/if] | |
| 77 | [if:$is_failed]<a href="$back_href" class="cc-btn">Back to $store_name</a>[/if] | |
| 78 | [if:!$is_failed]<a href="$back_href" class="cc-btn secondary">Back to $store_name</a>[/if] | |
| 79 | </div> | |
| 80 | </div> | |
| 81 | ||
| 82 | </main> | |
| 83 | </body> | |
| 84 | </html> |