Checkout v2 finetuning

[dennisreimann]

Finish the open TODOs from #4157:

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

Some more feedback from Pav:

• [x] What happened with powered by BTCPay Server link?
  • It was missing, fixed!
• [x] 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.
• [x] Consider adding logo recommended size
• [x] 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.
• [x] 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?
• [x] 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?
• [x] 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.
• [x] 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.
• [x] 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
• [x] 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.
• [x] We said them to "send another transaction to cover due", wouldn't it be easier to just say please send amountDue.?
• [x] 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.
• [x] 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:

• [x] 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.
• [x] when swithing payment methods, its a full page reload. Is that intended?
  • It was missing the AJAX action, fixed!
• [x] 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:

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

[pavlenex]

@dennisreimann Can you add this to a to-do:

• 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.
• 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
• Mine button in dev enviroment doesn't seem to work with the new page
• If no logo is sent should we default to BTCPay Logo? Looks kinda empty and not fun without a logo?
• Consider adding logo recommended size

[dstrukt]

Determined we should only show the Store name if no logo, not the btcpayserver logo to reduce any potential confusion.

Visual nits - can deal with these in a better way, but just jotting down everything so it's at least in one place:

• [x] Adding a subtle drop-shadow to the main container to help break up the content a little bit more
• [x] Improve the language dropdown selector styling
• [x] Tighten up padding between logo mark and the store title text 8px
• [x] Tighten up the bottom-padding between the logo text and the top of the container element 24px
• [x] Update The invoice will expire... to This invoice will expire... copy
• [x] Replace the back carot asset (will send asset via MM)
• [x] MORE TO COME

[dennisreimann]

Here's a simple idea for displaying the bitcoin address / BOLT11 and having a more obvious way to copy them.

Also: Should it be only the address / BOLT 11 or full URL?

What do you think @pavlenex @kukks @dstrukt?

[pavlenex]

@dennisreimann Great updates. I've seen a bunch of stuff is being marked as done (ticked), but after testing it seems a few of those have not been addressed:

• Powered by BTCpay link is still gone
• 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.
• 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.

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. One example is, we said them to "send another transaction to cover due", wouldn't it be easier to just say please send amountDue.?

[dennisreimann]

@pavlenex I just pushed some more updates to the PR, it is also rebased on current master.

1. and 3. shoudl be done, please check you are running the latest version.

I added 2. as a T.B.D. point.

One example is, we said them to "send another transaction to cover due", wouldn't it be easier to just say please send amountDue.?

Changed that as well, makes total sense and is very precise.

[dennisreimann]

With regards to the logo discussion: I could also see us simply pimping the footer and adding the logo there like in the current state — I think this is a nice middleground and not as invasive as presenting our logo as the default at the top. /cc @pavlenex @dstrukt

[dstrukt]

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. One example is, we said them to "send another transaction to cover due", wouldn't it be easier to just say please send amountDue.?

Absolutely agree the copy needs to be addressed in a better way, so many little areas for improvement, but realize it's a more involved effort.

1. @dennisreimann I like the hover effect, and think it makes sense to keep it present, but more muted. ACK from me.

2. Agree with @pavlenex here I think .. just list the Store name in plain text .. or if we really want to keep the circle asset, we could do something the S in a circle with the plain text Satoshi Steaks underneath .. otherwise, should just be the text

3. ACK, but i guess it's not as clear on mobile, but we could default to making it visible to the right of the address/amount/etc..

4. Do we want to show the Theme switch? Or just have it inherit from the Store? Not a fan personally.

[pavlenex]

• 1. Ack for store link
• 2. With btcpay logo on the link, I don't mind having no logo as a @default
• 4. Agreed there's no reason why theme needs to be on the checkout. I don't think any payment processor has that kind of functionality.

[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.

[dennisreimann]

Integrated the SideShift and FixedFloat plugins, see also Kukks/btcpayserver/pull/8.

[dennisreimann]

Regarding the translations, this is what @pavlenex and I discussed today:

• The first iteration of Checkout v2 will be english-only, no language switch available
• We'll finetune the copy and have it translated afterwards
• Checkout v2 translations will be a new file in Transifex

Collecting topics for the upcoming design meeting:

• Refining the copy
• Payment methods display
• Displaying the Bitcoin address / BOLT11
• Is the copying feature prominent enough
• #4137 integration

[dstrukt]

Will be updating this as I go:

Open Questions / Discussion:

• Should we show the address so visibly, or should it be a bit more hidden / behind a click? -- Rough consensus is that it should not be visible by default, but hidden away behind a click, on it's own modal/tabbed view so we can add >1 information, with the added benefit of being able to scale as well as keeping the view more minimal

• Displaying the Bitcoin address / BOLT11 .. more addresses (or potentially all) should likely be hidden behind an additional click..? -- See above point

• Should we round the borders for the QR code? (would obviously involve adjusting the inner elements as well, but...) -- Unresolved, will address in Thursday's call

Bugs

• [x] If an invoice is expired, and there are no additional Details, the View Details accordion button still appears, and when clicked just opens and closes, showing no additional data -- Couldn't reproduce (@dennisreimann)

Copy Suggestions

• [x] Expiry suggestions: This invoice will expire in 0:33
• [x] Send suggestion: Please send 0.000000 BTC. to Please send 0.000000 BTC to the address below.?

Functional & Visual

• [x] Pay with Bitcoin should be removed if it's just the BIP 21 invoice imo, and/or we should find a better to incorporate that text

• [x] Logo vs. No logo default implementation

• [x] We could do a desktop copy icon on :hover like so ... this could also be applied to the larger BTC amount

OR have the copy icon appear for all of them, still debating if I like this for the larger BTC amount

Visual

• [x] Update the carot asset (sent directly @dennisreimann via MM)

• [x] Should we align the carot and the title on the same horizontal line? As opposed to absolute positioning on the carot?

• [x] Adjust the left value to be our 400 (light/dark) value:

• [x] Adjust the .mt-5 to .mt-4 classes for the section and the the inner input components

Few more iterations now that we're settling on the last touches, something worth discussing:

• [x] Finalize View Details button -- Decided on moving the most minimal version with the carot moved to the right

• [x] Finalize Language button

[pavlenex]

Good work, looks solid, but I found two bugs around expired paid partial.

To replicate

1. Have a partially paid invoice and expire it
2. Click on view details accordion, no details are shown
3. Click on back to store, you are directed to a receipt page which is not correct. (when receipt is disabled it doesn't happen).

Not a bug, but the error screen is not good. It acts as like invoice is expired not partially paid expired, this gives a bad experience leading customer into thinking nothing has been paid. We need to address this post 1.7.0 as we improve error screens.

https://user-images.githubusercontent.com/36959754/202670574-13eec465-ab35-4474-9f35-9b90f6a57b5d.mov

[dennisreimann]

@pavlenex Should be fixed with my latest commits. Can you check again?

[pavlenex]

Yup, thanks for fixing those @dennisreimann 🤝