e-Commerce (Beta) 🔥

You can finally have your own crypto marketplace and receive payments in stablecoins with just drag and drop! The new solution for real-life applications connects the digital with the tangible.

This is one of the most ambitious and promising features included in DexAppBuilder in recent months. Any DApp creator will be able to deploy real-world markets for objects and goods and receive payments in stable currencies in an orderly, secure and reliable manner, having control of their store and product inventory at all times.

It is important for you to know that this is a Beta feature. You will find errors and flaws that we are systematically correcting. Please be patient and if you want to contribute to speed up the development of this product, join our Discord server and show your interest.

Getting started

Once the user has their DApp created with DexAppBuilder they must enable the E-Commerce functionality which is disabled by default. Visit this internal link to read the documentation or visit this video on our YouTube channel for a quick tutorial on how to deploy your DApp with DexAppBuilder.

Follow the number sequence to activate the functionality in your DApp.

Save the changes and wait a few seconds for the server to reflect the changes.

Setting up E-Commerce

Once you have activated this feature, saved it and the server has registered the changes, you will see a new E-Commerce menu in the left sidebar at the bottom, where you can configure the initial parameters of your commerce system.

If you can see this sidebar, it means that the system is already active in your DApp.

Setting up the basics

1. Recipient wallet address: This will be the address that will receive all the proceeds from sales. By default, this is your connected address, but you can use any other address.

2. Recipient e-mail: This will be the email inbox where you will receive notifications for any sales that have occurred. These email notifications are sent to your inbox in real time.

3. Payment networks: Select the blockchain networks on which you want to receive stablecoin payments. For each of the networks, the following stablecoins are enabled by default:

   1. Arbitrum: USD Coin (USDC) and Tether (USDT)

   2. Avalanche: USD Coin (USDC) and Tether (USDT)

   3. Base: USD Coin (USDC)

   4. Ethereum: USDS, Tether (USDT) and USD Coin (USDC) stablecoins.

   5. Optimism: USD Coin (USDC)

   6. Polygon: USD Coin (USDC) and Tether (USDT)

   7. Binance Chain: Tether (USDT) and USD Coin (USDC)

Enable testnets when developing so you can try your product first before deploying on any mainnet.

Internal Notification System

In this section you will be notified, along with the email we already configured above, of all sales received and orders processed, so you can keep a record of everything necessary to control your business.

Checking the dashboard

Here you will find a breakdown of profits in dollars and the total number of orders. This section will be improved in the future to allow the user a broader view of profits and order control, all with clarity and efficiency in the data as our goal.

Managing item categories

Your products look better when they are properly categorized. Your visitors will be able to refine the product view by category and thus see what they are interested in purchasing. Categorization is also important for the internal order of the DApp in case there is a large number of items loaded into the system.

Add a category simply by clicking in the button and filling the single-field modal popped up 👇

Hit on «Create» and proceed creating others if needed.

Once you finish filling in your categories it might look like this:

Managing item collections

Ideal for grouping similar products into packages, this option allows you to sell different items in packages that you can create for any occasion (holidays, special occasions, promotions, etc.). A very useful feature for stores with high merchandise turnover.

As you can see in the photo there are some collections in Spanish for this store.

Add a new collection simply by clicking in the button, then proceed to fill the single field. Save it.

Managing items

With the above already configured, we are ready to start adding our products to the system. Below are the steps required to do so:

1. In the left sidebar exclusively for E-Commerce, navigate to Products – Items. Once there, you will be able to see the empty items dashboard.

In this case you can see that there are two items added and active.

1. Press the button and lets fill all the blanks for the specific product:

• Product name: Be concise and catchy. Its your marketplace, so you can be creative but precise.

• Description: Be as specific as you need here to clarify what are you selling.

• Collections: Add this product to collections you've already created. This allows you to sell multiple products within a single package.

• Category: Its name is clear: Categorize your products for better order both internally and for your customers.

• Price: Enter how much you are willing to receive for this product in US dollars.

• Visibility in the store: Useful option for when you are entering all your inventory and you don't want to show anything yet (while in production). It is also useful for items that are out of stock.

• Protected item: Useful for hiding information from the buyer. You can use it if you want to show the product's delivery location, a private external link to a chat (you can use your WhatsApp, Telegram, etc. link) or anything you decide.

• Upload a photo for the product. Most commercial image formats are accepted but the limit is 2mb for now.

Once you have filled out all the fields, proceed to save the product. Repeat the process until you have filled your inventory.

Managing Checkouts

Easily create and share product payments with your customers. Ideal for selling products in combos for special occasions and offers.

Go to the last option on the left sidebar of integrations

Once you enter the section you will be able to see the dashboard with all the checkout orders we have made before. As it is the first time we enter, there are none.

Let's create our first checkout order by clicking on the button that will open the following form to fill 👇

Title: Enter a descriptive title for the checkout page. This title helps you identify the checkout in your dashboard and provides context to your customers.

Description: Add any additional information or instructions relevant to the checkout process. For example, you can include return policies, shipping details, or specific product information.

Require Email:

• Toggle Option: When enabled, customers will be required to provide their email address to complete the checkout process. This is useful for sending order confirmations or updates.

Editable Quantity

• Toggle Option: When enabled, customers can edit the quantity of the items they want to purchase directly on the checkout page. This option provides flexibility for bulk or multi-item purchases.

Product Table

The product table allows you to manage the items included in the checkout. Here are the available columns and their purposes:

• Product: Displays the name or identifier of the product.

• Quantity: Shows the quantity of each product in the order. If "Editable Quantity" is enabled, this field becomes editable for customers.

• Unit Price: Indicates the price per unit of the product.

• Total Price: Automatically calculates the total cost of the product (quantity × unit price).

• Actions: Provides options to modify or remove the item from the checkout.

Add Item

• Button: Use the Add Item button to include a new product in the checkout. This will allow you to specify the product name, quantity, and price.

Add as many items as you want to this checkout order

Once you finish filling out all the fields press on the button. You will see a toast if everything went fine and the checkout dashboard will open for you as follow:

Your orders are now on the dashboard and you can access them to share or delete them as needed. Press the button to the right of the selected order to open a modal with options to share this order on social networks. You can also copy the link to it.

Embedding products in your DApp

If you want to sell it, you have to show it. That's the main rule of sales and you can of course do it the way you like in your DApp created with DexAppBuilder. Let's show you an example:

We assume that you have followed the documentation to the letter and have included at least one product in your inventory. You will need it for this example.

1. You must go to the administrative area of ​​your DApp. Once you are there, look for the Pages option within the Layout section (first sidebar on the left, the main one). Once you are there, you will be able to see the pages that make up your DApp.

If this is your first time entering this section, you will only see one "Home" page. .

Click on the page to see all the sections that it contains 👇

These are the default sections your DApp contains. Feel free to delete or edit them.

In order to show you the e-Commerce functionality directly, we deleted all the default sections and we now need to create just one containing the products

Hit on the + Add Section button

Now select the «Commerce» component to add your products

Once you hit in the component you will see the following screen 👇

You can change the component view by selecting the type in the list. Actually, in the picture above, we are using the Store type. In this case we will show ALL THE ITEMS in the component.

Once we finish here we hit on Save. Your component section in the Home page will look like this 👇

We added only a component in this DApp

Now lets give a look to our DApp in "production"

As you can see, our DApp only has the Store section which contains the products we added for our test. Obviously, your DApp should contain everything you need to make it special: smart contract integrations, gated content, trading components, among other things.