Checkout v2 finetuning

Finish the open TODOs from #4157:

• Show payment details on result pages, see #4240
• Integrate the form builder templates from #4137
  • We decided to separate those steps and have the form after the invoice has been paid.
• Adjust the design so that the QR will be shown above the fold on smaller devices
• Improve the cheating capabilities
  • Mining block
  • Lightning payments
  • Expiring invoices
• Move the JS parts of the new checkout out of the template into a separate JS file
• Plugins integration
• Refine the UI/UX of the payment methods
• Tests for Checkout v2

Some more feedback from Pav:

• What happened with powered by BTCPay Server link?
  • It was missing, fixed!
• If no logo is sent should we default to BTCPay Logo? Looks kinda empty and not fun without a logo?
  • In the design meeting we discussed this and decided to just omit the logo in that case. This is mainly to not confuse the customer, because BTCPay isn’t selling anything.
• Consider adding logo recommended size
• Add hover icon over amount, just like we have for the QR code, to make it easier for people to know amount can be copied by clicking.
• When invoice is expiring, we need to not just tell people it’s expiring, but also make sure to tell them what to do? Pay your invoice before it expires?
• When invoice is expiring, we need to not just tell people it’s expiring, but also make sure to tell them what to do? Pay your invoice before it expires?
• When invoice is partially paid, we’ll have to work on some text, and perhaps make it more obvious, the text just blends in into the design. I still think we don’t make it obvious that they need to pay the amount exactly show.
• When invoice is partially paid, we’ll have to work on some text, and perhaps make it more obvious, the text just blends in into the design. I still think we don’t make it obvious that they need to pay the amount exactly show.
• Change text fromInclude Lightning invoice fallback to on-chain BIP21 payment URL to Unify on-chain and lightning tab can potentially link to https://bitcoinqr.dev/ if you think extra context is needed
• not convinced people won’t enter the fiat amount instead of exactly BTC amount. I don’t have a clear suggestion about this, but I think we really have to think about this as we work on improving the v2 checkout page.
  • I’d consider this addressed with these changes.
• We said them to “send another transaction to cover due”, wouldn’t it be easier to just say please send amountDue.?
• I think after the last round of feedback, we’ll have to decide if we want to address the copy as well, or do we leave it for 1.8.0, as I am certain we can go a long way on better explaining what is needed from customer when there’s a problem.
• When no logo is set up (default) is that we don’t have BTCPay Logo. I’d like to ask to reconsider this, mostly because some merchants just love being associated with BTCPay Server, and it brings confidence to customers as well, unlike the faceless checkout. I think that default should be BTCPay’s logo, also for marketing purpose.
  • T.B.D. One counterpoint we discussed in the design meeting is that people might think they are buying directly from us, which might increase the support issues
  • I’d still like to have the option to have the page without logo in case we have BTCPay as a default.
  • Resolved by having the BTCPay logo more prominent in the footer
• not convinced it’ll be obvious to people that they have to click on a QR in order to copy the address
  • We could display the address and have it clickable like the rest of the info. That’d also address kukks’ point about him missing the address visually.

Feedback from Kukks:

• is the ln node connect option gone for good?
  • Yes, we agreed this isn’t a primary action and there’d be other ways to solve it (public node info page) than on the checkout page, where the focus should be paying. We don’t think anyone will try to open a LN channel before just trying to pay.
• when swithing payment methods, its a full page reload. Is that intended?
  • It was missing the AJAX action, fixed!
• the amount header shows the due amount, but the sub header invoice amount always shows the full inv amount. One would not realize that it was updated and think the new due amount equals the invoice amount?
  • I’d consider this addressed with these changes.
• not showing a bitcoin address feels very weird

Community feedback:

• WebLN support
  • The bsics work already, because we use lightning: links.

[dennisreimann]

We can redo the copy and ask people to translate it once v1.7 is out. I’ve already added several new strings, just let me know what updates should be made.

[pavlenex]

Yup, thanks for fixing those @dennisreimann 🤝