alro65
35d460b127
Multi-tenant marine invoicing system: Stripe payments, PDF generation, digital signatures, QR codes, SMTP email, bilingual templates. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
62 lines
3.5 KiB
HTML
62 lines
3.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pay Invoice {{ doc.number }}</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: 'DM Sans', sans-serif; background: #f0f4f8; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
|
|
.card { background: white; border-radius: 20px; padding: 40px; max-width: 480px; width: 100%; box-shadow: 0 8px 40px rgba(0,0,0,0.12); }
|
|
.logo { font-size: 22px; font-weight: 700; color: #0a1628; margin-bottom: 4px; }
|
|
.company-sub { font-size: 13px; color: #8892a4; margin-bottom: 28px; }
|
|
.divider { height: 1px; background: #e8ecf2; margin: 20px 0; }
|
|
.label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: #8892a4; font-weight: 600; margin-bottom: 4px; }
|
|
.value { font-size: 15px; color: #1a2540; font-weight: 500; margin-bottom: 16px; }
|
|
.amount-box { background: #0a1628; border-radius: 14px; padding: 24px; text-align: center; margin: 24px 0; }
|
|
.amount-label { font-size: 12px; color: #8892a4; margin-bottom: 6px; letter-spacing: 0.5px; }
|
|
.amount-value { font-size: 38px; font-weight: 700; color: #c9a84c; }
|
|
.btn-pay { display: block; width: 100%; background: linear-gradient(135deg, #6366f1, #4f46e5); color: white; border: none; border-radius: 12px; padding: 16px; font-size: 16px; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; transition: opacity 0.2s; }
|
|
.btn-pay:hover { opacity: 0.9; }
|
|
.secure { text-align: center; font-size: 11px; color: #8892a4; margin-top: 12px; }
|
|
.invoice-num { display: inline-block; background: rgba(201,168,76,0.1); color: #b8962a; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; margin-bottom: 20px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
{% if company and company.logo_path %}
|
|
<img src="{{ request.host_url }}static/{{ company.logo_path }}" style="height:50px;margin-bottom:16px;display:block;">
|
|
{% endif %}
|
|
<div class="logo">{{ company.name if company else 'Invoice Payment' }}</div>
|
|
<div class="company-sub">{{ company.email if company else '' }}</div>
|
|
|
|
<span class="invoice-num">Invoice {{ doc.number }}</span>
|
|
|
|
<div class="amount-box">
|
|
<div class="amount-label">INVOICE TOTAL</div>
|
|
<div class="amount-value">${{ "%.2f"|format(doc.total) }}</div>
|
|
</div>
|
|
|
|
{% set fee = (doc.total * 0.029 + 0.30) %}
|
|
{% set total_with_fee = doc.total + fee %}
|
|
<div style="background:#f8fafc;border-radius:12px;padding:16px;margin-bottom:20px;font-size:14px;">
|
|
<div style="display:flex;justify-content:space-between;padding:5px 0;color:#555;">
|
|
<span>Invoice subtotal</span><strong>${{ "%.2f"|format(doc.total) }}</strong>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;padding:5px 0;color:#555;">
|
|
<span>Credit card fee (2.9% + $0.30)</span><strong>${{ "%.2f"|format(fee) }}</strong>
|
|
</div>
|
|
<div style="display:flex;justify-content:space-between;padding:8px 0;margin-top:6px;border-top:1px solid #e2e8f0;font-size:16px;font-weight:700;color:#0a1628;">
|
|
<span>Total charged</span><span>${{ "%.2f"|format(total_with_fee) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form action="/pay/{{ token }}/checkout" method="POST">
|
|
<button type="submit" class="btn-pay">💳 Pay Now with Card</button>
|
|
</form>
|
|
<div class="secure">🔒 Secured by Stripe · Your payment info is never stored on our servers</div>
|
|
</div>
|
|
</body>
|
|
</html>
|