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
-
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. -
Comparação entre arranjos: Não comparar arranjos de pagamento de forma a desqualificar um deles.
-
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. -
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. -
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
-
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:
-
Permitir que o usuário busque tanto pela marca da instituição quanto por um participante associado, exibindo corretamente a marca correspondente nos resultados.
-
Exigir que a seleção final da ID seja feita pela marca da instituição, e não pelo nome do participante associado.
-
Exibir apenas marcas adequadas ao tipo de público identificado (PF ou PJ).
-
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.
-
Valor do pagamento: Exibir o valor do pagamento, conforme a forma de iniciação selecionada.
-
Disponibilizar um campo para que o usuário preencha o valor, em caso de valor variável.
Ex.: Pagamentos, depósitos ou transferências. -
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
-
Forma de pagamento: Exibir, com clareza, a forma de pagamento escolhida.
Ex.: Pix. -
Tarifa do serviço: Exibir o valor da tarifa cobrada pela ITP, quando aplicável.
-
Data do pagamento: Exibir a data da cobrança.
-
Descrição do pagamento: Exibir a descrição do pagamento, conforme a forma de iniciação selecionada (via campo
additionalInformation).-
Disponibilizar um campo para que o usuário preencha a descrição opcionalmente, quando aplicável.
Ex.: Ração do Rex. -
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
-
Identificação do recebedor: Exibir os dados do recebedor, conforme a forma de iniciação selecionada.
-
Permitir que o usuário insira os dados do recebedor, quando aplicável.
Ex.: Instituição, agência, conta e CPF/CNPJ. -
Exibir os dados do recebedor automaticamente, quando aplicável.
-
Em caso de pessoa física, exibir o CPF do recebedor de forma mascarada.
Ex.: ***.456.789-**
-
-
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.
-
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
-
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.
-
Termos e condições: Quando aplicável, apresentar os termos de uso de forma clara.
-
Não utilizar opt-in para aceite.
-
Informar que, ao continuar, o usuário está concordando com os termos e condições.
-
-
-
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
-
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.
-
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.
-
Proposta de valor: Explicar claramente os benefícios da jornada com Open Finance, destacando pontos como segurança, rapidez e praticidade.
-
Educação do usuário: Disponibilizar conteúdos educativos (onboarding) que expliquem como o serviço funciona, com exemplos e instruções.
-
Gratuidade: Quando aplicável, informar sobre a gratuidade da operação de forma clara e sem fricções que atrapalhem a jornada.
-
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
-
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.
-
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.
-
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.
-
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.
-
Preenchimento automático da data: Definir a data do pagamento automaticamente com a data da solicitação.
-
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