# Comércio eletrônico (Beta) 🔥

Esta é uma das funcionalidades mais ambiciosas e promissoras incluídas no DexAppBuilder nos últimos meses. Qualquer criador de DApp poderá implantar mercados do mundo real para objetos e mercadorias e receber pagamentos em moedas estáveis de forma ordenada, segura e confiável, mantendo o controle de sua loja e do inventário de produtos a todo momento.

{% hint style="warning" %}
É importante que você saiba que esta é uma funcionalidade Beta. Você encontrará erros e falhas que estamos corrigindo sistematicamente. Por favor, tenha paciência e, se quiser contribuir para acelerar o desenvolvimento deste produto, junte-se ao nosso [servidor do Discord](https://discord.com/invite/dexkit-official-943552525217435649) e mostre seu interesse.
{% endhint %}

## Primeiros passos

Uma vez que o usuário tenha seu DApp criado com o DexAppBuilder, ele deve ativar a funcionalidade de E-Commerce, que vem desativada por padrão. Visite este link interno para ler a documentação ou assista a este vídeo em nosso canal do YouTube para um tutorial rápido sobre como implantar seu DApp com o DexAppBuilder.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FBi4mLzzHz8sFkE8ZlhgW%2Fimage.png?alt=media&#x26;token=af4df2f9-f532-452e-a9b4-6d3bb219f974" alt=""><figcaption><p>Siga a sequência numérica para ativar a funcionalidade em seu DApp.</p></figcaption></figure>

Salve as alterações e aguarde alguns segundos para que o servidor reflita as mudanças.

## Configurando o E-Commerce

Depois de ativar essa funcionalidade, salvá-la e o servidor registrar as alterações, você verá um novo menu de E-Commerce na barra lateral esquerda, na parte inferior, onde poderá configurar os parâmetros iniciais do seu sistema de comércio.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FL7d7GiwGgdNNT9gfanwt%2Fimage.png?alt=media&#x26;token=8442ec5a-f637-4864-974c-f1b0342ac7cc" alt=""><figcaption><p>Se você consegue ver essa barra lateral, significa que o sistema já está ativo no seu DApp.</p></figcaption></figure>

### Configurando o básico

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FuPGBboYSYZ6j5itNNxw3%2Fimage.png?alt=media&#x26;token=5a9a1830-51c9-4600-927e-84f50225d224" alt=""><figcaption></figcaption></figure>

1. Endereço da carteira do destinatário: Este será o endereço que receberá todo o produto das vendas. Por padrão, este é o seu endereço conectado, mas você pode usar qualquer outro endereço.
2. E-mail do destinatário: Esta será a caixa de entrada onde você receberá notificações de quaisquer vendas que tenham ocorrido. Essas notificações por e-mail são enviadas para sua caixa de entrada em tempo real.
3. Redes de pagamento: Selecione as redes blockchain nas quais você deseja receber pagamentos em stablecoins. Para cada uma das redes, as seguintes stablecoins estão habilitadas por padrão:
   1. Arbitrum: USD Coin ([USDC](https://arbiscan.io/token/0xaf88d065e77c8cc2239327c5edb3a432268e5831)) e Tether ([USDT](https://arbiscan.io/token/0xfd086bc7cd5c481dcc9c85ebe478a1c0b69fcbb9))
   2. Avalanche: USD Coin ([USDC](https://avascan.info/blockchain/c/token/0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E)) e Tether ([USDT](https://avascan.info/blockchain/c/token/0x9702230A8Ea53601f5cD2dc00fDBc13d4dF4A8c7))
   3. Base: USD Coin ([USDC](https://basescan.org/token/0x833589fcd6edb6e08f4c7c32d4f71b54bda02913))
   4. Ethereum: [USDS](https://etherscan.io/token/0xdC035D45d973E3EC169d2276DDab16f1e407384F), Tether ([USDT](https://etherscan.io/token/0xdac17f958d2ee523a2206206994597c13d831ec7)) e USD Coin ([USDC](https://etherscan.io/token/0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48)) stablecoins.
   5. Optimism: USD Coin ([USDC](https://optimistic.etherscan.io/token/0x0b2c639c533813f4aa9d7837caf62653d097ff85))
   6. Polygon: USD Coin ([USDC](https://polygonscan.com/token/0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359)) e Tether ([USDT](https://polygonscan.com/token/0xc2132d05d31c914a87c6611c10748aeb04b58e8f))
   7. Binance Chain: Tether (USDT) e USD Coin ([USDC](https://bscscan.com/token/0x8ac76a51cc950d9822d68b83fe1ad97b32cd580d))

{% hint style="info" %}
Habilite testnets durante o desenvolvimento para que você possa testar seu produto primeiro antes de implantar em qualquer mainnet.
{% endhint %}

### Sistema Interno de Notificações

Nesta seção você será notificado, juntamente com o e-mail que já configuramos acima, de todas as vendas recebidas e pedidos processados, para que possa manter um registro de tudo o que é necessário para controlar seu negócio.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FtHpsainVfc0DltufcvRX%2Fimage.png?alt=media&#x26;token=57c2e7fa-a064-4f37-9c37-db8e28e576c7" alt=""><figcaption></figcaption></figure>

### Verificando o painel

Aqui você encontrará um detalhamento dos lucros em dólares e o número total de pedidos. Esta seção será aprimorada no futuro para permitir ao usuário uma visão mais ampla dos lucros e do controle de pedidos, tudo com clareza e eficiência nos dados como nosso objetivo.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FaHuVLOihe7npIGhjntFe%2Fimage.png?alt=media&#x26;token=298b7a5a-a437-453e-94b5-922a3b664d73" alt=""><figcaption></figcaption></figure>

### Gerenciando categorias de itens

Seus produtos ficam melhores quando estão devidamente categorizados. Seus visitantes poderão refinar a visualização dos produtos por categoria e assim ver aquilo em que estão interessados em comprar. A categorização também é importante para a ordem interna do DApp caso haja um grande número de itens carregados no sistema.

Adicione uma categoria simplesmente clicando no ![](https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FErItRBWGHKV1JSRnQNAP%2Fimage.png?alt=media\&token=1f5cecc9-4a4d-4abe-b2d4-010c5886a309) botão e preenchendo o modal de um único campo que aparece 👇

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F2fMNhU9NFeI1ZMzr5mZj%2Fimage.png?alt=media&#x26;token=60ac4d0f-588a-4619-8b0d-e52c87f89aeb" alt=""><figcaption><p>Clique em «Criar» e prossiga criando outras, se necessário.</p></figcaption></figure>

Depois de terminar de preencher suas categorias, pode ficar assim:

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Fz8jOrYzsgUKjidxLjkie%2Fimage.png?alt=media&#x26;token=8106cd50-80db-4b79-af31-75ca81539799" alt=""><figcaption></figcaption></figure>

### Gerenciando coleções de itens

Ideal para agrupar produtos semelhantes em pacotes, essa opção permite vender diferentes itens em pacotes que você pode criar para qualquer ocasião (feriados, ocasiões especiais, promoções etc.). Uma funcionalidade muito útil para lojas com alta rotatividade de mercadorias.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Ff24YBHuBXddzEV3A1E8W%2Fimage.png?alt=media&#x26;token=4669c73c-29c4-4314-bbd5-89d7865a951c" alt=""><figcaption><p>Como você pode ver na foto, há algumas coleções em espanhol para esta loja.</p></figcaption></figure>

Adicione uma nova coleção simplesmente clicando no ![](https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FXrGpGVZZgKMybvwUtzWY%2Fimage.png?alt=media\&token=2095c9e4-89d1-43d3-9ac2-483fef1081a0) botão, em seguida preencha o campo único. Salve-a.

### Gerenciando itens

Com o acima já configurado, estamos prontos para começar a adicionar nossos produtos ao sistema. Abaixo estão os passos necessários para fazê-lo:

1. Na barra lateral esquerda exclusiva para E-Commerce, navegue até Produtos – Itens. Uma vez lá, você poderá ver o painel de itens vazio.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FTf8z7UGWIVSvuq9peytz%2Fimage.png?alt=media&#x26;token=d4bd9f8b-3e1f-4443-a021-536e1da34aea" alt=""><figcaption><p>Neste caso você pode ver que há dois itens adicionados e ativos.</p></figcaption></figure>

2. Pressione o ![](https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FTYWrZ4tWIBxE7nUP69fZ%2Fimage.png?alt=media\&token=b1a057fa-cd0c-4e3e-b33c-973ba5029c53) botão e vamos preencher todos os campos em branco para o produto específico:

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F27XJTmIwBHom5jrRf3cq%2Fimage.png?alt=media&#x26;token=05fe200d-bfa1-4691-bf1c-e61f46f17350" alt=""><figcaption></figcaption></figure>

* **Nome do produto:** Seja conciso e atraente. É seu marketplace, então você pode ser criativo, mas preciso.
* **Descrição:** Seja tão específico quanto precisar aqui para esclarecer o que você está vendendo.
* **Coleções:** Adicione este produto a coleções que você já criou. Isso permite vender múltiplos produtos dentro de um único pacote.
* **Categoria:** O nome é claro: categorize seus produtos para melhor organização tanto interna quanto para seus clientes.
* **Preço:** Informe quanto você está disposto a receber por este produto em dólares americanos.
* **Visibilidade na loja:** Opção útil para quando você está inserindo todo o seu inventário e não quer mostrar nada ainda (enquanto em produção). Também é útil para itens que estão fora de estoque.
* **Item protegido:** Útil para ocultar informações do comprador. Você pode usá-lo se quiser mostrar o local de entrega do produto, um link externo privado para um chat (você pode usar seu link do WhatsApp, Telegram, etc.) ou qualquer coisa que decidir.
* Faça upload de uma foto do produto. A maioria dos formatos de imagem comercial é aceita, mas o limite é de 2 MB por enquanto.

Depois de preencher todos os campos, proceda para salvar o produto. Repita o processo até preencher seu inventário.

### Gerenciando Checkouts

Crie e compartilhe pagamentos de produtos com seus clientes facilmente. Ideal para vender produtos em combos para ocasiões especiais e ofertas.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FXO96Lpr4zPSy5INRVgpi%2Fimage.png?alt=media&#x26;token=6c1a336e-a65b-473a-a05d-6dfb36720a85" alt=""><figcaption><p>Vá para a última opção na barra lateral esquerda de integrações</p></figcaption></figure>

Uma vez que você entrar na seção, poderá ver o painel com todos os pedidos de checkout que fizemos antes. Como é a primeira vez que entramos, não há nenhum.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FXafg0SlIkiRwgRjwMlqI%2Fimage.png?alt=media&#x26;token=9a3869b7-ea0f-4d06-b0ce-9ea27566d71f" alt=""><figcaption></figcaption></figure>

Vamos criar nosso primeiro pedido de checkout clicando no ![](https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FtGgt5IalbPkD7WRMSVcW%2Fimage.png?alt=media\&token=2b86de8f-f0f0-4d92-b382-68754d392c45)  botão que abrirá o seguinte formulário para preencher 👇

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FbZtENtYL0fzsb3NIEoc4%2Fimage.png?alt=media&#x26;token=d88dc7c1-a6e8-40ea-bcbb-68633e26809a" alt=""><figcaption></figcaption></figure>

**Título:** Insira um título descritivo para a página de checkout. Esse título ajuda a identificar o checkout no seu painel e fornece contexto aos seus clientes.

**Descrição**: Adicione quaisquer informações adicionais ou instruções relevantes ao processo de checkout. Por exemplo, você pode incluir políticas de devolução, detalhes de envio ou informações específicas do produto.

**Exigir e-mail:**

* **Opção de alternância**: Quando habilitado, os clientes serão obrigados a fornecer seu endereço de e-mail para concluir o processo de checkout. Isso é útil para enviar confirmações de pedido ou atualizações.

**Quantidade editável**

* **Opção de alternância**: Quando habilitado, os clientes podem editar a quantidade dos itens que desejam comprar diretamente na página de checkout. Essa opção oferece flexibilidade para compras em grande quantidade ou múltiplos itens.

**Tabela de Produtos**

A tabela de produtos permite gerenciar os itens incluídos no checkout. Aqui estão as colunas disponíveis e seus propósitos:

* **Produto**: Exibe o nome ou identificador do produto.
* **Quantidade**: Mostra a quantidade de cada produto no pedido. Se "Quantidade editável" estiver habilitada, este campo se torna editável para os clientes.
* **Preço unitário**: Indica o preço por unidade do produto.
* **Preço total**: Calcula automaticamente o custo total do produto (quantidade × preço unitário).
* **Ações**: Fornece opções para modificar ou remover o item do checkout.

#### **Adicionar item**

* **Botão**: Use o **Adicionar item** botão para incluir um novo produto no checkout. Isso permitirá especificar o nome do produto, quantidade e preço.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FL0er0Ojgupl62J40vxx8%2Fimage.png?alt=media&#x26;token=05564dc1-58c7-478b-a783-91561e158e67" alt=""><figcaption><p>Adicione quantos itens quiser a este pedido de checkout</p></figcaption></figure>

Depois de terminar de preencher todos os campos, clique no ![](https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FLjU6rJKmTm3Ns8nKVuqp%2Fimage.png?alt=media\&token=6ef46131-0180-42c5-b8c7-1b5f2d5c51bf) botão. Você verá um ![](https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FO4ZmmBtS4iWIHQKUpdYO%2Fimage.png?alt=media\&token=864f117c-cfc4-466d-a96c-0e41b0b1c2d3) toast se tudo correr bem e o painel de checkout será aberto para você da seguinte forma:

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FXIKaZS300z9Fgm1m9jFP%2Fimage.png?alt=media&#x26;token=bb378c7a-e25f-4ca5-9647-5cbfe82375cc" alt=""><figcaption></figcaption></figure>

Seus pedidos agora estão no painel e você pode acessá-los para compartilhá-los ou excluí-los conforme necessário. Pressione o ![](https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FEpgKOx3x4UZ7QatdaPzu%2Fimage.png?alt=media\&token=a51f25d5-fdc9-4a15-b1bf-f51578611175) botão à direita do pedido selecionado para abrir um modal com opções para compartilhar este pedido em redes sociais. Você também pode copiar o link dele.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FdK5etRrJVVrGmam5MFvb%2Fimage.png?alt=media&#x26;token=6de20398-d73f-4306-a537-705b0b28749f" alt="" width="462"><figcaption></figcaption></figure>

### Incorporando produtos no seu DApp

Se você quer vender, você tem que mostrar. Essa é a regra principal de vendas e você pode, claro, fazer do jeito que preferir no seu DApp criado com o DexAppBuilder. Vamos mostrar um exemplo:

{% hint style="info" %}
Assumimos que você seguiu a documentação à risca e incluiu pelo menos um produto em seu inventário. Você vai precisar dele para este exemplo.
{% endhint %}

1. Você deve ir para a área administrativa do seu DApp. Uma vez lá, procure a opção Páginas dentro da seção Layout (primeira barra lateral à esquerda, a principal). Quando estiver lá, você poderá ver as páginas que compõem seu DApp.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FvUxiYMXMgKRbtcNk95Nm%2Fimage.png?alt=media&#x26;token=3234103a-bc1b-46df-9a1f-5effc216b3df" alt=""><figcaption><p>Se esta for a primeira vez que você entra nesta seção, você verá apenas uma página "Início".</p></figcaption></figure>

Clique na página para ver todas as seções que ela contém 👇

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FSLUGjWdOblaJshsDReAq%2Fimage.png?alt=media&#x26;token=a57a9217-6e20-4faf-a67e-1f884a3fbba9" alt=""><figcaption><p>Estas são as seções padrão que seu DApp contém. Sinta-se à vontade para excluí-las ou editá-las.</p></figcaption></figure>

A fim de mostrar a funcionalidade de E-Commerce diretamente, apagamos todas as seções padrão e agora precisamos criar apenas uma contendo os produtos

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FZSaNwwfMG2fmuRwRLEzf%2Fimage.png?alt=media&#x26;token=206130cf-8121-4f7e-b6c6-1c0af657f6e0" alt=""><figcaption><p>Clique no botão + Adicionar Seção</p></figcaption></figure>

Agora selecione o componente «Commerce» para adicionar seus produtos\
![](https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2Fkt7sVnb1E91xq9LqFyUj%2Fimage.png?alt=media\&token=5d98e26b-ef6b-4002-8f3c-0c7d5df114f7)

Uma vez que você clicar no componente, verá a seguinte tela 👇

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F7Zw40dRTjyJsR7tgmdpy%2Fimage.png?alt=media&#x26;token=06c1fe30-425f-4106-8c9a-38db198a6b14" alt=""><figcaption></figcaption></figure>

Você pode alterar a visualização do componente selecionando o tipo na lista. Na verdade, na imagem acima, estamos usando o tipo Store. Neste caso, vamos mostrar TODOS OS ITENS no componente.

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FP5OKgFK8qdErlNevfBrs%2Fimage.png?alt=media&#x26;token=311afa6f-71e0-4328-bfd4-6ba53c8e6d5a" alt=""><figcaption></figcaption></figure>

Quando terminarmos aqui, clicamos em Salvar. Sua seção de componente na página Início ficará assim 👇

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2FdLulNAgPKuHekkQ07aSI%2Fimage.png?alt=media&#x26;token=2dc87c73-730a-43e7-91a2-abba9241396c" alt=""><figcaption><p>Adicionamos apenas um componente neste DApp</p></figcaption></figure>

Agora vamos dar uma olhada no nosso DApp em "produção"&#x20;

<figure><img src="https://1903426557-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrjgYUyO4ch1fBehrMEq%2Fuploads%2F5x8NBtKtcW8YWcUC34T5%2Fimage.png?alt=media&#x26;token=7fef0199-fdb9-44b4-82fa-707742e13366" alt=""><figcaption></figcaption></figure>

Como você pode ver, nosso DApp possui apenas a seção Store que contém os produtos que adicionamos para nosso teste. Obviamente, seu DApp deve conter tudo o que você precisa para torná-lo especial: integrações com contratos inteligentes, conteúdo restrito, componentes de negociação, entre outras coisas.