Estrutura CustomStyle
Crie e visualize um checkout de marca e, em seguida, revise todas as opções de configuração do CustomStyle.
Nesta página
CustomStyle interativo
Crie seu checkout visualmente
Escolha um módulo, ajuste suas configurações e veja o checkout da DEUNA atualizar imediatamente. Os controles refletem o construtor do Admin.
Prévia ao vivo
YOURSTORE
Checkout seguroEscolha um método de pagamento
•••• 4242Cartão salvo
Desenvolvido pela DEUNA
Configuração completa do CustomStyle#
O CustomStyle contém as configurações visuais do widget de pagamento e do cofre de cartão. Use o construtor acima para os controles mais comuns ou abra o referência completa da propriedade CustomStyle para cada campo e valor suportado.
O exemplo abaixo mantém todas as substituições específicas da visualização juntas para que você possa copiar a estrutura completa ou inspecionar padrões individuais.
Veja o exemplo completo de configuração
Exemplo de 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',
},
};
}