Personalizza l'interfaccia utente/UX dei widget utilizzando CustomStyles

In questa pagina

Come funziona la personalizzazione
Campo d'applicazione generale
Stili globali
Personalizzazione per sezione

Personalizza le tue soluzioni DEUNA utilizzando CustomStyle.

DEUNA consente di adattare visivamente il checkout per allineare con l'identità visiva del tuo marchio. Questa guida descrive come configurare il file JSON che controlla gli stili dei widget, compresi i colori, la tipografia, i bordi, il testo e le viste specifiche.

Come funziona la personalizzazione#

Definire gli elementi per personalizzare: Identificare le visualizzazioni o i componenti di controllo che si desidera modificare (bottoni, campi, sommario ordine, messaggi di errore, e così via).
Configurare il file JSON: Includere i valori di stile che si desidera applicare. È possibile modificare colori, tipografia, raggio di confine, imbottitura, e così via.
Applicare la configurazione:
- Per gli stili di widget di base, contattare il TPM per l'implementazione.
- Per gli stili specifici dell'ordine, è possibile includere il file di stile all'interno di ogni tokenization dell'ordine.

Campo d'applicazione generale#

È possibile personalizzare i seguenti aspetti:

Colori di controllo
Tipografia
Testo, altezza e raggio di ingressi e pulsanti
Colori di confine di ingresso per Stato
Attivare il reset del testo in input
Attiva il validatore iconografico in input
Luogo e dimensione del logo
Termini e condizioni
Elementi visivi in punti di vista specifici (come OTP, carte, grazie alla pagina, dati di fatturazione, e così via)

Stili globali#

Personalizza gli stili globali del tuo negozio.

Colore

È possibile definire i colori per:

Sfondo (primario/secondario)
Testo principale
Pulsante di pagamento (colore, hover, testo, attivo)

JSON

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

Tipografia

Puoi scegliere tra le seguenti tipologie compatibili:

Heeb
Ciao.
Lato
Montserrat
Mukta
Nunito
Aprire Sans
Veloci e
Robot
Raleway
San Francisco
Ubuntu

JSON

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

Esempio:

raggio di ingresso e pulsante

Puoi definire il border-radius in pixel per ingressi e pulsanti:

JSON

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

Altezza ingresso e pulsante

È possibile definire un'altezza personalizzata per ingressi e pulsanti. Per impostazione predefinita, l'altezza è 40px.

Per una migliore esperienza utente, utilizzare un'altezza minima di 30px e massimo di 60px.

JSON

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

Colori di confine di ingresso per Stato

È possibile selezionare un colore di confine specifico per gli input a seconda del loro stato.

Stato	Definizione	Colore predefinito
`Disabled`	L'ingresso non è abilitato per l'utente, quindi non possono scrivere nell'ingresso.	# B4B4B7 #
`Enabled`	L'ingresso è abilitato, ma non è stato ancora focalizzato o l'utente non ha scritto nulla.	# D9D9DB #
`Focus`	L'utente sta digitando o si concentra sull'ingresso.	# 404046
`Filled`	L'ingresso è stato completato con dati validi.	# 8E8E92 #
`Error`	L'ingresso contiene errori di validazione o è incompleto quando è necessario.	# E11900 #

JavaScript

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

Attivare il reset del testo in input

È possibile inserire un pulsante di reset in tutti i campi di testo. Per impostazione predefinita, questa impostazione è disattivata. Agisce come una scorciatoia per cancellare tutto il testo dal campo senza tenere lo spazio posteriore.

JavaScript

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

Attiva il validatore iconografico in input di testo

È possibile attivare un validatore iconografico in input di testo. Per impostazione predefinita, questa impostazione è disattivata. Si compone di un'icona all'interno dell'ingresso, allineata a destra, a seconda dello stato:

Riempito: Controllare ✅
Errore: Esclamazione ❗️

JavaScript

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

Logo Merchant

Rifiuti alle configurazioni disponibili per il logo

Cambia logo
Cambia posizione del logo: centro o sinistra
Cambia dimensione del logo

Predefinito: logo 100px situato a sinistra del widget

JavaScript

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

Termini e condizioni

Con questa configurazione, et up i testi legali e i link che appaiono in fondo a uno schermo o forma come “Per continuare, accetti i nostri Termini e Condizioni...”.

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

Personalizzazione per sezione#

Personalizza le sezioni della tua soluzione.

Visualizzazione del codice di verifica

Questa visualizzazione appare quando è necessario che l'utente convalida la propria identità attraverso un codice di password una volta inviato per e-mail. Fa parte del flusso di autenticazione.

La vista di verifica è facoltativa.

Personalizza:

Intestazione
Pulsanti di cambio canale (SMS/email)
"Continue as guest" opzione

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 sul pagamento carta

Corrisponde al modulo principale dove l'utente inserisce i dettagli della carta per completare l'acquisto.

Personalizza:

Titolo e sottotitoli della sezione: modifica o nascondi testi
Etichette di campo (come il numero di carta, il nome e le installazioni)
Testo del pulsante di pagamento
Note informative UpperTag / LowerTag (non disponibili sul link di pagamento).
Messaggi legali e link a termini e condizioni

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 carte salvate (utenti autenticati)

Mostrato quando un utente autenticato ha precedentemente memorizzato le carte e può scegliere tra loro per completare il loro acquisto.

È possibile personalizzare:

Testi di pulsante
Messaggi di espulsione o avvisi
Conferma di cancellazione

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

Grazie alla pagina

Acquistare la schermata di conferma che appare alla fine del processo se non reindirizzato ad un altro sito.

È possibile personalizzare:

Grazie titolo
Statuti d'ordine (succeeded, pending, denied)
Testo a pulsante: "Salva ricevuta", "Torna per memorizzare"

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

Esempio:

Pagina del voucher

Schermo d'istruzione per i pagamenti con metodi alternativi (ad esempio, pagamenti in contanti o trasferimenti).

È possibile personalizzare:

Titolo, sottotitolo, descrizione
Termini e tempi di pagamento
Testo del pulsante
Mostra / nascondi il marchio DEUNA

Configurare il JSON con uno dei seguenti identificatori di processore di pagamento:

SPEI
OXXO_PAY
OXXO_REFERENCE
PAYU_EFECTY
BAZ_REFERENCE
SPEI_OPENPAY
SPEI_OPM
SAFETY_PAY
STP_CODI
PIX

Sostituire [PROCESSOR NAME] nella configurazione JSON con uno dei valori sopra elencati.

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

Visualizzazione delle informazioni utente

Modulo iniziale in cui vengono richiesti i dati dell'acquirente di base, come nome, e-mail, telefono e documento di identità. Questa vista è facoltativa e disponibile solo per il link di pagamento e il checkout completo.

Consente di personalizzare i campi relativi a:

Titolo della sezione
Etichette per tutti i campi

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

Visualizzazione dati di fatturazione

Modulo per catturare i dati di fatturazione, se richiesto dal commerciante o dalla regolazione. È una vista opzionale disponibile nel link di pagamento, widget di pagamento e widget di Checkout completo.

Consente di personalizzare:

Titolo della sezione
Etichette per tutti i campi

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

Pagina di pagamento divisa

Consente al cliente di dividere il valore totale dell'ordine tra due carrelli. Ideale per acquisti di alto valore o se l'utente vuole utilizzare più di un metodo di pagamento, questa è una funzione dedicata per Vault.

Consente di personalizzare:

Etichette intestazioni
Scheda di carta
"Importare a pagare" Etichetta
Etichetta "Total Amount to Pay"
Testo del pulsante
Etichette di fatturazione della seconda carta
Etichetta di sintesi

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

Esempio

IMPORTANTE: Il billingSection > title personalizzazione del testo include %{ordinal} variabile di interpolazione. Questa variabile mostra dinamicamente il passo della carta corrente (ad esempio, "Secondo", "Terzo", ecc.). È necessario mantenere questa variabile nel testo personalizzato per evitare che vengano visualizzate etichette errate.

Esempio:

JSON

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

Installazioni

Questo messaggio appare quando si immette una carta il cui BIN (numero di identificazione del BAnk) non è idoneo per i pagamenti di rate.

Consente di personalizzare:

Testo dell'etichetta
Testo della tabella degli strumenti
Elenco elementi che spiegano perché gli rate senza interessi non si applicano
Stili di punta degli strumenti (colori, imbottitura, ecc.)

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

Esempio:

Pagina di reindirizzamento

Consente al cliente di visualizzare lo stato di pagamento dopo aver completato la sfida di un APM, come quello per 3DS.

Consente di personalizzare:

Informazioni sul messaggio
Testo di stato
Testo della barra di 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"
        }
      }
    }
  }
}

Esempio:

In questa sezione

Struttura di stile personalizzata Proprietà CustomStyle