From 430e7f1dbede411910da5988294d347551416e32 Mon Sep 17 00:00:00 2001 From: nate Date: Wed, 25 Mar 2026 22:42:26 +0400 Subject: [PATCH] test: improve checkout UX --- apps/web/src/views/checkout.ejs | 169 ++++++++++++++++++-------------- 1 file changed, 96 insertions(+), 73 deletions(-) diff --git a/apps/web/src/views/checkout.ejs b/apps/web/src/views/checkout.ejs index 597101e..16fbec0 100644 --- a/apps/web/src/views/checkout.ejs +++ b/apps/web/src/views/checkout.ejs @@ -128,7 +128,7 @@ <% } else { %> - + <% const inv = invoice; const isPending = inv.status === 'pending' || inv.status === 'underpaid' || inv.status === 'confirming'; @@ -140,110 +140,133 @@ const remainingSec = Math.max(0, Math.floor((expiresAt.getTime() - now.getTime()) / 1000)); const mins = Math.floor(remainingSec / 60); const secs = remainingSec % 60; + const pct = Math.min(100, Math.round((received / total) * 100)); + const invPlanNames = { pro: 'Pro', pro2x: 'Pro 2x', pro4x: 'Pro 4x', lifetime: 'Lifetime' }; + const invPlanLabel = invPlanNames[inv.plan] || inv.plan; %> <% if (isPending) { %> - <% } %> -
+
- <% if (inv.status === 'confirming') { %> - - <% } else if (inv.status !== 'paid') { %> - -
- QR Code + +
+
+ <%= invPlanLabel %> + <% if (inv.months) { %><%= inv.months %>mo<% } %> +
+
$<%= Number(inv.amount_usd).toFixed(2) %>
- <% } %> <% if (inv.status === 'pending' || inv.status === 'underpaid') { %> - -
-
<%= received > 0 && remaining > 0 ? remaining.toFixed(8) : inv.amount_crypto %>
-
<%= inv.coin_label %> (<%= inv.coin_ticker %>)
-
$<%= Number(inv.amount_usd).toFixed(2) %> USD
-
+
- <% if (received > 0 && remaining > 0) { %> - -
-
- Received: - <%= received.toFixed(8) %> -
-
- Remaining: - <%= remaining.toFixed(8) %> + +
+ + + + QR Code + + + +
+
Send exactly
+
+ <%= received > 0 && remaining > 0 ? remaining.toFixed(8) : inv.amount_crypto %> + <%= inv.coin_ticker %> +
+
+ + <% if (received > 0 && remaining > 0) { %> + +
+
+
+
+
+ <%= received.toFixed(8) %> received + <%= remaining.toFixed(8) %> left +
+
+ <% } %> + + +
+
+ Address + +
+ <%= inv.address %> +
- <% } %> - -
- - <%= inv.address %> -
- <% } %> - - - <% if (inv.status === 'pending') { %> -
- - Waiting for payment... -
-
- Expires in <%= mins %>:<%= String(secs).padStart(2, '0') %> -
- - <% } else if (inv.status === 'underpaid') { %> -
- - Underpaid - please send the remaining amount -
-
- Expires in <%= mins %>:<%= String(secs).padStart(2, '0') %> + +
+
+ + <%= inv.status === 'underpaid' ? 'Underpaid, send the rest' : 'Waiting for payment' %> +
+ <%= mins %>:<%= String(secs).padStart(2, '0') %>
<% } else if (inv.status === 'confirming') { %> -
- +
+
+ +
+

Payment received

+

Waiting for network confirmation

+ <% if (inv.address) { %> + View on explorer → + <% } %>
-

Payment received

-

Waiting for 1 network confirmation...

- <% if (inv.address) { %> - View on block explorer → - <% } %> <% } else if (inv.status === 'paid') { %> -
- +
+
+ +
+

Payment confirmed

+

Your <%= invPlanLabel %> plan is now active.

+
+ Back to settings + Receipt +
+ <% if (inv.address) { %> + View on explorer → + <% } %>
-

Payment confirmed

-

Your plan has been activated.

-
- Back to settings - View Receipt -
- <% if (inv.address) { %> - View on block explorer → - <% } %> <% } else if (inv.status === 'expired') { %> -
- Payment expired +
+
+ +
+

Invoice expired

+

This payment window has closed.

+ Try again
- Try again <% } %>
-

You can leave this page. Payments are detected and confirmed automatically.

+

You can close this page. Payments are detected automatically.

<% } %>