How to add crypto payments to your online store?
Offering a wide range of payment options is vital for an online store. Having an integrated crypto payment option for your website is even better.
Today, we will take a look at how to add crypto payment options to your online store with the help of Pay Crypto Widget developed in the Waves ecosystem. We’ll show you how to integrate WAVES token, but also how you can create your own cryptocurrency with just one click, to use as a loyalty token or a payment token.
Using WAVES token
Let’s start with the easy part. There are two short steps we will go through, to get WAVES accepted as a payment option:
It’s all remarkably easy — just two lines of JavaScript code are sufficient to start accepting payments in WAVES on your site.
Creating your own token
Any token from the Waves ecosystem can be used as payment in online stores. However, what if you want to issue your own cryptocurrency as a loyalty token or as a payment option? Or maybe your company wants to give employees a chance to buy the perfect corporate christmas gift? For all these scenarios we need to create a new token. To do so, we need to use an account on Waves.Exchange.
Creating your own token on Waves.Exchange is very straightforward, all guidelines are in the documentation that can be found here. Choose your token name, add a description and decide on the total token issuance amount.
As an example, we are creating a token named Pay Coin with a total number of coins in circulation set at 1,000. In turn, each token is divided into 100 “cents.” Please, note that you cannot issue additional coins at a later stage.
New tokens are created with a ‘Token Issue’ transaction. Once this Token Issue transaction has been sent to the network, information on the newly created token will appear in a new window:
A token’s unique identifier (asset ID) is a key attribute: (DxXgPKdYiLHPqk6aF4ju6E3ZBHQgKDqueauGiwwVZpwv). It is generated automatically and equals to the transaction identifier (TXID).
By default, all newly created tokens are sent to your wallet. To put them into circulation, you can trade them in the Waves.Exchange trading console, send to your friends or employees for free, and sell them to other individuals. You may also decide to do an airdrop, which means that you send your tokens to a range of known network addresses.
As we suggested at the beginning, your own token can be a means of payment in your online store. To make integration of this tool as easy a way as possible, the Pay Crypto widget was developed, which can be connected to any website using JavaScript.
Detailed guidelines for connecting the widget are available in the repository, as well as a demo. In this article, we will focus on the key elements of setting up the widget’s logic.
Adding a crypto payment option in two steps
Let’s start by adding a source code file into your JavaScript code:
<script src=”<WIDGET_SOURCE.js>”></script>
Once it has been added, we need to initialize the widget and set two key values: recipient address (or alias) and token ID:
dApp.widget.initWidget(“<recipient address or alias>”, “<asset id>”);
For instance, if I want my token to be accepted in an online store and all payments to be sent to my account using its alias (vlzhr), these values need to be set as follows:
dApp.widget.initWidget(“vlzhr”, “DxXgPKdYiLHPqk6aF4ju6E3ZBHQgKDqueauGiwwVZpwv”);
When a user puts products in the basket and presses the “Pay” button, a payment transaction indicating its value (TOTALAMOUNT) will be initialized by JavaScript :
dApp.widget.initPurchase(TOTALAMOUNT)
Congrats, we’ve just implemented the logic of adding crypto payments to an online store using just three lines of code.
Taking care of online store customers
One logical issue needs to be kept in mind, that cannot be resolved with the Pay Crypto widget: in order for a user to use crypto to pay in an online store, a user needs to have sufficient balance on Waves.Exchange.
Looking at WAVES token, this will not be an issue. WAVES can easily be bought for fiat currencies or exchanged for other cryptocurrencies.
If you want to add your own cryptocurrency as a payment option, you’ll have to think of a way to deliver it to users. The easiest solution is the deployment of an instant exchanger between WAVES and your token. This can be achieved quite easily through WaveFlow.xyz. We’re obviously cutting corners here on your majestic token distribution plan, but your own token can be a nice addition to your own project.
The Pay Crypto Widget can also be used with Billy App in your company’s marketplace. However, you could get more creative — for instance, you could use your tokens for a loyalty program, awarding your users for making purchases. The mechanisms of such a functionality transcends the scope of this tutorial. Let’s discuss in our Waves developers’ Telegram chat.
It’s fair to conclude that the Pay Crypto widget is an important tool that could help online store owners to attract more customers by being able to accept cryptocurrencies as a payment option.
We identify however the possible areas in which this tool could be improved. For instance, setting up the widget should ideally be possible for users who have not yet mastered writing code.
The development of Pay Crypto, just like any other product in the Waves ecosystem, is a transparent process. If you are a developer and you are interested in this product, study its TypeScript source code on GitHub.
We’d love to get your feedback — only by joining efforts, can we make Pay Crypto and all of Waves’ ecosystem more useful and efficient. And a bit more fun.
