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": "#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": "Identificacións"
            },
            "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"
      }
    }
  }
  {
  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',
  },
};
}