CustomStyle structure
The CSSStyleFile file contains the style settings for the widget and the vault.
Example of a valid JSON for CustomStyle:
{
"theme": {
"colors": {
"primaryTextColor": "#5a51be",
"backgroundSecondary": "#FFFFFF",
"backgroundPrimary": "#e8e1fd",
"buttonPrimaryFill": "#6fccb8",
"buttonPrimaryHover": "#0033cc",
"buttonPrimaryActive": "#ff0000",
"inputBorder": "#D9D9DB",
"inputBorderError": "#F1998E",
"inputEnhancerFill": "#1AE1D7",
"inputBorderPositive": "#66D19E"
},
"typography": {
"primaryFontFamily": "Lobster"
},
"buttons": {
"borderRadius": "4px"
},
"inputs": {
"borderRadius": "4px"
}
},
"HeaderPattern": {
"overrides": {
"Logo": {
"props": {
"url": "https://live.staticflickr.com/6164/6144091654_cbc351c8e2_b.jpg",
"position": "center",
"style": {
"min-width": "100px"
}
}
}
}
},
"OtpPage": {
"overrides": {
"Header": {
"props": {
"overrides": {
"Logo": {
"props": {
"url": "https://cdn.stg.deuna.io/explore-deuna/assets/explore-deuna-icon.svg"
}
}
}
}
},
"Headings": {
"props": {
"title": "Verificación en curso",
"description": "Introduce el código que te hemos enviado para continuar."
}
},
"OtpChangeChannelButton": {
"props": {
"description": {
"sms": "Recibir código en tu correo",
"email": "Recibir código por SMS"
}
}
},
"OtpResendButton": {
"props": {
"description": "Solicitar nuevo código"
}
},
"ContinueAsGuestButton": {
"props": {
"description": "Seguir sin ingresar código"
}
},
"OtpPattern": {
"props": {
"timeout": 3
}
}
}
},
"PaymentMethodsPattern": {
"translations": {
"es": {
"paymentMethods": {
"info": {
"card": {
"title": "tarjeta crédito o débito",
"subtitle": "Por favor, ingresa los datos de tu tarjeta"
}
}
},
"inputs": {
"identityNumber": {
"label": "Número de identificaciónxxxx"
},
"identityDocument": {
"label": {
"CO": "CO: Documento de identidad",
"CL": "CL: RUT/DNI",
"EC": "EC: Cédula / Documento de identidad",
"MX": "MX: Identificación oficial",
"BR": "BR: CPF/CNPJ del titular",
"AR": "AR: DNI o documento equivalente",
"UY": "UY: Cédula de identidad"
}
},
"cardNumber": {
"label": "Número de la tarjeta"
},
"cardHolder": {
"label": "Nombre como aparece en la tarjeta"
},
"expirationDate": {
"label": "Vencimiento de la tarjeta"
},
"securityCode": {
"label": "Código de seguridad"
},
"installment": {
"label": "Elige el número de cuotas",
"withoutInstallments": "Pago en una sola exhibición"
}
}
}
}
},
"TermsConditionsPattern": {
"showForGuest": true,
"showForAuth": false,
"legalMessage": "Al continuar, aceptas nuestras condiciones de uso.",
"connectorText": "y",
"hideCompanyDisclaimer": false,
"termsAndConditionsUrl": "https://www.example.com/terms",
"privacyPolicyUrl": "https://www.example.com/privacy"
},
"PaymentButtonPattern": {
"label": "Completar pago por",
"showOrderTotal": true
},
"PoweredByPattern": {
"url": "https://images-staging.getduna.com/checkout_modular/banco-azteca-powered-by-deuna.svg",
"hideText": true,
"hide": false,
"imageStyle": {
"filter": "grayscale(100%)",
"width": "90%",
"height": "auto"
}
},
"UserCardPattern": {
"translations": {
"es": {
"addNewCard": {
"info": "Añadir una nueva tarjeta"
},
"moreOptions": {
"payWith": "Usar tarjeta seleccionada"
},
"paymentMethods": {
"seeAllMyCards": "Mostrar todas mis tarjetas",
"expiredCard": "Esta tarjeta ya no es válida",
"warningExpiredCard": "Selecciona otro método de pago",
"confirmDeleteMethodTitle": "¿Eliminar tarjeta?",
"deleteMainText": "Eliminar tarjeta",
"confirmDeleteMethodAccept": "Sí, eliminar",
"confirmDeleteMethodCancel": "No, cancelar",
"confirmDeleteMethod": "Una vez eliminada, esta tarjeta no podrá recuperarse."
}
}
}
}
}
Updated 3 days ago