Personalize a UI/UX dos widgets usando CustomStyles

Nesta página

Como funciona a personalização
Escopo geral
Estilos globais
Personalizações por seção

Personalize suas soluções DEUNA usando CustomStyle.

DEUNA permite adaptar visualmente o checkout para alinhá-lo com a identidade visual da sua marca. Este guia descreve como configurar o arquivo JSON que controla estilos de widget, incluindo cores, tipografia, bordas, texto e visualizações específicas.

Como funciona a personalização#

Defina elementos para personalizar: Identifique as visualizações ou componentes de checkout que você deseja alterar (botões, campos, resumo do pedido, mensagens de erro e assim por diante).
Configure o arquivo JSON: Inclua os valores de estilo que você deseja aplicar. Você pode modificar cores, tipografia, raio da borda, preenchimento e assim por diante.
Aplique a configuração:
- Para estilos de widget básicos, entre em contato com seu TPM para implementação.
- Para estilos específicos de pedido, você pode incluir o arquivo de estilo na tokenização de cada pedido.

Escopo geral#

Você pode personalizar os seguintes aspectos:

Cores de finalização da compra
Tipografia
Texto, altura e raio de entradas e botões
Insira as cores das bordas por estado
Habilitar redefinição de texto nas entradas
Habilitar validador iconográfico nas entradas
Localização e tamanho do logotipo
Termos e Condições
Elementos visuais em visualizações específicas (como OTP, cartões, página de agradecimento, dados de cobrança e assim por diante)

Estilos globais#

Personalize os estilos globais da sua loja.

Cor

Você pode definir cores para:

Histórico (primário/secundário)
Texto principal
Botão de pagamento (cor, foco, texto, ativo)

JSON

{
  "theme": {
    "colors": {
      "primaryTextColor": "#323237",
      "backgroundSecondary": "#FFFFFF",
      "backgroundPrimary": "#FFFFFF",
      "buttonPrimaryFill": "#17171A",
      "buttonPrimaryHover": "#69696E",
      "buttonPrimaryText": "#FFFFFF",
      "buttonPrimaryActive": "#5F529E"
    }
  }
}

Tipografia

Você pode escolher entre as seguintes fontes compatíveis:

Heeb
Traseira
Lato
Montserrate
Mukta
Nunito
Aberto sem
Areia movediça
Robô
Raleway
São Francisco
Ubuntu

JSON

{
  "theme": {
    "typography": {
      "primaryFontFamily": "Lato"
    }
  }
}

Exemplo:

Raio de entrada e botão

Você pode definir o border-radius em pixels para entradas e botões:

JSON

{
  "theme": {
    "inputs": {
      "borderRadius": "50px"
    },
    "buttons": {
      "borderRadius": "20px"
    }
  }
}

Altura de entrada e botão

Você pode definir uma altura personalizada para entradas e botões. Por padrão, a altura é 40px.

Para uma melhor experiência do usuário, utilize altura mínima de 30px e máxima de 60px.

JSON

{
  "theme": {
    "buttons": {
      "borderRadius": "20px",
      "heigh": "50px"
    },
    "inputs": {
      "borderRadius": "90px",
      "height": "50px"
    }
  }
}

Insira as cores das bordas por estado

Você pode selecionar uma cor de borda específica para entradas dependendo de seu estado.

Estado	Definição	Cor padrão
`Disabled`	A entrada não está habilitada para o usuário, portanto ele não pode escrever na entrada.	#B4B4B7
`Enabled`	A entrada está habilitada, mas ainda não foi focada ou o usuário não escreveu nada.	#D9D9DB
`Focus`	O usuário está digitando ou está focado na entrada.	# 404046
`Filled`	A entrada foi concluída com dados válidos.	#8E8E92
`Error`	A entrada contém erros de validação ou está incompleta quando necessária.	#E11900

JavaScript

 theme: {
    colors: {
    inputBorder: '#D9D9DB', // Default state (enabled)
    inputBorderError: '#F1998E', // Error state
    inputEnhancerFill: '#1AE1D7', // Active state (focus)
    inputBorderPositive: '#66D19E', // Success state
    },
  },

Habilitar redefinição de texto nas entradas

Você pode colocar um botão de redefinição em todos os campos de texto. Por padrão, essa configuração está desativada. Ele atua como um atalho para limpar todo o texto do campo sem segurar o backspace.

JavaScript

 theme: {
    inputs: {
      inputMode: 'clearable' // 'validated' | 'clearable' | 'none'
    },
  },

Habilitar validador iconográfico em entradas de texto

Você pode ativar um validador iconográfico nas entradas de texto. Por padrão, essa configuração está desativada. Consiste em um ícone dentro do input, alinhado à direita, dependendo do estado:

Preenchido: Verifique ✅
Erro: Exclamação ❗️

JavaScript

 theme: {
    inputs: {
      inputMode: 'validated' // 'validated' | 'clearable' | 'none'
    },
  }

Logotipo do comerciante

Refere-se às configurações disponíveis para o logotipo

Alterar logotipo
Alterar localização do logotipo: centro ou esquerda
Alterar tamanho do logotipo

Padrão: logotipo de 100px localizado à esquerda do widget

JavaScript

{
  "HeaderPattern": {
    "overrides": {
      "Logo": {
        "props": {
          "url": "https://host.com/custom_logo.png",
          "position": "center",
          "style": {
            "min-width": "150px"
          }
        }
      }
    }
  }
}

Termos e Condições

Com esta configuração, configure os textos legais e links que aparecem na parte inferior de uma tela ou formulário como “Ao continuar, você aceita nossos Termos e Condições...”.

JavaScript

{
  "TermsConditionsPattern": {
    // Hide terms for non authenticated users //  Muestra términos para usuarios invitados (no autenticados)
    "showForGuest": true,
    
    // Hide terms for authenticated users // Oculta términos para usuarios autenticados (ya los aceptaron al registrarse)
    "showForAuth": false,
    
    // Legal message in HTML // Mensaje legal personalizado con HTML. Sobrescribe el texto por defecto traducido.
    // If used, the inline links replace the <A> patterns // Si usas esto, los links inline reemplazan los componentes <A> del patrón
    "legalMessage": "Al continuar, aceptás nuestros <a href='https://tusitio.com/terminos-y-condiciones'>Términos y Condiciones</a> y nuestra <a href='https://tusitio.com/politica-de-privacidad'>Política de Privacidad</a>.",
    
    // Connector texts between Privacy Polcy and Terms & Conditions // Texto conector entre "Política de Privacidad" y "Términos y Condiciones"
    // Overides the default translation (t('andThe')) // Sobrescribe la traducción por defecto (t('andThe'))
    "connectorText": "y",
    
    // Hides the  [Brand] sufix // Oculta el sufijo "de [Marca]" al final del disclaimer
    "hideCompanyDisclaimer": true,
    
    // Terms PDF/page URL. Fallbac URLs are preset by default by country of merchant // URL del PDF/página de términos. Fallback: URLs por defecto según país del merchant
    "termsAndConditionsUrl": "http://static.cinepolis.com/resources/pe/documents/terminos-y-condiciones.pdf",
    
    // Privacy policy PDF/page URL. Fallbac URLs are preset by default by country of merchant // URL del PDF/página de política de privacidad. Fallback: URLs por defecto según país
    "privacyPolicyUrl": "http://static.cinepolis.com/resources/pe/documents/politica-de-privacidad.pdf",
    
    // Changes the behaviour: shows explicit acceptance checkout // CAMBIA COMPLETAMENTE EL COMPORTAMIENTO: muestra checkbox de aceptación explícita
    // Only supported by Click to Pay // Solo soportado para Click to Pay. Estado guardado en UserContext.hasAcceptedTermsAndConditions
    // For Click to Pay // Para Click to Pay, si es false, NO VAMOS A MOSTRAR NINGÚN TIPO DE TYC.
    "requiresAcceptance": true,
    
    // Click to pay terms & conditions  URL // Url para los terminos y condiciones propias de click to pay.
  },
  
  "LegalInfoPattern": {
    // Hides the "Powered by dLocal" legal footer // Oculta el logo "Powered by dLocal" del footer legal
    "hidePoweredBy": true
  },
  
  "PoweredByPattern": {
    // Customized image URL //  URL de imagen personalizada para reemplazar el logo de dLocal
    "url": "https://1000logos.net/wp-content/uploads/2021/05/Coca-Cola-logo.png",
    
    // Inline CSS styles for custom image // Estilos CSS inline para la imagen personalizada
    "imageStyle": {
      "width": "50px",
      "height": "200px"  
    },
  }
}

Personalizações por seção#

Personalize seções da sua solução.

Visualização do código de verificação

Esta visualização aparece quando é necessário que o usuário valide sua identidade por meio de um código de senha de uso único enviado por e-mail. Faz parte do fluxo de autenticação.

A visualização de verificação é opcional.

Personalizar:

Cabeçalho
Botões de mudança de canal (SMS/e-mail)
Opção "Continuar como convidado"

JSON

{
  "OtpPage": {
    "translations": {
      "es": {
        "views": {
          "otp_view": {
            "title": "🇪🇸 Ingresa el código de verificación",
            "description": "🇪🇸 Para ver tus tarjetas guardadas ingresa el código enviado a ",
            "continue_as_guest": "🇪🇸 Continuar sin ingresar el código",
            "code_expiration_message": "🇪🇸 El código expira en: ",
            "error_timeout": "🇪🇸 Tiempo agotado. Solicita un nuevo código.",
            "resend_code": "🇪🇸 Reenviar código",
            "send_code_by_email": "🇪🇸 Enviar código por correo",
            "send_code_by_phone": "🇪🇸 Enviar código por SMS",
            "new_code_alert": "🇪🇸 ¡Recibiste un nuevo código!"
          }
        }
      },
      "en": { ... },
      "pt": { ... }
    }
  }
}

Visualização de pagamento com cartão

Corresponde ao formulário principal onde o usuário insere os dados do seu cartão para finalizar a compra.

Personalizar:

Títulos e legendas de seções: edite ou oculte textos
Etiquetas de campo (como número do cartão, nome e parcelas)
Texto do botão de pagamento
Avisos informativos UpperTag/LowerTag (não disponíveis no Link de Pagamento).
Mensagens legais e links para termos e condições

JSON

{
  "PaymentMethodsPattern": {
    "translations": {
      "es": {
        "inputs": {
          "card": {
            "securityCode": {
              "label": "CVV"
            },
            "installment": {
              "label": "Cuotas",
              "pay_by": "Paga en",
              "first_pay": "Primer pago",
              "without_interest": "Sin interés ",
              "without_installments": "Sin cuotas",
              "loading": "Validando cuotas..."
            },
            "cardHolder": {
              "label": "Nombre como aparece en la tarjeta",
              "placeholder": "Ej. Juan Zapata"
            },
            "cardNumber": {
              "label": "Número de tarjeta",
              "placeholder": "0000 0000 0000 0000"
            },
            "expirationDate": {
              "label": "Fecha expiración",
              "placeholder": "MM / YY"
            }
          }
        },
        "paymentMethods": {
          "info": {
            "card": {
              "title": "tarjeta crédito o débito",
              "subtitle": "Por favor, ingresa los datos de tu tarjeta"
            }
          }
        }
      },
      "en": {...},
      "pt": {...}
    },
    "props": {
      "hideTitleForCreditCard": true
    }
  }
}

Visualização de cartões salvos (usuários autenticados)

Exibido quando um usuário autenticado armazenou cartões anteriormente e pode escolher entre eles para concluir a compra.

Você pode personalizar:

Textos de botão
Mensagens ou avisos de expiração
Confirmação de exclusão

JSON

{
  "UserCardPattern": {
    "translations": {
      "es": {
        "addNewCard": {
          "info": "Add a card"
        },
        "moreOptions": {
          "payWith": "Selected card"
        },
        "paymentMethods": {
          "expiredCard": "Expired card",
          "confirmDeleteMethodTitle": "Delete this card",
          "confirmDeleteMethod": "Please note that once deleted, you won't be able to restore it."
        }
      },
      "en": {...},
      "pt": {...}
    }
  }
}

Obrigado página

Tela de confirmação de compra que aparece ao final do processo caso não seja redirecionado para outro site.

Você pode personalizar:

Obrigado título
Status do pedido (succeeded, pending, denied)
Texto do botão: "Salvar recibo", "Voltar à loja"

JSON

{
  "ThankYouView": {
    "translations": {
      "es": {
        "thankYouPage": {
          "title": "🇪🇸 Gracias por tu compra",
          "status": {
            "succeeded": "🇪🇸 ¡Gracias por tu compra!",
            "pending": "🇪🇸 Procesando...",
            "denied": "🇪🇸 Pago rechazado"
          },
          "downloadVoucher": "🇪🇸 Descargar comprobante",
          "backToCommerce": "🇪🇸 Volver a la tienda"
        }
      },
      "en": {...},
      "pt": {...}
    },
    "overrides": {
      "Actions": {
        "props": {
          "hideDownloadAction": false,
          "hideBackToCommerceAction": false
        }
      }
    }
  }
}

Exemplo:

Página do voucher

Tela de instruções para pagamentos com métodos alternativos (por exemplo, pagamentos em dinheiro ou transferências).

Você pode personalizar:

Título, subtítulo, descrição
Mensagens de referência e prazo de pagamento
Texto do botão
Mostrar/ocultar a marca DEUNA

Configure seu JSON com um dos seguintes identificadores de processador de pagamento:

SPEI
OXXO_PAY
OXXO_REFERENCE
PAYU_EFECTY
BAZ_REFERENCE
SPEI_OPENPAY
SPEI_OPM
SAFETY_PAY
STP_CODI
PIX

Substituir [PROCESSOR_NAME] na sua configuração JSON com um dos valores listados acima.

Exemplo OXXO:

JSON

{
  "VoucherPage": {
    "[PROCESSOR_NAME]": {
      "es": {
        "overrides": {
          "Header": {
            "props": {
              "title": "🇪🇸 Comprobante de Pago PIX",
              "subtitle": "🇪🇸 Tu transacción fue procesada exitosamente"
            }
          },
          "Footer": {
            "props": {
              "downloadReference": "🇪🇸 Descargar Comprobante",
              "showPoweredByDeuna": false
            }
          }
        }
      },
      "en": { ... },
      "pt": { ... }
    },
    "[PROCESSOR_NAME]": {
      "es": { ... },
      "en": { ... },
      "pt": { ... }
    }
  }
}

Visualização de informações do usuário

Formulário inicial onde são solicitados dados básicos do comprador, como nome, email, telefone e documento de identidade. Esta visualização é opcional e está disponível apenas para link de pagamento e checkout completo.

Permite personalizar campos relacionados a:

Título da seção
Etiquetas para todos os campos

JSON

{
  "UserInfoPattern": {
    "translations": {
      "es": {
    		"title": "Title custom style",
        "inputs": {
          "email": { "label": "email style" },
          "firstName": { "label": "label style" },
          "lastName": { "label": "lastName style" },
          "phone": { "label": "phone style" },
          "identityDocument": {
            "label": {
              "CO": "Cédula / Doc de identidad",
              "CL": "RUT/DNI",
              "EC": "Cédula / Doc de identidad",
              "MX": "Número de RFC",
              "BR": "Registro Geral",
              "AR": "DNI / Doc de identidad",
              "UY": "Cédula / Doc de identidad"
            }
          }
        }
      },
      "en": {...},
      "pt": {...}
    }
  }
}

Visualização de dados de faturamento

Formulário para captura de dados de faturamento, caso exigido pelo estabelecimento comercial ou regulamentação. É uma visualização opcional disponível no link de pagamento, widget de pagamento e widget de checkout completo.

Permite personalizar:

Título da seção
Etiquetas para todos os campos

JSON

"BillingPatternX": {
    "translations": {
      "es": {
        "addBillingData": {
          "error": "Debes ingresara los datos de facturación para continuar. ✅",
          "optionalTag": "No obligatorio",
          "title": "Añadir información"
        },
        "billingSummary": {
          "dni": "Documento",
          "update": "Modificar"
        },
        "billingView": {
          "cancel": "Anula",
          "save": "Guardar cambios",
          "title": "Introduce tu información de facturación"
        },
        "billingWithSameData": {
          "title": "Usar los mismos datos de facturación"
        },
        "inputs": {
          "companyBilling": {
            "activity": {
              "label": "Giro/Actividad"
            },
            "address": {
              "label": "Domicilio fiscal"
            },
            "authorizingFirstName": {
              "label": "Nombre del responsable"
            },
            "authorizingIdentityDocument": {
              "label": "Identificación del responsable"
            },
            "authorizingLastName": {
              "label": "Apellido del responsable"
            },
            "city": {
              "label": "Localidad"
            },
            "email": {
              "label": "Correo electrónico"
            },
            "identityDocument": {
              "label": "Registro fiscal"
            },
            "label": "Entidad jurídica",
            "name": {
              "label": "Razón social"
            },
            "phone": {
              "label": "Teléfono de contacto"
            }
          },
          "errors": {
            "identityDocument": "Número de CPF o CNPJ incorrecto",
            "inputRequired": "Campo obligatorio",
            "invalidEmail": "Email inválido",
            "invalidZipcode": "Código postal incorrecto",
            "phoneInvalid": "Teléfono no válido"
          },
          "personBilling": {
            "additionalDescription": {
              "label": "Zona/Barrio"
            },
            "address1": {
              "label": "Domicilio"
            },
            "address2": {
              "label": "Piso / Depto / Torre"
            },
            "city": {
              "label1": "Localidad",
              "label2": "Municipio",
              "label3": "Localidad/Municipio"
            },
            "country": {
              "label": "Nación",
              "placeholder": "Selecciona tu nación"
            },
            "email": {
              "label": "Email"
            },
            "firstName": {
              "label": "Nombre propia"
            },
            "identityDocument": {
              "errorMessage": "Debe ser un documento de identidad válido.",
              "invalidByCountry": {
                "AR": "DNI o identificación incorrecta",
                "BR": "CPF o CNPJ inválido",
                "CL": "RUT o DNI incorrecto",
                "CO": "Cédula no válida",
                "EC": "Cédula no válida",
                "MX": "RFC incorrecto",
                "UY": "Cédula no válida"
              },
              "label": "Identificacións"
            },
            "label": "Persona física",
            "lastName": {
              "label": "Apellido familiar"
            },
            "phone": {
              "label": "Número telefónico"
            },
            "stateName": {
              "label1": "Provincia",
              "label2": "Departamento",
              "placeholder": "Elige una provincia",
              "placeholder2": "Elige un departamento"
            },
            "zipCode": {
              "lbel": "Código postal"
            }
          }
        },
        "title": "Dirección de la tarjeta"
      }

Página de pagamento dividida

Permite ao cliente dividir o valor total do pedido entre dois carrinhos. Ideal para compras de alto valor ou caso o usuário queira utilizar mais de uma forma de pagamento, esse é um recurso dedicado ao Vault.

Permite personalizar:

Etiquetas de cabeçalho
Formulário de etiqueta de cartão
Etiqueta "Valor a Pagar"
Etiqueta "Valor total a pagar"
Texto do botão
Etiquetas de cobrança do segundo cartão
Etiqueta de resumo

JSON

{
  "SplitPaymentPage": {
    "translations": {
      "es": {
        "stepper": {
          "backToSinglePayment": "Custom Style text",
          "label": "Custom Style text"
        },
        "common": {
          "enterCardDataLabel": "Custom Style text",
          "totalAmontLabel": "Custom Style text"
        },
        "amountToPayCard": {
          "title": "Custom Style text"
        },
        "footerButton": {
          "goToCard2": "Custom Style text",
          "goToPurchase": "Custom Style text"
        },
        "useSameBillingCheckbox": {
          "label": "Custom Style text"
        },
        "billingSection": {
          "title": "Custom Style text %{ordinal}"
        },
        "lastStep": {
          "title": "Custom Style text"
        }
      }
    }
  }
}

Exemplo

IMPORTANTE: O billingSection > title personalização de texto inclui o %{ordinal} variável de interpolação. Esta variável exibe dinamicamente a etapa atual do cartão (por exemplo, "Segundo", "Terceiro" etc.). Você deve manter essa variável no texto personalizado para evitar a exibição de rótulos incorretos.

Exemplo:

JSON

{
  "SplitPaymentPage": {
    "translations": {
      "es": {
        "billingSection": {
          "title": "Datos Fact. %{ordinal} tarjeta"
        },
      }
    }
  }
}

Parcelas

Esta mensagem aparece quando você insere um cartão cujo BIN (Número de Identificação Bancária) não é elegível para parcelamento.

Permite personalizar:

Texto da etiqueta
Texto da dica
Liste itens que explicam por que o parcelamento sem juros não se aplica
Estilos de dicas de ferramentas (cores, preenchimento, etc.)

JSON

{
  "InstallmentsPattern": {
    "overrides": {
      "NoInstallmentsTooltip": {
        "label": "¿Por qué no puedo pagar a meses sin intereses?",
        "popoverProps": {
          "title": "¿Por qué no puedo pagar a MSI?",
          "list": [
            "Tu compra es menor a $2,500",
            "Tu tarjeta es de débito",
            "Tu banco no es participante",
            "Los productos no son aplicables a la promoción MSI"
          ],
          "listType": "unordered",
          "textColor": "red",
          "styles": {
            "padding": "16px",
            "backgroundColor": "blue"
          }
        }
      }
    }
  }
}

Exemplo:

Redirecionar página

Permite ao cliente visualizar o status do pagamento após completar o desafio de um APM, como o do 3DS.

Permite personalizar:

Informações da mensagem
Texto de status
Texto da barra de progresso

JSON

{
  "PurchaseStatusView": {
    "translations": {
      "pt": {
        "purchaseStatus": {
          "info": {
            "processed": "Processado Info PT - ☸",
            "cancelled": "Pagamento cancelado PT - ☸",
            "pending": "Pendente PT - ☸",
            "pending_3ds": "Pendente 3DS PT - ☸",
            "denied": "Negado PT - ☸"
          },
          "message": {
            "processed": "message Processado PT - ☸",
            "cancelled": "message Cancelado PT - ☸",
            "pending": "message Pendente PT - ☸",
            "pending_3ds": "message Pendente 3DS PT - ☸",
            "denied": "message Negado PT - ☸"
          },
          "redirecting": "Redirecionando PT"
        }
      }
    }
  }
}

Exemplo:

Nesta seção

CustomStyle structure CustomStyle properties