Structure de style personnalisé
Créez et prévisualisez une caisse de marque, puis examinez chaque option de configuration CustomStyle.
Sur cette page
CustomStyle interactif
Créez visuellement votre checkout
Choisissez un module, ajustez ses paramètres et observez le checkout DEUNA se mettre à jour instantanément. Les contrôles reprennent le configurateur de l’Admin.
Aperçu en direct
YOURSTORE
Checkout sécuriséChoisissez un moyen de paiement
•••• 4242Carte enregistrée
Propulsé par DEUNA
Configuration complète du style personnalisé#
Le CustomStyle L'objet contient les paramètres visuels du widget de paiement et du coffre-fort de cartes. Utilisez le générateur ci-dessus pour les contrôles les plus courants, ou ouvrez le référence complète de la propriété CustomStyle pour chaque champ et valeur pris en charge.
L'exemple ci-dessous conserve tous les remplacements spécifiques à la vue afin que vous puissiez copier la structure complète ou inspecter des modèles individuels.
Afficher l'exemple de configuration complet
Exemple de JSON valide pour CustomStyle :
JSON
{
"theme": {
"colors": {
"primaryTextColor": "#323237",
"backgroundSecondary": "#FFFFFF",
"backgroundPrimary": "#FFFFFF",
"buttonPrimaryFill": "#17171A",
"buttonPrimaryHover": "#69696E",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryActive": "#5F529E"
},
"typography": {
"primaryFontFamily": "Lobster"
},
"inputs": {
"borderRadius": "50px"
},
"buttons": {
"borderRadius": "20px"
}
},
"HeaderPattern": {
"overrides": {
"Logo": {
"props": {
"url": "https://live.staticflickr.com/6164/6144091654_cbc351c8e2_b.jpg",
"position": "center",
"style": {
"min-width": "150px"
}
}
}
}
},
"OtpPage": {
"overrides": {
"Header": {
"props": {
"overrides": {
"Logo": {
"props": {
"url": "https://live.staticflickr.com/6164/6144091654_cbc351c8e2_b.jpg"
}
}
}
}
},
"Headings": {
"props": {
"title": "Ingresa el código de verificación",
"description": "Para ver tus tarjetas guardadas ingresa el código enviado a"
}
},
"OtpChangeChannelButton": {
"props": {
"description": {
"sms": "Enviar código por correo",
"email": "Enviar código por SMS"
}
}
},
"ContinueAsGuestButton": {
"props": {
"description": "Continuar sin ingresar el código"
}
}
}
},
{
"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": "Custom title",
"subtitle": "Custom subtitle"
}
}
}
}
}
}
},
"TermsConditionsPattern": {
"showForGuest": true,
"showForAuth": false,
"legalMessage": "Al continuar aceptas las",
"connectorText": "y",
"hideCompanyDisclaimer": false,
"termsAndConditionsUrl": "https://tusitio.com/terminos-y-condiciones",
"privacyPolicyUrl": "https://tusitio.com/politica-de-privacidad"
},
"PaymentButtonPattern": {
"label": "Pagar",
"showOrderTotal": true,
"styles": {
"padding": "10px 20px",
"borderRadius": "25px"
}
},
"PoweredByPattern": {
"url": "https://images-staging.getduna.com/checkout_modular/banco-azteca-powered-by-deuna.svg",
"hideText": true,
"hide": false,
"imageStyle": {
"filter": "none",
"width": "50px",
"height": "200px"
}
},
"UserCardPattern": {
"translations": {
"es": {
"addNewCard": {
"info": "Agregar una tarjeta"
},
"moreOptions": {
"payWith": "Tarjeta seleccionada"
},
"paymentMethods": {
"seeAllMyCards": "Ver tarjetas guardadas",
"expiredCard": "Tarjeta expirada",
"warningExpiredCard": "Selecciona un método de pago disponible",
"confirmDeleteMethodTitle": "Eliminar esta tarjeta",
"deleteMainText": "Eliminar",
"confirmDeleteMethodAccept": "Confirmar",
"confirmDeleteMethodCancel": "Cancelar",
"confirmDeleteMethod": "Ten en cuenta que al eliminarla no podrás restaurarla."
}
}
}
},
"UserInfoPattern": {
"title": "Title custom style",
"translations": {
"es": {
"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"
}
}
}
}
}
},
"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": {
"AR": "DNI / Doc de identidad",
"BR": "CPF/ CNPJ",
"CL": "RUT/DNI",
"CO": "Cédula / Doc de identidad",
"CR": "DNI / Doc de identidad",
"EC": "Cédula / Doc de identidad",
"ES": "DNI / Doc de identidad",
"MX": "Número de RFC",
"PE": "DNI / Doc de identidad",
"UY": "Cédula / Doc de identidad",
"default": "Documento de identidad"
}
},
"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": {
"label": "Código postal"
}
}
},
"title": "Dirección de la tarjeta"
}
}
},
"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"
}
}
}
},
{
UpperTagPattern: {
title: 'This is a custom upper tag',
description: ['first description tag', 'second description tag', 'third description tag'],
style: {
boxShadow: 'none',
marginTop: '16px',
backgroundColor: '#E6EFFE',
},
},
LowerTagPattern: {
title: 'This is a custom lower tag',
description: 'custom description tag',
},
};
}