Documentação

Diretrizes de Layout – Click to Pay (Mastercard)

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

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, ele terá a opção de criar uma conta e salvar os dados do cartão diretamente no checkout. 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;


  1. 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.

  2. 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


Link Documentação Mastercard


Cenário 2: Cliente volta + Registro do Passkey

Aqui o cliente já vai ter cartões salvos no Click to Pay, 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 lista de cartões armazenados no Click to Pay).

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

Aqui o cliente já vai ter cartões salvos no Click to Pay, 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