Enable NFC payments for Lightning Cash Register (galoy-pay)

[agbegin]

Overview

The cash register is a point of sale web app for receiving sats online or in-person. Anybody with a Bitcoin Beach Wallet username can access their register at https://pay.bbw.sv/agbegin [where agbegin is the username].

We'd like to enable NFC payments in the cash register, so people using Bolt Cards or other contactless payment methods can tap to pay. A visual icon should be shown to launch a modal window that informs the user to tap to pay (in mobile web browser, user must interact to enable NFC). Error messages should be considered where appropriate (are we able to detect if funds aren't available on a card?). The user experience should be simple and easy to follow from both the sender and the receiver point of view.

Proof of concept PR #390 can be completed/adapted as appropriate for this bounty.

See testing done by @dolcalmi: https://twitter.com/BTCBeachWallet/status/1613012324410953730

Review discussion GaloyMoney/galoy#1351 for helpful background resources.

Task

Submit a PR to galoy-pay that will allow users to tap on an Android phone (versions 6+) with an NFC card to pay their invoice on the Lightning Cash register.

Recommended steps

• Share front end design/UX recommendation in a PR before starting the dev work (icon, copy, recommended alerts), address feedback
• Submit PR for code implementation (new PR or completion of feat: add nfc card reader support #390)
• Address all feedback on submitted PR

Target completion

15 February 2023

Definition of Done

• PR is merged and feature is working in production environment

Bounty

2M sats (0.02BTC)

Bounty Patrons

Galoy

[titusz]

I think it would be a better user experience if the merchant does not need to activate NFC reading with a separate button push. For example in breeze wallet POS you can simply tap & pay as soon as the invoice QR is shown.

[agbegin]

Thanks for the comment! I agree that it would be good if the NFC does not need to be activated to be functional. I'm not sure if it needs to be in a web app (vs. mobile app), do you know?

[dolcalmi]

if it is running in a browser the action needs to be done/initiated by an user action (ex click on a button)

[titusz]

I just did a short test, You need to ask the user permission once. But after that you can initiate scanning on page load without further user action required. See: https://web.dev/nfc/#check-for-permission

[agbegin]

@titusz nice. Maybe something like a toggle switch or an icon that can change state (off to on) could be better than a button that users think they need to tap every time?

Thanks for the input and digging. Are you interested to pick up the bounty :) ?

[titusz]

Yes, a toggle switch might be a good solution. Thanks for offering to pick up the bounty. Unfortunately I am a python backend guy with zero javascript frontend experience. I hope someone picks this up.

[kobieaw]

Hi everybody, I am working on this now. Should have it done in a week or so

[titusz]

Great. Happy to help with testing when its time...

[titusz]

Would be great if you can also give an audio signal when the NFC tag has been read successfully (before processing the transaction). It helps the user to know when to remove the NFC tag.

[shock143]

Awesome!!!
I'm ready to test it.

[kobieaw]

Sorry had caught covid, should've notified you guys. I do have a question, is the "read card" under the QR code for NFC reader?

[kobieaw]

For sharing the front end in a PR, would you guys like in #390 or in a new one? I'm asking just cuz it wasn't specified in the first bullet point.

[kobieaw]

And if someone could send me a .png or whatever file of the icon that is displayed next to "Read Card" in the Overview (on this same discussion) would be appreciated. Will find another one in the mean time

[nicolasburtey]

My suggestion would be to base your PR on @dolcalmi PR but create another one on top of it