{"section":"tutorials","requestedLocale":"pt","requestedSlug":"configurar-pagamento-com-tino","locale":"pt","slug":"configurar-pagamento-com-tino","path":"docs/pt/tutorials/pagamentos/configurações-de-pagamentos/configurar-pagamento-com-tino.md","branch":"main","content":"Na VTEX, é possível realizar a integração com o provedor de pagamento Tino. Por meio deste provedor, sua loja pode realizar vendas utilizando o meio de pagamento Tino.\n\nPara habilitar o provedor Tino, é necessário:\n\n- [Instalar os aplicativos Tino e Tino UI](#instalar-aplicativos-tino-e-tino-ui)\n- [Configurar o Tino app](#configurar-tino-app)\n- [Configurar o provedor Tino](#configurar-pagamento-com-tino)\n- [Configurar condição de pagamento](#configurar-condicao-de-pagamento)\n- [Instalar script de customização no checkout (opcional)](#script-de-customizacao-no-checkout-opcional)\n- [Configurar conciliação (opcional)](#configurar-conciliacao-opcional)\n\n## Instalar aplicativos Tino e Tino UI\n\nPara iniciar a implementação do provedor Tino em sua loja é necessário habilitar dois aplicativos:\n\n- __Tino app__: gerencia o processamento de pagamentos\n- __Tino Ui app__: controla a interface gráfica do sistema de pagamentos.\n\nAs instalações dos apps Tino e Tino UI podem ser realizadas em sua loja por meio do VTEX IO CLI ou do Admin VTEX.\n\n> ⚠️ Antes de iniciar a instalação por qualquer um dos métodos, verifique com a equipe de suporte da Tino os números das versões mais atuais dos aplicativos.\n\n### Instalação via VTEX IO CLI\n\n1. No [VTEX IO CLI](https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install), execute o comando `vtex login nomedaconta` para realizar o login em sua conta.\n2. Instale o Tino app por meio do comando `vtex install tinopartnerbr.ppp-tino@{{current-app-version}}`. A informação `{{current-app-version}}` deve ser substituída pela a versão atual do aplicativo, por exemplo: __vtex install tinopartnerbr.ppp-tino@0.0.50__.\n3. Instale o Tino UI app por meio do comando `vtex install tinopartnerbr.ppp-tino-payments@{{current-app-version}}`. A informação `{{current-app-version}}` deve ser substituída pela a versão atual do aplicativo, por exemplo: __vtex install tinopartnerbr.ppp-tino-payments@1.0.9__.\n\n### Instalação via Admin VTEX\n\n1. Acesse o Admin VTEX.\n2. Copie e cole no navegador a URL a seguir, substituindo as seguintes informações: **SUA_URL_DA_VTEX**, pelo endereço do seu ambiente VTEX e *\\{\\{current-app-version\\}\\}*, pela a versão atual do aplicativo Tino: ***SUA_URL_DA_VTEX**/admin/apps/tinopartnerbr.ppp-tino@\\{\\{current-app-version\\}\\}/install*.\n\n> ℹ️ Exemplo de URL: https://minhaloja.myvtex.com/admin/apps/tinopartnerbr.ppp-tino@0.0.50/install\n\n3. Clique em **Instalar** e siga as instruções de instalação do Tino app.\n4. Copie e cole no navegador a URL a seguir, substituindo as seguintes informações: **SUA_URL_DA_VTEX**, pelo endereço do seu ambiente VTEX e *\\{\\{current-app-version\\}\\}*, pela a versão atual do aplicativo Tino UI: ***SUA_URL_DA_VTEX**/admin/apps/tinopartnerbr.ppp-tino-payments@\\{\\{current-app-version\\}\\}/install*\n\n> ℹ️ Exemplo de URL: https://minhaloja.myvtex.com/admin/apps/tinopartnerbr.ppp-tino-payments@1.0.9/install\n\n5. Clique em **Instalar** e siga as instruções de instalação do Tino Ui app.\n\n## Configurar Tino app\n\nApós instalar os aplicativos, você precisa realizar a configuração do Tino app. Para acessar a tela de configurações, siga os passos abaixo:\n\n1. No Admin VTEX, acesse __Aplicativos > Hub de Extensões > Gerenciamento de Aplicativos__, ou digite __Gerenciamento de Aplicativos__ na barra de busca no topo da página.\n2. Localize o __Tino App__ e clique em __Configurações__.\n3. Na página de configurações, preencha os campos abaixo com informações fornecidas pelo time de suporte da Tino.\n- __API Key__: chave para o processamento de pagamentos\n- __SDK Api Key__: chave para a operação do fluxo de checkout.\n\n> ℹ️ As informações inseridas não devem conter espaços em branco entre caracteres.\n\n![Tino app_4](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configurações-de-pagamentos/configurar-pagamento-com-tino_1.png)\n\n> ⚠️ A opção **Enable Development Mode** deve ser mantida desmarcada. Caso esteja sinalizada, o aplicativo estará operando somente em modo de teste e não será possível processar transações de pagamento com a Tino durante o período.\n\n## Configurar pagamento com Tino\n\n1. No Admin VTEX, acesse __Configurações da loja > Pagamentos > Provedores__, ou digite __Provedores__ na barra de busca no topo da página. \n2. Na tela de provedores, clique no botão `Novo provedor`.\n3. Digite o nome __Tino__ na barra de busca e clique sobre o nome do provedor.\n4. Em __Autorização do provedor__, não é necessário preencher os campos __Chave de aplicação__ e __Token de aplicação__.\n5. Caso deseje modificar o nome de identificação a ser exibido para o provedor Malga na tela do Admin VTEX, insira a informação no campo __Nome__ em __Informações básicas__.\n6. Em __Controle de pagamento__, desative o ambiente de teste ao desmarcar a opção __Ativar modo de teste__.\n7. Em __Liquidação automática__, selecione a opção __Usar comportamento recomendado pelo processador de pagamento__.\n\n## Configurar condição de pagamento\n\n1. No Admin VTEX, acesse __Configurações da loja > Pagamentos > Configurações__, ou digite __Configurações__ na barra de busca no topo da página.\n2. Na aba __Condições de Pagamentos__, clique no botão `+`.\n3. Localize e clique sobre a opção __Tino__.\n4. Ative a condição no campo __Status__.\n5. Se desejar utilizar um sistema antifraude, selecione a opção __Usar solução antifraude__.\n6. Se desejar, você também pode [configurar condições especiais de pagamento](/pt/docs/tutorials/condicoes-especiais).\n7. Clique em `Salvar`.\n\n## Script de customização no checkout (opcional)\n\nA Tino disponibiliza a opção de coletar dados de navegação e métricas relacionadas a navegação do cliente no checkout, de forma a identificar problemas e melhorar a experiência do usuário. Para isso, é necessário implementar um script de customização do checkout por meio do VTEX IO CLI ou do Admin VTEX.\n\n> ⚠️ Caso deseje ativar esta customização, os dados de perfil do cliente (**clientProfileData**) poderão ser acessados pela Tino.    \n\n> ⚠️ Qualquer customização realizada no checkout por meio de um script pode impactar o fluxo de compra do cliente. Caso tenha alguma dificuldade operacional no checkout após configurar o script em sua loja, entre em contato com o suporte da Tino.\n\n### Instalando script via Admin VTEX\n\n1. No Admin VTEX, acesse __Configurações da loja > Storefront > Checkout__, ou digite __Checkout__ na barra de busca no topo da página.\n2. Clique no ícone   do site desejado.\n3. No menu de opções azul localizado na parte superior da página, clique em __Código__.\n4. No canto direito da tela, em __Arquivos__, clique sobre a opção __checkout6-custom.js__.\n5. Insira o código JavaScript fornecido pelo suporte da Tino.\n\n![Tino app_5](https://cdn.statically.io/gh/vtexdocs/help-center-content/refs/heads/main/docs/pt/tutorials/pagamentos/configurações-de-pagamentos/configurar-pagamento-com-tino_2.png)\n\n6. Clique em `Salvar`.\n\n### Intalando script via VTEX IO CLI\n\n1. No [VTEX IO CLI](https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-install), execute o comando `vtex login nomedaconta` para realizar o login em sua conta.\n2. Acesse o repositório `checkout UI settings`.\n3. Localize e abra o arquivo `checkout6-custom.js`.\n4. Insira o código JavaScript fornecido pelo suporte da Tino dentro arquivo `checkout6-custom.js`.\n5. Localize o arquivo `manifest.json` e atualize a propriedade version para a nova versão.\n6. No repositório, execute os comandos `vtex publish` e `vtex install`.\n\n## Configurar conciliação (opcional)\n\nPara mais informações sobre como utilizar a solução da Tino que permite conciliar os pedidos e repasses realizados a fornecedores, acesse documentação da Tino [Conciliação](https://docs.tino.com.br/guias/guias-de-integra%C3%A7%C3%A3o/integra%C3%A7%C3%A3o-em-ecommerce/plataformas/vtex#2-fluxos-operacionais)."}