Criador de checkout

O Checkout Builder é uma ferramenta sem código projetada para personalizar sua experiência de checkout. Ele inclui dois módulos principais:

  • Configurações de método de pagamento: Ative os métodos de pagamento com uma rota publicada para mostrar aos seus clientes. Além disso, você pode definir em que circunstâncias os métodos de pagamento específicos são exibidos.
  • Estilo do checkout: Ajuste os elementos visuais do checkout para desktop e dispositivos móveis, incluindo cores e tipografia. Isso garante que a experiência de checkout seja consistente com sua marca.

Todas as alterações feitas com o Checkout Builder são imediatamente refletidas no checkout voltado para o usuário, proporcionando uma maneira direta de gerenciar e adaptar a experiência de checkout para atender às suas necessidades comerciais.

Vantagens de usar o Checkout Builder

  • Personalização sem código: Aproveite a flexibilidade de personalizar sua experiência de checkout sem a necessidade de codificação complexa. Isso permite que você crie um processo de checkout que se alinhe perfeitamente à sua marca e aos objetivos comerciais.
  • Flexibilidade de métodos de pagamento: Habilite, organize e exiba facilmente os métodos de pagamento mais adequados à sua base de clientes e ao seu mercado.
  • Interface de usuário intuitiva: A interface do Yuno facilita a configuração dos métodos de pagamento, a definição das condições de exibição e a personalização do estilo.

Configurações do método de pagamento

Este módulo permite configurar e personalizar os métodos de pagamento usados na experiência de checkout. Além de ativar os métodos de pagamento, você pode ajustar a ordem em que eles são exibidos, personalizar sua aparência, definir campos obrigatórios e determinar condições para quando cada método de pagamento é exibido. Essa amplitude de personalização garante que a experiência de checkout se adapte ao seu público e ao caso de uso específico.

Você deve clicar em Publicar configurações no Checkout Builder para aplicar todas as alterações ao checkout.

Condições

Você pode controlar quando um método de pagamento aparece no checkout definindo condições de exibição com base em critérios como país, valor, moeda ou metadados de integração do pedido. Para definir essas configurações, siga as etapas:

  1. Ao lado do método de pagamento, clique no ícone de três pontos para abrir as configurações e selecione Set Conditions (Definir condições). Uma janela pop-up será exibida; clique em Add new condition (Adicionar nova condição ) para continuar.
  1. Na seção Adicionar nova condição, insira um nome descritivo para a sua condição. Em seguida, selecione a especificação desejada, como país do pedido, valor e corrente do pedido ou metadados. Essa especificação define os parâmetros que acionarão sua condição. Você pode selecionar mais de uma condição de cada vez.
  1. Novas opções aparecerão com base nas especificações que você selecionou. Preencha os campos para obter o resultado desejado.

Campos obrigatórios

Os campos obrigatórios especificam as informações que os usuários devem fornecer ao usar cada método de pagamento. Alguns métodos de pagamento exigem dados específicos para processar pagamentos, e o Yuno pode solicitá-los mesmo que você não os tenha especificado. O Yuno simplifica o processo de adicionar ou remover campos desejados por meio de sua interface de usuário. Para configurar os campos obrigatórios, clique no ícone de três pontos ao lado de cada método de pagamento e selecione Definir campos obrigatórios.

Quando o menu Campos obrigatórios estiver aberto, use o botão de alternância para ativar e desativar campos específicos. Os campos exigidos por um provedor são ativados por padrão.

Você pode desativar qualquer campo, inclusive aqueles exigidos pelos provedores. No entanto, a desativação de campos obrigatórios pode resultar em falhas de pagamento, portanto, é essencial verificar a compatibilidade do provedor antes de fazer alterações. Se um novo provedor for adicionado ao método de pagamento, todos os campos obrigatórios desativados anteriormente permanecerão desativados, mesmo que sejam exigidos pelo novo provedor. Você deve reativar manualmente esses campos, se necessário. Portanto, sempre verifique os campos obrigatórios após adicionar um novo provedor.

📘

Código postal independente

O campo do código postal pode ser usado de forma independente (sem outros campos de endereço) para todos os fornecedores e todos os fluxos SDK. Quando o código postal está ativado e outros campos de endereço estão desativados, o backend permite valores nulos para todos os campos de endereço, exceto o código postal. Se os campos de código postal e endereço estiverem ativados no Checkout Builder, o backend prioriza os campos de endereço em relação ao código postal. Esse recurso está disponível globalmente para todos os comerciantes e fornecedores.

Nos campos Obrigatórios, você também pode configurar o comportamento para cartões cadastrados. Você pode configurar se deseja solicitar o CVV para todas as transações ou apenas durante o primeiro pagamento do cliente.

Editar nome e logotipo

As configurações de nome e logotipo controlam como os métodos de pagamento aparecem durante o checkout. Essa opção não está disponível para métodos de pagamento registrados. Para ajustar essas configurações:

  1. Nas configurações do método de pagamento, clique no ícone de três pontos ao lado de qualquer método de pagamento não registrado e selecione Editar nome e logotipo.
  2. Selecione Usar configurações personalizadas para fazer alterações.
  3. Digite seu nome preferido para o método de pagamento.
  4. Opcionalmente, você pode adicionar uma descrição e fornecer um novo URL do logotipo. O URL deve começar com "https://". Use uma imagem quadrada (JPG ou PNG), com tamanho de 100x100 pixels e até 10 KB.
  5. Clique em Salvar alterações, seguido de Publicar configurações para aplicar todas as alterações.

Estilo de checkout

Combine a aparência exclusiva de sua marca usando o módulo Checkout Styling. As alterações feitas nesse módulo são refletidas no checkout do usuário final imediatamente após a publicação.

Opções gerais de estilo

A seção General Styling (Estilo geral) permite ajustar os principais elementos visuais, criando uma aparência consistente e profissional em toda a experiência de checkout. Nessa seção, é possível personalizar os seguintes elementos:

Elemento personalizávelDescrição
Cor de fundoDefina a cor de fundo aplicada em todos os formulários de checkout, estabelecendo uma base que reflita a estética da sua marca. Essa cor de fundo serve como base para toda a interface de checkout.
Cor de destaqueSelecione uma cor de destaque para realçar os elementos interativos, aprimorando a experiência do usuário e adicionando toques específicos da marca. A cor de destaque se aplica a:
  • A cor de fundo do botão principal
  • A cor da borda do botão secundário
  • Cores da caixa de seleção
Cor primária do textoDefina a cor do texto principal para elementos de alta visibilidade. Essa cor será aplicada a:
  • Títulos e legendas
  • Campos de entrada do usuário
  • Valores do menu suspenso
  • Texto em botões secundários
  • Texto da caixa de seleção
Cor do texto secundárioEscolha uma cor de texto secundária para os elementos de texto de apoio. Essa cor se aplica a:
  • Descrições de campo
  • Texto do espaço reservado
  • Texto de ajuda para orientação adicional sobre o formulário
Cor do texto do botão primárioDefina a cor do texto do botão principal para garantir que a chamada para ação seja perceptível e acessível.
TipografiaSelecione a fonte de sua preferência.