Instalação do Plugin
1. Instalação dos AplicativosCopied!
Para implementar o sistema Tino na sua loja VTEX, é necessário instalar dois componentes essenciais:
-
Tino App - Gerencia o processamento de pagamentos.
-
Tino UI App - Responsável pela interface gráfica do sistema.
1.1 Instalação pelo Painel Administrativo da VTEXCopied!
-
Acesse o painel administrativo da VTEX.
-
Copie e cole as URLs abaixo no navegador, substituindo SUA_URL_DA_VTEX pelo endereço do seu ambiente VTEX e realize a instalação.
Tino App:
SUA_URL_DA_VTEX/admin/apps/tinopartnerbr.ppp-tino@0.0.60/install
Tino UI App:
SUA_URL_DA_VTEX/admin/apps/tinopartnerbr.ppp-tino-payments@1.0.11/install
1.2 Instalação via CLI da VTEXCopied!
-
Instale a CLI da VTEX seguindo as instruções disponíveis aqui.
-
Faça login na VTEX utilizando a CLI com o comando:
vtex login
-
Execute os seguintes comandos para instalar os aplicativos:
-
Para o Tino App:
vtex install tinopartnerbr.ppp-tino@0.0.60
-
Para o Tino UI App:
vtex install tinopartnerbr.ppp-tino-payments@1.0.11
-

2. Configuração do Tino AppCopied!
Para garantir o correto funcionamento do Tino App, é necessário configurar as credenciais apropriadas. Siga os passos abaixo para completar essa configuração:
-
Acesso à Configuração do App
-
Navegue até Aplicativos > Aplicativos > Meus Aplicativos no painel administrativo.
-
Procure pelo Tino App na lista de aplicativos instalados e clique em Configurar.
-
-
Preencha os campos a seguir com as chaves fornecidas por nós:
-
Api Key: Chave necessária para o processamento de pagamentos.
-
SDK Api Key: Chave para funcionamento do fluxo de checkout.
-

3. Instalação do Payment ProviderCopied!
Siga os passos abaixo para configurar o Tino como seu payment provider:
-
Acesso às Configurações de Pagamento:
-
Navegue até Configurações da Loja > Pagamentos > Provedores no painel administrativo.
-
-
Adicionar um Novo Provedor:
-
Clique em Novo Provedor para iniciar a configuração.
-
-
Configurar o Provedor Tino:
-
Na lista de provedores, procure e selecione Tino.
-
Dados de Autorização: Não é necessário preencher os dados de autorização do provedor.
-
Modo de Teste: Certifique-se de desabilitar o modo de teste para processar a transações em produção.
-
Liquidação Automática: Selecione a opção Usar comportamento recomendado
pelo processador de pagamento.
Instalação do Payment Provider -
4. Habilitar o Tino como meio de pagamentoCopied!
Para configurar o Tino como uma opção de pagamento disponível, siga os passos abaixo:
-
Acesso às Configurações de Pagamento
-
Navegue até Configurações da Loja > Pagamentos > Configurações no painel administrativo.
-
-
Adicionar uma Nova Condição de Pagamento:
-
Clique em Adicionar Nova Condição de Pagamento.
-
-
Adicionar o Tino:
-
Altere o campo Status para Ativado.
-
Selecione o Tino na lista de provedores disponíveis.
-


5. Configuração de WebhookCopied!
Para completar a configuração do Tino como seu meio de pagamento, precisaremos da URL da sua loja VTEX que pode ser enviada pelo email: integracoes@tino.com.br ou pelo WhatsApp: (11) 97298-6920. Esta URL será utilizada para configurar um webhook no nosso lado, permitindo que atualizações e informações de pagamento sejam enviadas automaticamente para a VTEX, como por exemplo, a informação de aprovação de pagamento do pedido.
6. Hook para Faturamento ParcialCopied!
Se você utiliza faturamento parcial, enviando mais de uma nota fiscal por pedido, será necessária uma configuração adicional para que possamos receber as informações de todas as notas enviadas. Para isso, é preciso configurar um hook de pedido. Essa configuração garante que toda vez que uma nota for enviada em pedidos processados pelo Tino, uma mensagem seja enviada para nós.
Utilize o comando curl
abaixo para fazer essa configuração:
curl --location '{SUA_URL_DA_VTEX}/api/orders/hook/config' \
--header 'X-VTEX-API-AppKey: {SUA_APP_KEY}' \
--header 'X-VTEX-API-AppToken: {SUA_APP_TOKEN}' \
--header 'Content-Type: application/json' \
--data '{
"filter": {
"type": "FromOrders",
"expression": "($contains(paymentData.transactions.payments.group, '\''Tino'\''))",
"disableSingleFire": true
},
"hook": {
"url": "{SUA_URL_DA_VTEX}/_v/tinopartnerbr.ppp-tino/v0/orders/hook"
}
}'
7. Dados de Navegação Do TinoCopied!
Siga os passos abaixo para configurar o script do Tino para a coleta de dados de navegação e métricas relacionadas ao uso do Tino. Esses dados nos ajudam a identificar problemas e a melhorar a experiência do usuário.
7.1 Instalação pelo Painel Administrativo da VTEXCopied!
-
Acesso às Configurações de Checkout:
-
Navegue até Configurações da Loja > Storefront > Checkout no painel
administrativo.
-
-
Iniciar Configuração do Site:
-
Clique no ícone de Ferramenta para abrir as opções de configuração.
-
-
Adicionar o Script de Dados de Navegação:
-
Acesse a aba Código na parte superior da interface.
-
Localize e selecione o arquivo checkout6-custom.js no menu lateral direito.
-
Cole o script fornecido pelo Tino no editor de código.
-
7.2 Instalação do Checkout UI Settings via CLI da VTEXCopied!
-
Instale a CLI da VTEX seguindo as instruções disponíveis aqui.
-
Faça login na VTEX utilizando a CLI com o comando:
-
vtex login
-
-
Implementar o Script de Dados de Navegação:
-
Abra o repositório do seu checkout UI settings.
-
Localize e edite o arquivo checkout6-custom.js no seu repositório.
-
Cole o script fornecido pelo Tino no arquivo.
-
-
Atualização da Versão:
-
Abra o arquivo manifest.json e atualize a propriedade version para a nova versão
desejada.
-
-
Faça deploy das suas alterações:
-
Dentro do repositório, execute os seguintes comandos para publicar as alterações:
-
vtex publish
-
vtex install
-
ScriptCopied!
function handleTinoPaymentMethod(orderForm) {
var fieldsetElement = document.querySelector('.box-payment-TinoPaymentGroup');
if (fieldsetElement) {
var imgElement = document.createElement('img');
imgElement.src = 'https://storage.googleapis.com/vtex-assets/banner-tino-vtex.svg';
imgElement.alt = 'Tino Banner Vtex';
imgElement.style.width = '100%';
imgElement.onload = function () {
fieldsetElement.parentNode.replaceChild(imgElement, fieldsetElement);
};
} else {
setTimeout(function () {
handleTinoPaymentMethod(orderForm);
}, 500);
}
var titleElement = document.querySelector('#payment-group-TinoPaymentGroup .payment-group-item-text');
if (titleElement) {
titleElement.textContent = 'Tino - Crédito para empresas';
titleElement.style.backgroundImage = "url('https://storage.googleapis.com/vtex-assets/logo-tino.svg')";
} else {
setTimeout(function () {
handleTinoPaymentMethod(orderForm);
}, 500);
}
const sdkPayload = {
customer: {
email: orderForm?.clientProfileData?.email,
documentNumber: orderForm?.clientProfileData?.corporateDocument,
},
amountCents: orderForm?.value,
};
const scriptsList = Array.from(document.getElementsByTagName("script"));
let shouldInsertSdk = !scriptsList.find(
(item) => item.id === "COMPRATINO-SDK"
);
shouldInsertSdk =
shouldInsertSdk && !!sdkPayload.customer.documentNumber;
if (shouldInsertSdk) {
const head = document.getElementsByTagName("head")[0];
const js = document.createElement("script");
js.id = "COMPRATINO-SDK";
js.src = "https://checkoutsdk.tino.com.br/dist/umd/sdk.min.js";
js.async = true;
js.defer = true;
js.onload = () => {
window.tino.preconfig(sdkPayload);
};
head.appendChild(js);
}
}
$(window).on("orderFormUpdated.vtex", function (_, orderForm) {
handleTinoPaymentMethod(orderForm);
});

