Objetivo

Este documento descreve todas as exigências de UX e layout que devem ser seguidas obrigatoriamente pelas agências ao implementar Click to Pay em lojas Storefront 2.0.

A Mastercard exige conformidade total com estes componentes e fluxos para liberar o uso do Click to Pay em produção. Qualquer desvio visual, nomenclatura incorreta ou ausência de elementos rejeita a certificação.

Exigências e Links importantes

• Utilizar a nomenclatura exata: Click to Pay.
• Seguir rigorosamente o fluxo do Figma, incluindo todos os ícones e bandeiras.;
• Links para aprofundar:
  • Fluxo de UX aprovado pela Mastercard:
  • Figma Wake: Senha -> CTP2025
  • Resources: Branding Mastercard Recursos / Logos Mastercard
  • Requisitos técnico: Doc. Click to Pay
    Padrões OTP

Jornadas do usuário

Existem 3 cenários distintos em que a utilização dos componentes deve seguir rigorosamente o fluxo detalhado abaixo:

Cenário 1: Fluxo de Novo Cliente

Se o cliente ainda não tiver um cartão registrado no Click to Pay da Mastercard, ele terá a opção de salvar os dados do cartão na carteira Master e no navegador. Isso permitirá pagamentos futuros com menos cliques. Como incentivo, será oferecido um desconto para quem concluir a transação por esse meio. Link do figma para ver o fluxo

Componentes obrigatórios

Instruções para Seleção da Forma de Pagamento:

1. Na seleção de pagamento, é necessário mostrar a Helper Image (Atrás do Cartão de Crédito) e as Bandeiras abaixo.

Link documentação Mastercard;

2. Desconto Aplicado (para Mastercard): Quando um cartão Mastercard é usado e a opção "Click to Pay" está ativada, deve aparecer a informação de que um desconto de R$ foi aplicado, de acordo com o valor percentual configurado no admin.

3. Consentimento para "Click to Pay": A caixa de seleção para "Click to Pay" é obrigatória e deve incluir o ícone do serviço e a bandeira do cartão, permitindo ao cliente salvar os dados para futuros pagamentos

Cenário 2: Cliente volta + Registro do Passkey

Aqui o cliente já vai ter cartões salvos na carteira da Mastercard, então ao entrar na loja, precisa fazer a validação através do OTP e ao entrar na seção de pagamentos, a Mastercard retornar os dados dele.

Componentes obrigatórios

Instruções para OTP:

1. Ícones + Bandeiras: Obrigatório

2. Checkbox para lembrar no navegador: Obrigatório

3. **Incluir cartão manualmente: **O sistema deve exibir essa opção. Aqui o usuário segue o fluxo normal de incluir cartão, mesmo se o sistema identificar que é um cartão Mastercard, NÃO dará a opção de cadastrar no Click to Pay.

Instruções para Tela Cartão de Crédito após o input do código no OTP:

1. Opção de “Fuga”: O sistema deve exibir essa opção. Ao clicar no botão o usuário volta para o formulário de pagamento. (Reiniciando o fluxo)

2. Preview Último Cartão Utilizado: O sistema exibirá automaticamente o último cartão utilizado selecionado.

3. Desconto: Se o cartão for Mastercard, o desconto aplicável será mostrado dentro do mesmo campo.

4. Abrir Lista Completa: Opção de abrir lista completa de cartões, mostrando apenas o último selecionado como default.

5. Outros cartões salvos: Esta lista exibe cartões sugeridos que não estão vinculados ao Click to Pay (e, portanto, não fazem parte da carteira Mastercard).

Cenário 3: Cliente volta + Autenticação do Passkey

Aqui o cliente já vai ter cartões salvos na carteira da Master, então ao entrar na loja e entrar na seção de pagamentos, a Master já vai puxar os dados dele. Info importante: Ele salvou os cartões no navegador

→ O fluxo permanece o mesmo do cenário 2, com a diferença de que a autenticação OTP não é necessária, pois os cartões já estão salvos no navegador.

→ A autenticação do Passkey → Seguir igual o da Mastercard

Instruções para Tela de Finalização do pedido:

1. Cartão que foi pago: Em forma de pagamento, o sistema deve exibir:

• A imagem do cartão (Visa ou Master)
• Nome do Cartão
• Número mascarado (Aparecendo últimos 4)

DEVE SE REPETIR PARA TODOS OS CENÁRIOS