Estructura de estilo personalizado
Cree y obtenga una vista previa de un pago con marca, luego revise cada opción de configuración de CustomStyle.
En esta página
CustomStyle interactivo
Diseña tu checkout visualmente
Elige un módulo, ajusta su configuración y observa cómo el checkout de DEUNA se actualiza al instante. Los controles reflejan el constructor del Admin.
Vista previa en vivo
YOURSTORE
Checkout seguroElige un método de pago
•••• 4242Tarjeta guardada
Con tecnología de DEUNA
Configuración completa de CustomStyle#
El CustomStyle El objeto contiene la configuración visual para el widget de pago y la bóveda de tarjetas. Utilice el constructor anterior para los controles más comunes, o abra el referencia completa de la propiedad CustomStyle para cada campo y valor admitidos.
El siguiente ejemplo mantiene juntas todas las anulaciones específicas de la vista para que pueda copiar la estructura completa o inspeccionar patrones individuales.
Ver el ejemplo de configuración completo
Ejemplo de un JSON válido para 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',
},
};
}