diff --git a/docs/ecommerce/opencart/_category_.json b/docs/ecommerce/opencart/_category_.json new file mode 100644 index 00000000..7d55c90a --- /dev/null +++ b/docs/ecommerce/opencart/_category_.json @@ -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" + } +} diff --git a/docs/ecommerce/opencart/opencart-extension.mdx b/docs/ecommerce/opencart/opencart-extension.mdx new file mode 100644 index 00000000..bc2ca0ed --- /dev/null +++ b/docs/ecommerce/opencart/opencart-extension.mdx @@ -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) diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 6b10d270..7b64b462 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -9,7 +9,8 @@ import { FaPhp, FaJava, FaPython, - FaWhatsapp + FaWhatsapp, + FaOpencart, } from 'react-icons/fa'; import { GrOracle } from 'react-icons/gr'; import { SiVtex, SiNodedotjs, SiPowershell, SiWoo, SiDelphi } from 'react-icons/si'; @@ -234,6 +235,14 @@ const cards = [ icon: , docsTo: '/docs/integrations/socpanel-openpix', }, + { + title: 'OpenCart', + content: + 'Aumente suas vendas agora no OpenCart 4 recebendo pagamentos instantâneos com Pix!', + icon: , + docsTo: '/docs/ecommerce/opencart/opencart-extension', + to: 'https://app.woovi.com/home/applications/opencart/add', + }, ]; const Home = () => { @@ -291,4 +300,4 @@ const Home = () => { ); }; -export default Home; +export default Home; \ No newline at end of file diff --git a/static/img/ecommerce/opencart/account-register-with-taxid.png b/static/img/ecommerce/opencart/account-register-with-taxid.png new file mode 100644 index 00000000..e585b8c0 Binary files /dev/null and b/static/img/ecommerce/opencart/account-register-with-taxid.png differ diff --git a/static/img/ecommerce/opencart/admin-logs-page.png b/static/img/ecommerce/opencart/admin-logs-page.png new file mode 100644 index 00000000..1aebc033 Binary files /dev/null and b/static/img/ecommerce/opencart/admin-logs-page.png differ diff --git a/static/img/ecommerce/opencart/admin-settings-appid.png b/static/img/ecommerce/opencart/admin-settings-appid.png new file mode 100644 index 00000000..fe70e433 Binary files /dev/null and b/static/img/ecommerce/opencart/admin-settings-appid.png differ diff --git a/static/img/ecommerce/opencart/admin-settings-custom-field.png b/static/img/ecommerce/opencart/admin-settings-custom-field.png new file mode 100644 index 00000000..748e3896 Binary files /dev/null and b/static/img/ecommerce/opencart/admin-settings-custom-field.png differ diff --git a/static/img/ecommerce/opencart/admin-settings-order-status-when-paid.png b/static/img/ecommerce/opencart/admin-settings-order-status-when-paid.png new file mode 100644 index 00000000..20afd5ad Binary files /dev/null and b/static/img/ecommerce/opencart/admin-settings-order-status-when-paid.png differ diff --git a/static/img/ecommerce/opencart/admin-settings-order-status-when-waiting.png b/static/img/ecommerce/opencart/admin-settings-order-status-when-waiting.png new file mode 100644 index 00000000..f29e221f Binary files /dev/null and b/static/img/ecommerce/opencart/admin-settings-order-status-when-waiting.png differ diff --git a/static/img/ecommerce/opencart/admin-settings-order-status.png b/static/img/ecommerce/opencart/admin-settings-order-status.png new file mode 100644 index 00000000..273f89d2 Binary files /dev/null and b/static/img/ecommerce/opencart/admin-settings-order-status.png differ diff --git a/static/img/ecommerce/opencart/admin-settings-status.png b/static/img/ecommerce/opencart/admin-settings-status.png new file mode 100644 index 00000000..306da4ff Binary files /dev/null and b/static/img/ecommerce/opencart/admin-settings-status.png differ diff --git a/static/img/ecommerce/opencart/admin-settings-webhook.png b/static/img/ecommerce/opencart/admin-settings-webhook.png new file mode 100644 index 00000000..196995ea Binary files /dev/null and b/static/img/ecommerce/opencart/admin-settings-webhook.png differ diff --git a/static/img/ecommerce/opencart/admin-sidebar-log-option.png b/static/img/ecommerce/opencart/admin-sidebar-log-option.png new file mode 100644 index 00000000..57c4471c Binary files /dev/null and b/static/img/ecommerce/opencart/admin-sidebar-log-option.png differ diff --git a/static/img/ecommerce/opencart/checkout-custom-field.png b/static/img/ecommerce/opencart/checkout-custom-field.png new file mode 100644 index 00000000..7aeb2a7b Binary files /dev/null and b/static/img/ecommerce/opencart/checkout-custom-field.png differ diff --git a/static/img/ecommerce/opencart/checkout-form-with-tax-id.png b/static/img/ecommerce/opencart/checkout-form-with-tax-id.png new file mode 100644 index 00000000..f80b5f23 Binary files /dev/null and b/static/img/ecommerce/opencart/checkout-form-with-tax-id.png differ diff --git a/static/img/ecommerce/opencart/checkout-payment-method-selector.png b/static/img/ecommerce/opencart/checkout-payment-method-selector.png new file mode 100644 index 00000000..c42d34da Binary files /dev/null and b/static/img/ecommerce/opencart/checkout-payment-method-selector.png differ diff --git a/static/img/ecommerce/opencart/checkout-success-js-plugin-part2.png b/static/img/ecommerce/opencart/checkout-success-js-plugin-part2.png new file mode 100644 index 00000000..6e139fac Binary files /dev/null and b/static/img/ecommerce/opencart/checkout-success-js-plugin-part2.png differ diff --git a/static/img/ecommerce/opencart/checkout-success-js-plugin.png b/static/img/ecommerce/opencart/checkout-success-js-plugin.png new file mode 100644 index 00000000..abdaa41a Binary files /dev/null and b/static/img/ecommerce/opencart/checkout-success-js-plugin.png differ diff --git a/static/img/ecommerce/opencart/example-order-pending-status.png b/static/img/ecommerce/opencart/example-order-pending-status.png new file mode 100644 index 00000000..555e4461 Binary files /dev/null and b/static/img/ecommerce/opencart/example-order-pending-status.png differ diff --git a/static/img/ecommerce/opencart/example-order-processing-status.png b/static/img/ecommerce/opencart/example-order-processing-status.png new file mode 100644 index 00000000..a08c26cf Binary files /dev/null and b/static/img/ecommerce/opencart/example-order-processing-status.png differ diff --git a/static/img/ecommerce/opencart/extension-download-page.png b/static/img/ecommerce/opencart/extension-download-page.png new file mode 100644 index 00000000..41d9efd4 Binary files /dev/null and b/static/img/ecommerce/opencart/extension-download-page.png differ diff --git a/static/img/ecommerce/opencart/extension-file-selection.png b/static/img/ecommerce/opencart/extension-file-selection.png new file mode 100644 index 00000000..ece1c63b Binary files /dev/null and b/static/img/ecommerce/opencart/extension-file-selection.png differ diff --git a/static/img/ecommerce/opencart/extension-installer-menu-option.png b/static/img/ecommerce/opencart/extension-installer-menu-option.png new file mode 100644 index 00000000..ec73f092 Binary files /dev/null and b/static/img/ecommerce/opencart/extension-installer-menu-option.png differ diff --git a/static/img/ecommerce/opencart/extension-list-filtered-by-payment-type.png b/static/img/ecommerce/opencart/extension-list-filtered-by-payment-type.png new file mode 100644 index 00000000..f59edb5e Binary files /dev/null and b/static/img/ecommerce/opencart/extension-list-filtered-by-payment-type.png differ diff --git a/static/img/ecommerce/opencart/extensions-menu-option.png b/static/img/ecommerce/opencart/extensions-menu-option.png new file mode 100644 index 00000000..567dacf1 Binary files /dev/null and b/static/img/ecommerce/opencart/extensions-menu-option.png differ diff --git a/static/img/ecommerce/opencart/install-extension-button.png b/static/img/ecommerce/opencart/install-extension-button.png new file mode 100644 index 00000000..5ce17d71 Binary files /dev/null and b/static/img/ecommerce/opencart/install-extension-button.png differ diff --git a/static/img/ecommerce/opencart/install-payment-method.png b/static/img/ecommerce/opencart/install-payment-method.png new file mode 100644 index 00000000..a0540394 Binary files /dev/null and b/static/img/ecommerce/opencart/install-payment-method.png differ diff --git a/static/img/ecommerce/opencart/marketplace-access.png b/static/img/ecommerce/opencart/marketplace-access.png new file mode 100644 index 00000000..f7b7538b Binary files /dev/null and b/static/img/ecommerce/opencart/marketplace-access.png differ diff --git a/static/img/ecommerce/opencart/marketplace-search.png b/static/img/ecommerce/opencart/marketplace-search.png new file mode 100644 index 00000000..34d74fdc Binary files /dev/null and b/static/img/ecommerce/opencart/marketplace-search.png differ diff --git a/static/img/ecommerce/opencart/woovi-add-plugin-form.png b/static/img/ecommerce/opencart/woovi-add-plugin-form.png new file mode 100644 index 00000000..f26484c9 Binary files /dev/null and b/static/img/ecommerce/opencart/woovi-add-plugin-form.png differ diff --git a/static/img/ecommerce/opencart/woovi-plugin-card.png b/static/img/ecommerce/opencart/woovi-plugin-card.png new file mode 100644 index 00000000..fac9e5f4 Binary files /dev/null and b/static/img/ecommerce/opencart/woovi-plugin-card.png differ