Tap to Pay on any device by using an NFC tag

#webdev #showdev #ios #android

A web app implementing the ideas described in this post can be found at Tappie.money.

A while ago, Apple released Tap to Pay on iPhone, which allows an iPhone to act as a payment terminal (also known as SoftPOS). There are several third parties offering similar functionality for Android.

The major selling point is that it allows the user to accept payments without the need for additional hardware. However, there are some downsides to the current offerings:

Requires the user to sign an agreement with a third party payment provider
Often high transaction costs
Only available in a few regions
Only available for a few specific devices

In this post, we will attempt to create similar functionality, without the downsides listed above.

Building our own Tap to Pay solution

When we break it down, Tap to Pay consists of two functionalities:

Create a payment request on a phone
Allow request to be paid by tapping the phone

Creating a payment request

Fortunately, it’s already possible to create payment requests on your phone, either through most banking apps, or through third party services like Tikkie.

https://mybank.com/paymentrequest/1234

All we need now, is a way to offer these payment requests to a customer device by tapping the phone.

Delivering a payment request

Tap to Pay on iPhone uses the NFC chip in the phone, as does the Android version. Unfortunately, using the NFC chip for payment is restricted to participating payment providers.

We can work around this issue by using a standard NFC tag, instead of the NFC chip in the phone. These tags are very cheap, as they usually cost less than $0.20, or one could use an old hotel room key or public transport ticket.

An advantage of this approach is that it allows us to physically separate the payment terminal from the phone, and get creative with the placement of the tappable surface. Instead of sticking the NFC tag to a phone, we could also stick the tag to the counter in a store, or on a product.

Fig.1 - NFC tags

NFC tags can store URLs, which, when tapped by a device with NFC reading capabilities, usually redirect the user to the read link. Payment requests, as created in banking apps, often come in the form of a URL. This means we can store a payment request on an NFC chip, which, when tapped, sends the customer to the payment page.

Fig.2 - NFC tag with URL, read by phone

Reduce write actions to improve UX

Writing a new payment request to the NFC tag for each payment seems like a hassle. Fortunately, we can work around this issue by using a redirect URL. The URL we store on the tag points to a page we control. This page retrieves the URL of the current payment request from our database, and redirects the user to this URL.

With a simple CRUD application, we can update the payment request the tag points to, without having to write anything to the tag. We can password protect this operation, so only the owner of the tag can update the current payment request.

Fig.3 - NFC tag with redirect URL, payment request URL retrieved from DB

Now that we store the redirect URL on the tag, we don’t have to write to the tag for each new payment. However, we still need to do an initial write operation to store the redirect URL on the tag. We can use the Web NFC API for this. We simply generate a unique redirect URL, and write this to the tag with the press of a button. In this process, we also allow the user to password protect their tag.

Fig.4 - Writing redirect URL to tag

Streamline process of updating payment request to improve UX

Although this works, updating a payment request is quite a lot of work, as it requires us to copy-paste the payment request URL from the banking app to our solution. We can make this easier by creating separate PWAs for separate tags, and register these PWAs as share targets. Now, if our banking app offers a Share button after creating a payment request, we can simply send the request to our app through the system share dialog.

Fig.5 - Send payment request to tag through system share dialog

Conclusion

We now have a solution which is similar to Apple’s Tap to Pay functionality. Let’s list the pros and cons of this solution:

Pros:

Does not require a third party payment provider
Transaction costs your bank offers
Available in all regions
Available on all internet connected devices (although you do need a NFC supporting device for initial setup)
Surface to tap can be your phone, but can also be placed on the counter of your business, or on the product itself

Cons: