Guia de Experiência Open Finance Brasil

Etapa 1: Solicitação (Pagamentos)

Nesta etapa, o usuário inicia a jornada de pagamento com Pix via Open Finance, escolhe a Instituição Detentora de Conta (ID) que será utilizada para realizar o pagamento e define os
parâmetros da transação, como valor e dados do recebedor, quando aplicável, conforme as regras da forma de iniciação selecionada. Em seguida, ele revisa os dados configurados e visualiza as demais informações que compõem a autorização a ser enviada à ID. 


A Instituição Iniciadora de Transação de Pagamento (ITP) deve garantir uma experiência clara, segura e informativa, indicando, em algum ponto da jornada, que o serviço é baseado em Open Finance, explicando os benefícios da jornada e permitindo a seleção eficiente da ID. Também é sua responsabilidade validar os dados inseridos, ocultar informações sensíveis, preparar a solicitação de iniciação de pagamento para envio à ID e, quando aplicável, exibir mensagens de erro claras ao usuário.

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=101-5416&t=TFPyjzhVu9cFjNvg-1



Requisitos - ITP

Cenário: Solicitação de pagamento

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=137-6486&t=TFPyjzhVu9cFjNvg-4


  1. Oferta do Pix via Open Finance: Disponibilizar a opção de pagamento com Pix por meio do Open Finance, mesmo que o termo “Open Finance” não esteja presente no nome da opção apresentada ao usuário.  

    Ex.: Pagar com outro banco.

  2. Comparação entre arranjos: Não comparar arranjos de pagamento de forma a desqualificar um deles.

  3. Compatibilidade com QR Code: Quando a jornada for iniciada por QR Code, informar claramente
    se o código não for compatível com o Open Finance. Ex.: Pix Saque, Pix Cobrança etc.

  4. Identificação do Open Finance: Mencionar o Open Finance em algum ponto visível da interface.
    Ex.: Tooltip, selo, frase como "com a segurança do Open Finance.

  5. Próximos passos: Dar visibilidade sobre as próximas etapas até a conclusão da jornada.

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=260-8007&t=TFPyjzhVu9cFjNvg-4


Formas de Pagamento: Pix

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=185-5865&t=TFPyjzhVu9cFjNvg-1


Cenário: Busca e seleção da ID

  1. Busca e seleção da ID: Disponibilizar ferramenta de busca e seleção da ID, com funcionamento baseado em marcas e conforme os critérios abaixo:

    1. Permitir que o usuário busque tanto pela marca da instituição quanto por um participante associado, exibindo corretamente a marca correspondente nos resultados.

    2. Exigir que a seleção final da ID seja feita pela marca da instituição, e não pelo nome do participante associado.

    3. Exibir apenas marcas adequadas ao tipo de público identificado (PF ou PJ).

    4. Garantir que cada marca seja exibida uma única vez, mesmo que existam múltiplos registros para ela no Diretório de Participantes.

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=185-6848&t=TFPyjzhVu9cFjNvg-4


Cenário: Autorização de Pix

A ITP deve possibilitar que o usuário insira e/ou revise as informações da transação conforme a forma de iniciação de pagamento selecionada e as regras do arranjo Pix.

  1. Valor do pagamento: Exibir o valor do pagamento, conforme a forma de iniciação selecionada.

    1. Disponibilizar um campo para que o usuário preencha o valor, em caso de valor variável.
      Ex.: Pagamentos, depósitos ou transferências.

    2. Exibir o valor automaticamente caso seja pré-determinado.
      Ex.: Boletos.

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=185-7065&t=TFPyjzhVu9cFjNvg-4


  1. Forma de pagamento: Exibir, com clareza, a forma de pagamento escolhida.

    Ex.: Pix.

  2. Tarifa do serviço: Exibir o valor da tarifa cobrada pela ITP, quando aplicável.

  3. Data do pagamento: Exibir a data da cobrança.

  4. Descrição do pagamento: Exibir a descrição do pagamento, conforme a forma de iniciação selecionada (via campo additionalInformation).

    1. Disponibilizar um campo para que o usuário preencha a descrição opcionalmente, quando aplicável.
      Ex.: Ração do Rex.

    2. Exibir a descrição automaticamente, quando aplicável.
      Ex.: QR Code com valor fixo e descrição pré-definida.

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=185-7269&t=TFPyjzhVu9cFjNvg-4


  1. Identificação do recebedor: Exibir os dados do recebedor, conforme a forma de iniciação selecionada.

    1. Permitir que o usuário insira os dados do recebedor, quando aplicável.
      Ex.: Instituição, agência, conta e CPF/CNPJ.

    2. Exibir os dados do recebedor automaticamente, quando aplicável.

    3. Em caso de pessoa física, exibir o CPF do recebedor de forma mascarada.  
      Ex.: ***.456.789-**

  2. Identificação da ID: Exibir o nome da Detentora selecionada pelo usuário, caso essa etapa tenha sido apresentada antes da revisão da transação.

  3. Identificação da ITP: Exibir o nome da instituição responsável pela iniciação da transação de pagamento.

💡

Nota: Caso o usuário já esteja no ambiente da própria ITP, a exibição do
nome da ITP não é obrigatória, pois a identificação já é evidente no contexto.

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=185-7667&t=TFPyjzhVu9cFjNvg-4


  1. Necessidade de saldo e limites disponíveis: Informar ao usuário que a transação será concluída apenas se houver saldo e limite transacional disponíveis.

  2. Termos e condições: Quando aplicável, apresentar os termos de uso de forma clara.

    1. Não utilizar opt-in para aceite.

      1. Informar que, ao continuar, o usuário está concordando com os termos e condições.

  3. Informações complementares obrigatórias: Exibir qualquer informação adicional exigida pelo arranjo Pix, conforme a regulação vigente.

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=260-8308&t=TFPyjzhVu9cFjNvg-4



Recomendações - ITP

Cenário: Seleção da forma de pagamento

  1. Vocabulário amigável: Ao permitir que o usuário selecione uma conta salva (Ex.: segunda compra), usar linguagem pessoal e natural (meu/minha).

    • “Pagar com minha conta”.

    • “Transferir com meu banco”.

    • “Usar minha Instituição”.

💡

Nota: Esses exemplos foram baseados no teste de usabilidade feito pelo GT UX em outubro de 2022 e não contemplam todas as formas de abordar o usuário.

image-20251023-145153.png


  1. Apresentação do fluxo da jornada: Informar, logo no início, o fluxo completo da jornada, incluindo o direcionamento para a Detentora e o retorno à Iniciadora.

  2. Proposta de valor: Explicar claramente os benefícios da jornada com Open Finance, destacando pontos como segurança, rapidez e praticidade.

  3. Educação do usuário: Disponibilizar conteúdos educativos (onboarding) que expliquem como o serviço funciona, com exemplos e instruções.

  4. Gratuidade: Quando aplicável, informar sobre a gratuidade da operação de forma clara e sem fricções que atrapalhem a jornada.

  5. Recapitulação pós primeira transação: Após a primeira experiência, utilizar recursos como “Saiba mais” para reforçar os benefícios da jornada e dar visibilidade às etapas futuras sem criar fricções na experiência padrão.

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=481-8470&t=TFPyjzhVu9cFjNvg-4


Cenário: Autorização de Pix

  1. Dados adicionais para autenticação: Quando necessário, solicitar dados complementares da Detentora selecionada, como agência e número da conta, para facilitar a autenticação do usuário na Detentora.

  2. Termos e condições: Apresentar os termos e condições, quando aplicável, de forma acessível, por exemplo via link, garantindo que o conteúdo seja compreensível e não redundante com o que já está presente na jornada.

  3. Edição de dados: Permitir que o usuário edite facilmente os dados revisáveis antes da confirmação, evitando o reinício da jornada.

  4. Posicionamento dos parâmetros: Posicionar os campos editáveis na parte superior da tela, quando aplicáveis, para garantir visibilidade e facilitar a edição.

  5. Preenchimento automático da data: Definir a data do pagamento automaticamente com a data da solicitação.

  6. Prevenção de interrupções: Alertar sobre a possibilidade de falha na jornada em dispositivos com o recurso de ocultação de aplicativos ativado, orientando o usuário a desativar esse recurso se necessário.

https://www.figma.com/design/A5tjujkZRD3DpMesaJMnA5/Inicia%C3%A7%C3%A3o-de-Pagamentos?node-id=489-8760&t=45aQ9NPJkYeMr0Jq-4