CustomStyle structure
Build and preview a branded checkout, then review every CustomStyle configuration option.
On this page
Interactive CustomStyle
Build your checkout visually
Choose a module, adjust its settings, and see the DEUNA checkout update immediately. The controls mirror the Admin checkout builder.
Live preview
YOURSTORE
Secure checkoutChoose a payment method
•••• 4242Saved card
Powered by DEUNA
Complete CustomStyle configuration#
The CustomStyle object contains the visual settings for the Payment Widget and Card Vault. Use the builder above for the most common controls, or open the complete CustomStyle property reference for every supported field and value.
The example below keeps all view-specific overrides together so you can copy the complete structure or inspect individual patterns.
View the complete configuration example
Example of a valid JSON for 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',
},
};
}