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.

Para habilitar o provedor Tino, é necessário:

• Instalar os aplicativos Tino e Tino UI
• Configurar o Tino app
• Configurar o provedor Tino
• Configurar condição de pagamento
• Instalar script de customização no checkout (opcional)
• Configurar conciliação (opcional)

Para iniciar a implementação do provedor Tino em sua loja é necessário habilitar dois aplicativos:

• Tino app: gerencia o processamento de pagamentos
• Tino Ui app: controla a interface gráfica do sistema de pagamentos.

As instalações dos apps Tino e Tino UI podem ser realizadas em sua loja por meio do VTEX IO CLI ou do Admin VTEX.

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.

1. No VTEX IO CLI, execute o comando vtex login nomedaconta para realizar o login em sua conta.
2. 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.
3. 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.

Após instalar os aplicativos, você precisa realizar a configuração do Tino app. Para acessar a tela de configurações, siga os passos abaixo:

1. 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.
2. Localize o Tino App e clique em Configurações.
3. Na página de configurações, preencha os campos abaixo com informações fornecidas pelo time de suporte da Tino.

• API Key: chave para o processamento de pagamentos
• SDK Api Key: chave para a operação do fluxo de checkout.

As informações inseridas não devem conter espaços em branco entre caracteres.

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.

1. No Admin VTEX, acesse Configurações da loja > Pagamentos > Provedores, ou digite Provedores na barra de busca no topo da página.
2. Na tela de provedores, clique no botão Novo provedor.
3. Digite o nome Tino na barra de busca e clique sobre o nome do provedor.
4. Em Autorização do provedor, não é necessário preencher os campos Chave de aplicação e Token de aplicação.
5. 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.
6. Em Controle de pagamento, desative o ambiente de teste ao desmarcar a opção Ativar modo de teste.
7. Em Liquidação automática, selecione a opção Usar comportamento recomendado pelo processador de pagamento.

1. No Admin VTEX, acesse Configurações da loja > Pagamentos > Configurações, ou digite Configurações na barra de busca no topo da página.
2. Na aba Condições de Pagamentos, clique no botão +.
3. Localize e clique sobre a opção Tino.
4. Ative a condição no campo Status.
5. Se desejar utilizar um sistema antifraude, selecione a opção Usar solução antifraude.
6. Se desejar, você também pode configurar condições especiais de pagamento.
7. Clique em Salvar.

A 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.

Caso deseje ativar esta customização, os dados de perfil do cliente (clientProfileData) poderão ser acessados pela Tino.

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.

1. No Admin VTEX, acesse Configurações da loja > Storefront > Checkout, ou digite Checkout na barra de busca no topo da página.
2. Clique no ícone do site desejado.
3. No menu de opções azul localizado na parte superior da página, clique em Código.
4. No canto direito da tela, em Arquivos, clique sobre a opção checkout6-custom.js.
5. Insira o código JavaScript fornecido pelo suporte da Tino.

6. Clique em Salvar.

1. No VTEX IO CLI, execute o comando vtex login nomedaconta para realizar o login em sua conta.
2. Acesse o repositório checkout UI settings.
3. Localize e abra o arquivo checkout6-custom.js.
4. Insira o código JavaScript fornecido pelo suporte da Tino dentro arquivo checkout6-custom.js.
5. Localize o arquivo manifest.json e atualize a propriedade version para a nova versão.
6. No repositório, execute os comandos vtex publish e vtex install.

Para 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.