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 sandbox ou produção.

SDK Web

A partir daí, 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.

O bridgeToken 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.

Cuidado: Gerar a bridgeToken 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 tais informações, é possível por exemplo pedir ao seu back-end que 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',
      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, basta abrir a janela do bridge para o usuário da sua aplicação utilizando 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>