Build your own Algo based store with Woocommerce and Andpay

Building your own e-commerce store accepting Algo isn’t rocket science. In this short tutorial you’ll have your own Algo based store up and running in a matter of minutes. Without coding skills needed.

Using Cloudways (as hosting platform), Wordpress / Woocommerce (e-commerce) and Algo Payments by Andpay as payment service provider on top of the Algorand blockchain.

1. Create your woocommerce store

First you’ll have to create your own account on Cloudways - in order to create your first Woocommerce shop: setup Cloudways account. After you’ve created your account, you’ll endup on the configuration page to setup your first application.

The preference here is to select DigitalOcean and bring the slider all the way to the left. A message will be shown that it’s not sufficient, however these resources should be fine for a small webshop to function well. If you’d expect a lot more traffic to your store (+ your budget is higher) then consider to go for double the size / up to 4GB.

After you’ve fulfilled the rest of the form, including the location of the servers (choose a location close to your audience), we can move on to the next step by clicking on the “Launch Now” button on the bottom right. Now your server is being created with Woocommerce pre-installed, this will take a couple of minutes.

2. Get an account on Andpay.io - Algorand Payments

While you’re waiting on Cloudways to provision your e-commerce store, you can already use this time to setup your Andpay account. This can be done quite easily by going to Andpay.io/register/, fill in your credentials and submit the form.

We’ll need Andpay - Algorand Payments to function as a payment service provider between Woocommerce and the Algorand blockchain.

3. Time to configure your Woocommerce shop

By now Cloudways is probably done with provisioning your woocommerce store. So now it’s time to go back to Cloudways -> Applications and select your recently created application.

In our case that looks like the following below, whereas the Application Url redirect directly to your new woocommerce store.

In this case we’re particularly interested in the Admin URL part, which will lead you directly to the admin panel of Woocommerce. Once opened, you’ll be asked for a username and password which you can find on your Cloudways dashboard directly below that Admin Url (that you just clicked).

After a successful login, you’ll see the admin panel of Woocommerce in front of you.

4. Start accepting Algo based payments with the Andpay plugin

First we’ll have to download and install the plugin Algo Payments by Andpay. We’ll do this via the public wordpress directory, by going to Plugins (in the left sidebar) > Add New. Now type “Andpay” in the searchbar on the top right.

This will show you the Algo Payments by Andpay plugin which will make it available to start accepting Algo, Yieldly, USDt, USDc, Planets and many more.

Make sure to tap on “Install Now”, wait a bit until the button changes to “Activate”. Then click it once again and the plugin will be installed on your store.

5. Let’s configure Algo Payments

After activation, we can now configure the payment service provider and woocommerce to accept Algo. First we’ll go to Woocommerce (sidebar on the left) > Settings and then select the Payments tab. This will show a list of default payment providers + Algo Payments by Andpay.

Click on Algo Payments by Andpay which will lead you to the configuration page, where you need to perform some small steps. First you’ll need to add the Webhook (url) that is listed to your Andpay settings. This can be easily done by copying the url that is listed and then click on the blue link: “Andpay account settings” (as you’ve previously created an account, this should directly lead to your Andpay settings).

Fill in the webhook url in the Create Webhook section and press Create. This will show a popup with some other credentials, which are not necessary for now.

Then create your API Token (upper part of the settings page), make sure to name it well so you can remember where the API Token is created for. This token will be necessary to securely connect Andpay with your Woocommerce store.

After the token has been created, you’ll see a popup with a token that you’ll have to copy. Now please fill this token into the Woocommerce form (so going back to your newly created woocommerce store). After that you only need to fill in your wallet address and press save.

Now we only need to do one last step, in order to be fully ready to start accepting Algo based payments. Which is: configuring the currency of your woocommerce store to be Algo (or any of the other supported ASA’s).

Therefore, go back to the General tab underneath Woocommerce > Settings, scroll to the bottom and open the currency selector. Search for ALGO, select it and save the form. Now you’re fully ready to start create your first product and make your first sale!

6. Create the first Algo Product

Now the basics has been achieved, you can start filling up your catalog with products that consumers can start buying. Therefore go to Products > Add new. Fill in a title, description and the price of the product in Algo (in our case 1.5 ALGO). Then publish the product and click on View Product in the message shown.

That’s it! You can now easily add the product to your cart and checkout using Algo Payments by Andpay.

Once a user completes the order flow (shopping cart > checkout), they’ll land on the payment page which will look similar to this. After completing the payment flow using their preferred wallet, they’ll land back on your shop on the order completed stage. You’ll get an email of an succesfully paid order (and the Algo landed your wallet) + the customer will receive their order confirmation in their email.

7. What other options are available?

Currently you can only choose one currency for the entire store. This will mean that you have to choose whether you want to offer your products in one of the following supported currencies: Algo, YLDY, USDt, USDc, EURe, Planets, Smile Coin.

Also a combination with default USD or EUR and ALGO is currently not supported. We currently only focus on a 100% Algo based e-commerce store, which is perfect for:

• Donations
• Merchandising stores
• Products around your NFT project
• Many, many other use-cases.

In case you have questions or problems, please send them to support@andpayio .