-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat(opencart): add basic docs * fix(opencart): merge with openpix index.tsx * feat(opencart): add install docs * fix(opencart): fix wording and formatting * fix(opencart): fix wording * feat(opencart): add configuration guide * feat(opencart): add docs for pix on checkout * fix(opencart): use opencart plugin card * fix(opencart): add missing images * fix(opencart): remove blur from appid * feat(opencart): add custom field docs * feat(opencart): add order status docs * feat(opencart): add logs docs
- Loading branch information
Showing
31 changed files
with
213 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"label": "OpenCart", | ||
"collapsible": true, | ||
"collapsed": true, | ||
"className": "red", | ||
"link": { | ||
"type": "generated-index", | ||
"title": "OpenCart 4" | ||
}, | ||
"customProps": { | ||
"description": "Veja como integrar o Pix em sua loja OpenCart 4" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,189 @@ | ||
--- | ||
id: opencart-extension | ||
title: Como integrar o Pix em sua loja OpenCart 4 | ||
sidebar_label: Extensão pro OpenCart 4 | ||
tags: | ||
- ecommerce | ||
- opencart | ||
- plugin | ||
- extension | ||
--- | ||
|
||
A Woovi disponibiliza uma extensão para o OpenCart 4 que permite a integração do Pix em seu checkout, com suporte à atualização automática do status de seus pedidos e logs. | ||
|
||
A plataforma efetua em tempo real a conciliação entre seu Banco e sua loja. Após conectar a sua conta na Woovi é possível cobrar clientes em tempo real com QrCodes Pix, enviar links de pagamento e gerenciar cobranças incluindo extornos. | ||
|
||
Veja como é fácil aumentar suas vendas integrando o Pix em sua loja: | ||
|
||
## Pré-requisitos | ||
|
||
:::caution Preste atenção | ||
- Uma loja com o OpenCart 4 instalado. | ||
::: | ||
|
||
## Instalação | ||
|
||
Antes de instalar a extensão, é importante garantir que ela esteja disponível na sua loja. Isso pode ser feito de duas maneiras: através do marketplace ou fazendo o upload do arquivo da extensão. | ||
|
||
### Marketplace | ||
|
||
A maneira mais conveniente de baixar a extensão em sua loja é acessando o [marketplace oficial](#coloque-o-link-da-extensao) do OpenCart. Lá, você encontrará a extensão pronta para ser baixada e instalada com facilidade. | ||
|
||
Veja como você pode baixar utilizando o marketplace: | ||
|
||
#### 1) Acesse o painel de administração | ||
|
||
Para acessar o marketplace e carregar a extensão na sua loja, siga estes passos simples: | ||
|
||
1. No painel de administração da sua loja, localize a barra lateral e clique na opção _Extensions_. | ||
|
||
2. Em seguida, no submenu que é exibido, clique na opção _Marketplace_: | ||
![Acesso ao submenu com o marketplace como opção](/img/ecommerce/opencart/marketplace-access.png) | ||
|
||
Ao seguir essas etapas, você será direcionado para o marketplace oficial do OpenCart. | ||
|
||
#### 2) Pesquise a extensão | ||
|
||
Ao acessar o marketplace, pesquise pela extensão _Woovi - Simplifique e ganhe mais, nosso Pix é demais._: | ||
|
||
![Listagem do marketplace com a extensão](/img/ecommerce/opencart/marketplace-search.png) | ||
|
||
#### 3) Inicie o download | ||
|
||
Role um pouco a página até encontrar a seção _Download_. Clique nessa seção e em seguida no botão _Download_ para carregar a nossa extensão na sua loja: | ||
|
||
![Página da extensão com o botão de Download](/img/ecommerce/opencart/extension-download-page.png) | ||
|
||
### Upload do arquivo | ||
|
||
Além do marketplace, você também tem a opção de carregar manualmente o arquivo da extensão. Para isso, acesse a página do instalador de extensões, localizado na opção _Installer_ no menu _Extensions_ do OpenCart: | ||
|
||
![Opção do instalador de extensões no menu do OpenCart](/img/ecommerce/opencart/extension-installer-menu-option.png) | ||
|
||
Ao acessar a página do instalador de extensões, localize o botão de upload azul localizado no canto superior direito do seu painel. Clique nesse botão e selecione o arquivo da extensão que deseja carregar: | ||
|
||
![Seleção do arquivo](/img/ecommerce/opencart/extension-file-selection.png) | ||
|
||
### Instalando a extensão | ||
|
||
Após baixar a extensão, seja através do marketplace ou por upload, você encontrará a extensão na página do instalador de extensões. Nessa página, localize a extensão _Woovi_ e clique no botão verde com o símbolo "+" para dar continuidade à instalação: | ||
|
||
![Botão para instalar a extensão](/img/ecommerce/opencart/install-extension-button.png) | ||
|
||
### Instalando o método de pagamento | ||
|
||
Acesse a página de extensões por meio da sub-opção _Extensions_ dentro da outra opção _Extensions_: | ||
|
||
![Sub-opção "Extensions" selecionada](/img/ecommerce/opencart/extensions-menu-option.png) | ||
|
||
Na página de extensões, utilize a opção de filtro para selecionar extensões do tipo _Payment_: | ||
|
||
![Filtro pelo tipo _Payment_ habilitado](/img/ecommerce/opencart/extension-list-filtered-by-payment-type.png) | ||
|
||
Para instalar _definitivamente_ nossa extensão como um método de pagamento, role um pouco para baixo na página e clique no botão verde com o símbolo "+" na extensão Woovi: | ||
|
||
![Instalação da extensão Woovi como método de pagamento](/img/ecommerce/opencart/install-payment-method.png) | ||
|
||
Após isso, clique no botão azul com o ícone de um lápis para acessar a página de configuração da extensão. | ||
|
||
## Configuração | ||
|
||
Após acessar a página de configurações da extensão, é necessário ativar a extensão no checkout pressionando o botão _Status_: | ||
|
||
![Página de configurações com o botão _Status_](/img/ecommerce/opencart/admin-settings-status.png) | ||
|
||
Tendo habilitado o botão Status, _Pix_ deverá aparecer como método de pagamento no checkout. | ||
|
||
No entanto, é necessário integrar a extensão com a plataforma Woovi e isto pode ser feito adicionando a url de _webhook_ na plataforma. | ||
|
||
Para obter essa URL, vá até a página de configurações e copie ela: | ||
|
||
![Página de configurações com a url de webhook](/img/ecommerce/opencart/admin-settings-webhook.png) | ||
|
||
Entre na plataforma da Woovi e [clique aqui](https://app.woovi.com/home/applications/opencart/add/oneclick) ou vá em `API/Plugins` > `OpenCart` > `Adicionar`: | ||
|
||
![Botão de adicionar um plugin na plataforma Woovi](/img/ecommerce/opencart/woovi-plugin-card.png) | ||
|
||
Cole a URL de webhook no campo _Preencha a url do seu site_ e pressione o botão _Salvar_: | ||
|
||
![Formulário para adicionar uma integração na plataforma Woovi](/img/ecommerce/opencart/woovi-add-plugin-form.png) | ||
|
||
Após isto, verifique se o _AppID_, um código que identifica sua loja, se encontra na página de configurações: | ||
|
||
![Página de configurações com o AppID adicionado](/img/ecommerce/opencart/admin-settings-appid.png) | ||
|
||
Pronto, agora vamos aprender como utilizar o Pix no seu checkout. | ||
|
||
## Como utilizar o Pix no checkout | ||
|
||
Ao realizar uma compra em sua loja OpenCart, o cliente será redirecionado para a página de checkout. | ||
|
||
Nesta página, o cliente deverá inserir seu CPF ou CNPJ, que será utilizado para a cobrança Pix: | ||
|
||
![Formulário de checkout com o CPF/CNPJ](/img/ecommerce/opencart/checkout-form-with-tax-id.png) | ||
|
||
Após isso, o cliente deve selecionar _Pix_ como método de pagamento (_Payment Method_): | ||
|
||
![Selecionando Pix como método de pagamento](/img/ecommerce/opencart/checkout-payment-method-selector.png) | ||
|
||
Ao confirmar a compra, o QR Code do Pix será exibido na página de sucesso, pronto para ser escaneado pelo seu cliente: | ||
|
||
![Página de sucesso do checkout](/img/ecommerce/opencart/checkout-success-js-plugin.png) | ||
![QrCode do Pix na página de sucesso do checkout](/img/ecommerce/opencart/checkout-success-js-plugin-part2.png) | ||
|
||
## CPF/CNPJ | ||
|
||
O CPF/CNPJ utilizado nas cobranças do Pix pode ser obtido de duas formas: | ||
|
||
- Através dos _custom fields_ (campos personalizados) do OpenCart. | ||
- Ou diretamente durante o checkout. | ||
|
||
Os custom fields são uma funcionalidade do OpenCart que permitem adicionar campos adicionais nos dados dos clientes. | ||
|
||
Durante a instalação, a extensão configura automaticamente o custom field necessário para que os clientes possam inserir seu CPF/CNPJ durante o registro: | ||
|
||
![CPF/CNPJ durante o registro](/img/ecommerce/opencart/account-register-with-taxid.png) | ||
|
||
Caso deseje, é possível alterar o custom field utilizado ou até mesmo desativar essa configuração no painel de administração, selecionando a opção _None_ (Nenhum): | ||
|
||
![Configuração ou desativação do custom field](/img/ecommerce/opencart/admin-settings-custom-field.png) | ||
|
||
Se a extensão não puder encontrar um custom field, no checkout irá aparecer diretamente um campo para que o cliente possa inserir seu CPF ou CNPJ, logo acima do botão de confirmação do pedido: | ||
|
||
![Campo CPF/CNPJ durante o checkout](/img/ecommerce/opencart/checkout-custom-field.png) | ||
|
||
## Como configurar os status dos pedidos | ||
|
||
As configurações dos status de cada pedido podem ser encontradas na página de configurações: | ||
|
||
![Configurações dos status dos pedidos](/img/ecommerce/opencart/admin-settings-order-status.png) | ||
|
||
### Quando um pedido for criado | ||
|
||
Por padrão, quando a cobrança da Woovi é criada, o status do pedido é alterado para _Pending_ (pendente). No entanto, é possível configurá-lo para qualquer status desejado: | ||
|
||
![Configuração do status quando um pedido for criado](/img/ecommerce/opencart/admin-settings-order-status-when-waiting.png) | ||
|
||
Veja um exemplo de pedido que acabou de ser criado: | ||
|
||
![Pedido de exemplo com o status pendente](/img/ecommerce/opencart/example-order-pending-status.png) | ||
|
||
### Quando o pedido for pago | ||
|
||
Por padrão, quando a cobrança da Woovi é paga, o status do pedido é alterado para _Processing_ (processando). No entanto, é possível configurá-lo para qualquer status desejado: | ||
|
||
![Configuração do status quando um pedido for pago](/img/ecommerce/opencart/admin-settings-order-status-when-paid.png) | ||
|
||
Veja um exemplo de pedido que acabou de ser pago: | ||
|
||
![Pedido de exemplo com o status processando](/img/ecommerce/opencart/example-order-processing-status.png) | ||
|
||
## Como visualizar os logs da sua loja | ||
|
||
Você pode acessar os logs da sua loja acessando a página localizada na barra lateral do seu painel de administração, em _System_ (Sistema) > _Maintenance_ (Manutenção) > _Error logs_ (Registro de erros): | ||
|
||
![Opção de log na barra lateral do painel](/img/ecommerce/opencart/admin-sidebar-log-option.png) | ||
|
||
Na página de logs, clique no botão "woovi.log" para acessar a página com os logs da extensão: | ||
|
||
![Página de logs da extensão](/img/ecommerce/opencart/admin-logs-page.png) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+7.03 KB
static/img/ecommerce/opencart/admin-settings-order-status-when-paid.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+6.35 KB
static/img/ecommerce/opencart/admin-settings-order-status-when-waiting.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+11.6 KB
static/img/ecommerce/opencart/extension-list-filtered-by-payment-type.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.