Fluxo de Integração
Início
Para iniciar a integração com o Trio Bridge, certifique-se de que a sua empresa possui uma conta habilitada com um client_id e um client_secret num ambiente de sandbox ou produção.
SDK Web
Deve-se embutir o SDK Web (Javascript) no HTML do front-end da sua página, utilizando a tag script, a partir do nosso CDN:
<script src="https://cdn.trio.com.br/trio-js-sdk.min.js"></script>
Caso o client da sua aplicação seja um aplicativo mobile, é possível também embutir esse trecho de código em uma WebView dentro da aplicação.
Iniciando a instância do SDK
Após ter incluído o SDK no client da sua aplicação, é possível inicializá-lo utilizando o método Trio.create. Essa inicialização requer um objeto Javascript com no mínimo 3 parâmetros:
-
clientId: o client_id fixo da sua empresa (mesmo ID para produção ou sandbox).
-
environment: 'sandbox' ou 'production'. Caso não seja fornecido, será considerado como 'production' (default).
-
bridgeToken: token temporário gerado a partir de uma chamada POST em https://production.trio.com.br/bridge/token (ou sandbox). Essa chamada deve ser autenticada pela Trio API utilizando Basic Authorization com client_id e client_secret, assim como nas chamadas comuns documentadas na nossa API Reference. Este token possui duração de aproximadamente 15 minutos após emitido, e deve sempre ser gerado a partir do back-end do seu sistema, para que então o valor gerado seja transmitido ao front-end.
Existem também 3 parâmetros opcionais que podem ser acrescentados ao método Trio.create:
-
consenter: um objeto que deve conter duas chaves, onde email é o email do consenter, e document que pode ser ou o CPF ou o CNPJ. Caso o parâmetro seja enviado com dados válidos, o Trio Bridge irá pular a etapa de validação do consenter.
-
personType: deve ser uma string, que pode ter o valor "legal_person" quando se deseja somente instituições para pessoa jurídica, ou "natural_person" para somente pessoa física.
-
institutionList: uma array de institution id's, por exemplo: ["14446f86-520d-44a4-8b44-fbb6b5f96edc"]. Caso a array só contenha um id, o Bridge irá pular a etapa de escolha de instituição, selecionando a informada pelo id. Caso contenha mais de um id, a lista de instituições disponíveis para escolha será somente as fornecidas na array.
Cuidado!
Gerar um Bridge Token a partir do seu front-end pode fazer com que sua client_secret seja interceptada pelos seus clientes!
Callbacks
Além dos parâmetros obrigatórios, a inicialização do SDK Trio Bridge também aceita callbacks para que você possa informar ao seu sistema quando algum tipo de evento acontecer. Dentro desses callbacks, é possível chamar funções que avisem seu back-end via chamadas Javascript. Os callbacks possíveis são:
- onLoad(): ocorre quando o SDK bridge é inicializado com sucesso (pela função Trio.create).
- onExit(): ocorre quando a janela do Trio Bridge é fechada pelo usuário.
- onSuccess(data): ocorre quando uma conexão à instituição é completada com sucesso. Nesse caso, o objeto data trará informações sobre as conexões criadas, contas descobertas (ainda sem saldo e sem transações), entre outros. Com essas informações, é possível, por exemplo, pedir ao seu back-end que ele extraia saldos, transações, ou mesmo dados cadastrais imediatamente após o sucesso do Bridge.
Abaixo, um exemplo do que o objeto data
costuma trazer:
{
"accounts": [
{
"account_type": "bank_account",
"balances": [],
"bank_account_type": "checking",
"branch_number": "3333",
"connection_id": "f5ffdb4c-0e5f-4a32-98f2-a3257b811805",
"id": "f2937384-6658-4752-9748-6c74c176c013",
"inserted_at": "2021-05-25T22:14:12",
"number": "54321-0",
"person_type": "natural_person",
"transactions": [],
"updated_at": "2021-05-25T22:14:12",
"variation_code": null
}
],
"holder": null,
"id": "f5ffdb4c-0e5f-4a32-98f2-a3257b811805",
"inserted_at": "2021-05-25T22:14:11",
"institution": {
"code": "itau",
"estimated_sla": 120000,
"id": "3df99988-1742-430a-b70d-b448971788ed",
"inserted_at": "2021-05-05T20:48:56",
"mfa_code_needed": false,
"name": "Itaú Unibanco S.A.",
"status": "active",
"type": "bank",
"updated_at": "2021-05-05T20:48:56",
"website": "https://itau.com.br"
},
"updated_at": "2021-05-25T22:14:11"
}
- onEvent(eventType, data): permite um controle mais fino de eventos, tais como falhas e eventos secundários. Atualmente, os tipos de eventos são:
- 'connection_success': É disparado no mesmo momento em que onSuccess. Caso já exista uma tratativa para onSuccess, recomenda-se que este evento seja ignorado a fim de evitar redundância.
- 'connection_failed': Ocorre quando uma conexão não consegue ser completada por algum motivo. Neste caso, data trará um objeto com as seguintes informações: institution_code (exemplo: 'itau') e error_code ('INVALID_CREDENTIALS' ou 'SERVICE_ERROR')
Exemplo de inicialização
O exemplo abaixo mostra uma versão simples da inicialização do SDK em produção:
<script>
document.addEventListener('DOMContentLoaded', function (event) {
// Transmitido através do seu back-end para o seu front-end
let client_id = 'eb86723b-a624-4e29-b65c-edbb04661264'
// Gerado pelo back-end através da Trio API em POST /bridge/token
let bridge_token = 'e31d5ae3a4a0c4acf09fc2361c950551'
Trio.create({
clientId: client_id,
bridgeToken: bridge_token,
environment: 'production',
consenter: {email: '[email protected]', document: '00.000.000/0001-00'}, //optional
personType: 'legal_person', //optional
institutionList: ['14446f86-520d-44a4-8b44-fbb6b5f96edc'] //optional
onSuccess: (data) => {
console.log('onSuccess triggered')
console.log(data)
},
onExit: () => {
console.log('onExit triggered')
},
onEvent: (event_type, data) => {
console.log('onEvent triggered')
console.log(event_type)
console.log(data)
},
onLoad: () => {
console.log('onLoad triggered')
}
})
})
</script>
Abrindo a janela do Bridge
Após o bridge ter sido inicializado através do método Trio.create, abra a janela do Bridge para o usuário da sua aplicação com o método Trio.open(), sem nenhum parâmetro, como no exemplo abaixo:
<!-- Considerando que Trio.create já foi inicializado com sucesso -->
<button type="button" onclick="Trio.open()">Open Bridge</button>
Updated about 2 months ago