QR Codes Implementation
How to increase the payment form conversion rate and total overall
Last updated
How to increase the payment form conversion rate and total overall
Last updated
Among the best practices of working with cryptocurrencies there is a one that highly increases the payment form conversion rate and total overall.
The main idea is to provide a user with QR code that he can use as an automatic way to open his wallet application and send a cryptocurrency in one click.
The most important features of this method are:
Quick access from the mobile devices
Predefined cryptocurrency
Integrated clickable link that opens the wallet application
Optional features are:
Predefined amount
Inline comments with the payment description
Almost every PC user uses email links on the websites sometimes. It looks like the following link:
mailto:address@email.com
When one clicks such link an email client will be opened automatically. The user will see the form for composing a new email that contains a recipient email address in the field "To". In other cases different fields, like the field "Subject", will contain the data too.
The same user-friendly way of interaction can be used with the crypto wallets too. BTC link can be the following:
bitcoin:3AFaCnqriLNxj15kqtp5Pxn8puHfuqbX7W
If the user has a wallet application on his device and follows this link, wallet application will open with the specified address. In this case the user should make the only one action to click a "Pay" button in order to proceed the payment.
BTC URI supports not only the address, but also another options. For example, a payment amount.
BTC URI has a special standard "BIP-0021" described here:
https://github.com/bitcoin/bips/blob/master/bip-0021.mediawiki
The common way to provide a crypto address for a user is to show him the address as a text string:
"Please, make a deposit using the following BTC address: 3AFaCnqriLNxj15kqtp5Pxn8puHfuqbX7W"
If the user has the crypto wallet application on the same device, he should:
Copy this address to clipboard
Find and open his crypto wallet application
Open the "Withdraw" section in the application
Paste the crypto address
Click a "Send" button to transfer his money
The more actions user should make the more probably he would not pay. That is why the crypto address has to be presented at least as a clickable link using a specific URI format (see the What is a crypto wallet URI format? section).
QR code (Quick Response code) is a special visual method of data encoding and transferring that is usually used for simple and fast semi-automatic interaction with user's mobile devices. It can contain any text data, including URL links. When user uses his phone to scan the QR code, the data inside QR code will be decoded. If it is a link associated to a special application user's smartphone will react in a predefined way. For example, it can suggest the user to follow the URL using a web browser or to send the money using his crypto wallet application.
As we described above, the user has to follow 5 steps in order to make a deposit, if he uses a web browser and a crypto wallet on the same device. That is why the address should be presented as a link instead of text string.
But imagine now, that user appears on a page with the payment form using his laptop and his crypto wallet application is installed on the user's smartphone.
At worst case the only way for user to pay is to type every symbol from the address manually. The most likely that the user will leave the form without the deposit. That is why the QR code with the crypto address should be used at the same time as a link.
What we need to provide the best user experience is only to encode into QR code a simple URI with the crypto address inside.
The simplest way to create QR code is to use Google Chart Service. It is a special service that generates universal QR codes and has very simple API to manage it. According to the request parameters QR code will contain the necessary data and it will have defined size dimensions.
A minimum set of parameters is: chs - chart image size cht - chart type ("qr" is necessary for QR code) chl - the data encoded in your QR code choe - encoding type of the QR code data
Detailed description can be found here: https://developers.google.com/chart/infographics/docs/qr_codes
In order to create the QR code we can use Google Chart Service and encode the URI described in What is a crypto wallet URI format? section.
To create simple QR code including the link to the bitcoin address the following parameters should be used: https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=bitcoin:3AFaCnqriLNxj15kqtp5Pxn8puHfuqbX7W&choe=UTF-8
You can use this link directly inside the <img> tag:
chs - QR code size ("150x150" size is used as an example) cht - chart type ("qr" is necessary for QR code) chl - the data encoded in the QR code ("bitcoin:3AFaCnqriLNxj15kqtp5Pxn8puHfuqbX7W" has been used in the example above, but additional parameters can be used according to "BIP-0021" standard documentation: https://github.com/bitcoin/bips/blob/master/bip-0021.mediawiki) choe - encoding type of the QR code data ("UTF-8" is required by "BIP-0021" standard)
When user scans this QR code he will be able to open the wallet application and to make the deposit in one click.
In this article we described how to increase the conversion rate and as a result total overall of the payment form for two scenarios. To be sure that the users will have a good experience in both cases all we need is to combine these two methods and use them on the payment form in the same time.
So, the last step is to make the QR code clickable.
After that it is no matter if the user appears on the payment form using his laptop or smartphone. He gets the possibility to make simple and fast payments in one click without any inconveniences.
To make this experience even better, it will be a good idea to provide the payment form with:
clickable QR code
crypto address as a link
current or approximate exchange rate
minimal deposit limit
warning about the crypto currency that should be used with the specified address
As a result it will be a good form that may look like this:
An example of QR code:
