Personalice la UI/UX de los widgets usando CustomStyles

En esta página

Cómo funciona la personalización
Alcance general
Estilos globales
Personalizaciones por sección

Personaliza tus soluciones DEUNA usando CustomStyle.

DEUNA te permite adaptar visualmente el proceso de pago para alinearlo con la identidad visual de tu marca. Esta guía describe cómo configurar el archivo JSON que controla los estilos de los widgets, incluidos colores, tipografía, bordes, texto y vistas específicas.

Cómo funciona la personalización#

Definir elementos a personalizar: Identifique las vistas de pago o los componentes que desea cambiar (botones, campos, resumen del pedido, mensajes de error, etc.).
Configure el archivo JSON: Incluya los valores de estilo que desea aplicar. Puede modificar colores, tipografía, radio de borde, relleno, etc.
Aplicar la configuración:
- Para conocer los estilos de widgets básicos, comuníquese con su TPM para su implementación.
- Para estilos específicos de pedidos, puede incluir el archivo de estilo dentro de la tokenización de cada pedido.

Alcance general#

Puedes personalizar los siguientes aspectos:

Colores de pago
tipografía
Texto, altura y radio de entradas y botones.
Ingrese los colores del borde por estado
Habilitar el restablecimiento de texto en las entradas
Habilitar validador iconográfico en entradas
Ubicación y tamaño del logotipo
Términos y condiciones
Elementos visuales en vistas específicas (como OTP, tarjetas, página de agradecimiento, datos de facturación, etc.)

Estilos globales#

Personaliza los estilos globales de tu tienda.

Color

Puede definir colores para:

Antecedentes (primaria/secundaria)
Texto principal
Botón de pago (color, desplazamiento, texto, activo)

JSON

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

tipografía

Puede elegir entre los siguientes tipos de letra compatibles:

Heeb
trasero
lato
Montserrat
Mukta
nunito
Abierto sin
arenas movedizas
roboto
vía de acceso
san francisco
ubuntu

JSON

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

Ejemplo:

Radio de entrada y botón

Puedes definir el border-radius en píxeles para entradas y botones:

JSON

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

Altura de entrada y botón

Puede definir una altura personalizada para entradas y botones. Por defecto, la altura es 40px.

Para una mejor experiencia de usuario, utilice una altura mínima de 30 px y máxima de 60 px.

JSON

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

Ingrese los colores del borde por estado

Puede seleccionar un color de borde específico para las entradas según su estado.

Estado	Definición	Color predeterminado
`Disabled`	La entrada no está habilitada para el usuario, por lo tanto, no puede escribir en la entrada.	#B4B4B7
`Enabled`	La entrada está habilitada, pero aún no se ha enfocado o el usuario no ha escrito nada.	#D9D9DB
`Focus`	El usuario está escribiendo o se concentra en la entrada.	# 404046
`Filled`	La entrada se ha completado con datos válidos.	#8E8E92
`Error`	La entrada contiene errores de validación o está incompleta cuando es necesaria.	#E11900

JavaScript

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

Habilitar el restablecimiento de texto en las entradas

Puede colocar un botón de reinicio en todos los campos de texto. De forma predeterminada, esta configuración está desactivada. Actúa como un atajo para borrar todo el texto del campo sin mantener la tecla de retroceso.

JavaScript

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

Habilitar validador iconográfico en entradas de texto

Puede habilitar un validador iconográfico en entradas de texto. De forma predeterminada, esta configuración está desactivada. Consta de un icono dentro del input, alineado a la derecha, según el estado:

Llenado: Consultar ✅
Error: Exclamación ❗️

JavaScript

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

Logotipo del comerciante

Se refiere a configuraciones disponibles para el logo.

Cambiar logotipo
Cambiar ubicación del logotipo: centro o izquierda
Cambiar tamaño del logotipo

Predeterminado: logotipo de 100px ubicado a la izquierda del widget

JavaScript

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

Términos y condiciones

Con esta configuración, configura los textos legales y enlaces que aparecen en la parte inferior de una pantalla o formulario como “Al continuar, aceptas nuestros Términos y Condiciones…”.

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"  
    },
  }
}

Personalizaciones por sección#

Personalice secciones de su solución.

Vista del código de verificación

Esta vista aparece cuando se requiere que el usuario valide su identidad mediante un código de contraseña de un solo uso enviado por correo electrónico. Es parte del flujo de autenticación.

La vista de verificación es opcional.

Personalizar:

encabezado
Botones de cambio de canal (SMS/correo electrónico)
Opción "Continuar como invitado"

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": { ... }
    }
  }
}

Vista de pago con tarjeta

Corresponde al formulario principal donde el usuario ingresa los datos de su tarjeta para completar la compra.

Personalizar:

Títulos y subtítulos de secciones: editar u ocultar textos
Etiquetas de campo (como número de tarjeta, nombre y cuotas)
Texto del botón de pago
Avisos informativos de UpperTag / LowerTag (no disponibles en Payment Link).
Mensajes legales y enlaces a términos y condiciones.

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
    }
  }
}

Vista de tarjetas guardadas (usuarios autenticados)

Se muestra cuando un usuario autenticado ha almacenado tarjetas previamente y puede elegir entre ellas para completar su compra.

Puedes personalizar:

Textos de botones
Mensajes o advertencias de caducidad
Confirmación de eliminación

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": {...}
    }
  }
}

gracias pagina

Pantalla de confirmación de compra que aparece al final del proceso si no se redirige a otro sitio.

Puedes personalizar:

gracias titulo
Estados de pedidos (succeeded, pending, denied)
Texto del botón: "Guardar recibo", "Volver a la tienda"

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
        }
      }
    }
  }
}

Ejemplo:

página de vales

Pantalla de instrucciones para pagos con métodos alternativos (por ejemplo, pagos en efectivo o transferencias).

Puedes personalizar:

Título, subtítulo, descripción.
Mensajes de referencia y fecha límite de pago.
Texto del botón
Mostrar/ocultar la marca DEUNA

Configure su JSON con uno de los siguientes identificadores de procesador de pagos:

SPEI
OXXO_PAY
OXXO_REFERENCE
PAYU_EFECTY
BAZ_REFERENCE
SPEI_OPENPAY
SPEI_OPM
SAFETY_PAY
STP_CODI
PIX

Reemplazar [PROCESADOR_NOMBRE] en su configuración JSON con uno de los valores enumerados anteriormente.

Ejemplo 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": { ... }
    }
  }
}

Vista de información del usuario

Formulario inicial donde se solicitan datos básicos del comprador, como nombre, correo electrónico, teléfono y documento de identidad. Esta vista es opcional y solo está disponible para el enlace de pago y el pago completo.

Permite personalizar campos relacionados con:

Título de la sección
Etiquetas para todos los 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": {...}
    }
  }
}

Vista de datos de facturación

Formulario para capturar datos de facturación, si así lo requiere el comerciante o la regulación. Es una vista opcional disponible en el enlace de pago, el widget de pago y el widget de pago completo.

Permite personalizar:

Título de la sección
Etiquetas para todos los 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 pago dividido

Permite al cliente dividir el valor total del pedido entre dos carritos. Ideal para compras de alto valor o si el usuario desea utilizar más de un método de pago, esta es una función dedicada a Vault.

Permite personalizar:

Etiquetas de encabezado
Formulario de etiqueta de tarjeta
Etiqueta "Cantidad a pagar"
Etiqueta "Monto total a pagar"
Texto del botón
Etiquetas de facturación de segunda tarjeta
Etiqueta de resumen

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"
        }
      }
    }
  }
}

Ejemplo

IMPORTANTE: El billingSection > title La personalización del texto incluye la %{ordinal} variable de interpolación. Esta variable muestra dinámicamente el paso de la tarjeta actual (por ejemplo, "Segundo", "Tercero", etc.). Debe conservar esta variable en el texto personalizado para evitar que se muestren etiquetas incorrectas.

Ejemplo:

JSON

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

Cuotas

Este mensaje aparece cuando ingresa una tarjeta cuyo BIN (Número de identificación bancaria) no es elegible para pagos a plazos.

Permite personalizar:

Texto de etiqueta
Texto de información sobre herramientas
Enumere elementos que expliquen por qué no se aplican las cuotas sin intereses
Estilos de información sobre herramientas (colores, relleno, 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"
          }
        }
      }
    }
  }
}

Ejemplo:

Redirigir página

Permite al cliente ver el estado del pago después de completar el desafío de un APM, como el de 3DS.

Permite personalizar:

Información del mensaje
Texto de estado
Texto de la barra de progreso

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"
        }
      }
    }
  }
}

Ejemplo:

En esta sección

CustomStyle structure CustomStyle properties