How to add QR Code Functionality to your App or Website

Published in

The Era of APIs

6 min readMay 6, 2020

QR (Quick Response) codes are now everywhere. They simplify human lives and are used widely in marketing campaigns, products, banking, media, etc. In the era of smartphones, the value of QR code applications is rapidly increasing. This means that if you develop your web, mobile, or even desktop app, you might need to be able to support QR code generation and recognition. Fortunately, a feature for generating QR codes can be easily done using a special API.

How to get access to the Custom QR Code with Logo API

Custom QR Code with Logo API is available on the RapidAPI platform. To start using this API you should perform the following steps:

1. Sign Up for a RapidAPI user account.

After registration, you will get access to over than 10000 APIs on RapidAPI — the world’s largest APIs marketplace. There are APIs for computer vision, natural language processing, geolocation, finance, gaming, sport, flight booking, and many, many others. All you need to do to find the right one is to choose the features your applications need.

2. Find the Custom QR Code with the Logo API page.

To do this, you can use the direct link, search functionality of the RapidAPI website, or browse the categories menu:

3. Subscribe to the API.

To start using the API on the RapidAPI platform you should choose the pricing plan:

Hint: there are free basic plans for many APIs which are ideal for exploration.

Now you are ready to use the Custom QR Code with Logo API.

How to use the Custom QR Code with Logo API

Custom QR Code with Logo API is rather easy to use. It has 3 functions:

Create custom QR code (has both GET and POST endpoints);
Create a custom transparent QR code (has both GET and POST endpoints);
Upload an image to be used as a logo or as a background in transparent QR code.

In this article, we will be using the Create custom QR code (GET) endpoint. RapidAPI does a pretty good job of describing most parameters. But it is not true for the “config” parameter as it is a JSON and contains a lot of parameters in itself. You can read more about “body” parameters in the official documentation. But we will briefly take a look at some of the key parameters:

body — shape of small figures around the QR code;
eye — shape of a frame surrounding corner figures;
eyeBall — shape of corner figures;
bodyColor — color of small figures;
bgColor — background color (should be lighter to be scannable);
eye/1/2/3/Color — color of a specific “eye”;
eyeBall/1/2/3/Color — color of a specific “eyeBall”;
logo — usage of uploaded to this website logo;

*Note: all colors should be hex values. E.g. “#000000” for black.

Sample application that uses the Custom QR Code with Logo API

Custom QR Code with Logo from qrcode-monkey.com provides great possibilities in terms of design. The design itself can be used to make a QR logo for a number of URLs. Let’s say you have an eCommerce app and you have to return a QR Code for each payment. In this example, we will do just that.

We could use the Create Custom QR Code GET endpoint for this. But we will use Create Custom QR Code POST because all the data comes in one JSON while GET does not relieve us from using JSON completely.

1. Form a request using the RapidAPI interface to create the body and test the request.

After a little testing and playing with the design we have the following body:

From the sample config, we have changed cosmetic parameters: “bodyColor”, “eye1Color”, etc. Also, we have changed “data” to point to rapidapi.com and logo so we have a logo of RapidAPI on the QR code. Of course, in a practical case, these parameters will point to the payment URL and have (or not, as a logo is optional) your app logo.

2. Copy the Python Code to your Script

In the right section of the RapidAPI interface, we can navigate to “Code snippets” and select the programming language and specific libraries to get the code we need.

Now we can copy the code and paste it in the script we are going to use.

3. Finish the Script

import requests
import sys

url = "https://qrcode-monkey.p.rapidapi.com/qr/custom"

target_url = sys.argv[1]

payload = "{'data':{target_url},'config':{'body':'leaf','eye':'frame1','eyeBall':'ball0','erf1':[],'erf2':[],'erf3':[],'brf1':[],'brf2':[],'brf3':[],'bodyColor':'#1c4473','bgColor':'#FFFFFF','eye1Color':'#71859c','eye2Color':'#71859c','eye3Color':'#71859c','eyeBall1Color':'#1c4473','eyeBall2Color':'#1c4473','eyeBall3Color':'#1c4473','gradientColor1':'#526a8c','gradientColor2':'#526a8c','gradientType':'linear','gradientOnEyes':false,'logo':'https://www.finsmes.com/wp-content/uploads/2018/03/rapidapi.jpg'},'size':600,'download':false,'file':'png'}"

headers = {
    'x-rapidapi-host': "qrcode-monkey.p.rapidapi.com",
    'x-rapidapi-key': "***************************************",
    'content-type': "application/json",
    'accept': "application/json"
    }

r = requests.request("POST", url, data=payload, headers=headers)

if r.status_code == 200:
    with open('result.png', 'wb') as f:
        for chunk in r:
            f.write(chunk)

You may notice that there are few changes to the script:

We added ‘sys’ library and used ‘sys.argv[1]’ to get the URL we want our QR to point to from the command line.
\”(double quotes) in replaced with ‘(single quotes). This way the string is more readable and can be used as an ‘f-string’.
Finally, at the end of the script, we added some commands to decode and save the image as a file for further use.

4. Test the Application

To test the script we only need to start it from the command line:

python script.py rapidapi.com

where “rapidapi.com” is the target URL.
Just like that, we got the custom QR Code downloaded:

Conclusion

QR codes can be used for a wide variety of scenarios in your applications. For example, you can send your customers QR codes so that they can just scan it and immediately get sent to the payment page. As the URLs of the payment pages can be unique, your system will recognize completed payments. This can help in the monitoring of business metrics as well as in accounting.

The perfect use case for QR code application would be a situation when you need to conveniently and quickly share some information with somebody. To simplify it, you can use the Custom QR Code with Logo API in your application. In this tutorial, that we hope was helpful for you, we tried to cover the basic functionality of the API. Note, that the RapidAPI platform has a lot of other useful APIs so you can make your applications more powerful and efficient.

Originally published at https://rapidapi.com on May 6, 2020.