Articles
No Results

Create Publication

We are looking for publications that demonstrate building dApps or smart contracts!
See the full list of Gitcoin bounties that are eligible for rewards.

Article

Payment Prompts with Algorand Mobile Wallet

Version 4.8 of the Algorand Mobile Wallet enhances the ability to use QR codes to create and send basic transactions. This document provides a brief overview of how developers and users can take advantage of this improved functionality.

For Developers

Developers in the Algorand ecosystems may encounter a situation where they want to prompt users to create and send specific transactions. For example, a coffee shop that accepts Algorand USDC as a payment will need customers to create transactions with a specific amount, asset ID being transferred, and maybe a specific value in the note field.

This is possible through the use of Algorand URIs. The sections below explain how to construct Algorand URIs and QR codes which are compatible with the Algorand Mobile Wallet.

URI Scheme

In order to prompt users to create transactions that send Algos or ASAs, you first need to construct a URI that conforms to the Algorand URI Scheme. When a user opens an Algorand URI and they have the Mobile Wallet installed, the app will open and handle the URI properly.

Algorand URI should start with algorand://, followed by the address of the receiver, and then parameters for the transaction. For example:

algorand://WSJHNPJ6YCLX5K4GUMQ4ISPK3ABMS3AL3F6CSVQTCUI5F4I65PWEMCWT3M?amount=5000000&asset=31566704&xnote=Order%20250

This URI is a prompt to transfer 5 USDC to address WSJHNPJ6YCLX5K4GUMQ4ISPK3ABMS3AL3F6CSVQTCUI5F4I65PWEMCWT3M with a note of “Order 250”.

Below are brief descriptions of some of the parameters. A complete description of the Algorand URI Scheme and its parameters is also available.

  • asset: This parameter determines whether the transaction will send Algos or an ASA. If you want to send an ASA, set this parameter to the ID of the ASA. Otherwise, if this parameter is not present, the transaction will send Algos.
  • amount: This is the amount of Algod or the ASA to send in the transaction. Note this amount is in the smallest unit of the asset.
    • For Algos, the smallest unit is the microAlgo. 1,000,000 microAlgos = 1 Algo.
    • For ASAs, the smallest unit depends on the number of decimals the ASA is configured to have. If an ASA has d decimals, then an amount of 10^d basic units is equivalent to 1 unit of the asset.
  • note and xnote: These parameters can be used to specify what the note field of the transaction should contain. The value of this parameter must be percent-encoded if it contains special characters. If “note” is used, then the user will have the option of editing the note field before submitting the transaction. If “xnote” is used, the note field will not be editable by the user. If your application has strict requirements for the note field, it’s best to use “xnote”. You should not specify both “note” and “xnote”.

QR Code Creation

In addition to prompting transactions with URIs, you can also turn these URIs into QR codes that users can scan to create transactions.

To do this, first create a URI for your transactions, encode it as a QR code using any standard QR conversion library or tool. For example, here’s the same URI as before as a QR code:
EditorImages/2021/04/20 20:10/QR1.png

Once you’ve generated the QR code, you are ready to show it to users!

For Users

Users should be aware that they can use the Algorand Wallet’s QR scanning functionality to sign app-specific transactions. Algorand URIs and QR codes to create payment transactions. This section walks through how the Algorand Mobile Wallet can be used to create transactions like this. preview and sign transactions by scanning a QR code presented to them.

Scanning QR Codes

To scan a QR code, press the QR button in the top right corner of the home screen.

EditorImages/2021/04/20 20:20/accts.png

This will open a screen that uses your device’s camera to scan a QR code. Once the code has been scanned, you can follow the same steps as the section below for opening an Algorand URI.

Opening Algorand URIs

To create a transaction from an Algorand URI, simply press the URI. This will open the Algorand Mobile Wallet to the following screen:

EditorImages/2021/04/20 20:22/screen.png

From this screen, you can choose which account will be the sender of the transaction. After choosing the sender, you will see a transaction creation screen with all of the values from the URI filled in:

EditorImages/2021/04/20 20:23/screen2.png

If everything looks acceptable, press the preview button to continue to the transaction confirmation screen

EditorImages/2021/04/20 20:56/screen4.png

This is your final chance to review the transaction before it is submitted to the network. If you are happy with it, press send!

You have now successfully created a transaction from a QR code or Algorand URI.

What’s next?

While we’re excited to release this functionality to encode basic Algorand transactions, we’re also working hard to support more complex transactions and application calls. Our hope is that you’ll be able to use the Algorand Wallet to sign a multitude of transactions from any number of different types of applications.

Lastly, this is a feature that has been requested many times by Algorand developers and community members, and please keep the feedback coming! If you have feedback or need help in integrating the Algorand Wallet with your app workflows, please reach us on Discord in the #algorand-wallet channel.

wallet

April 23, 2021