CystomStyle properties
Property Definitions
Below is a detailed description of the editable and customizable components:
| Property | Object | Description |
|---|---|---|
| theme | Object | Object defining the theme global settings for colors and styles. |
| theme.typography.primaryFontFamily | String | Primary font for widgets. |
| theme.colors.primaryTextColor | String | Primary color of the text. |
| theme.colors.backgroundSecondary | String | Secondary background color (for example, in OTP view). |
| theme.colors.backgroundPrimary | String | Primary background color. |
| theme.colors.buttonPrimaryFill | String | Primary button fill color. |
| theme.colors.buttonPrimaryHover | String | Color of the primary button on hover. |
| theme.colors.buttonPrimaryActive | String | Color of the primary button on click. |
| theme.colors.inputBorder | String | Color of the input border in default state. |
| theme.colors.inputBorderError | String | Color of the input border in error state. |
| theme.colors.inputEnhancerFill | String | Background color of the input when in focus (active). |
| theme.colors.inputBorderPositive | String | Border color of the input when successful. |
| theme.buttons.borderRadius | String | Border radius for buttons. |
| theme.inputs.borderRadius | String | Border radius for input fields. |
| theme.inputs.inputMode | String | Input mode: validated (iconographic validator), clearable (text reset) or none. |
| HeaderPattern | Object | Object defining overrides for the header. |
| HeaderPattern.overrides | Object | Contains specific overrides for header components. |
| HeaderPattern.overrides.Logo | Object | Object defining properties for the logo component. |
| HeaderPattern.overrides.Logo.props.url | String | URL of the logo to be displayed in the header. |
| HeaderPattern.overrides.Logo.props.style | String | Defines the size of the logo. |
| HeaderPattern.overrides.Logo.props.position | String | Defines which alignment to display the logo, left or center. |
| CardInfoPattern | Object | Object that defines the card information. |
| CardInfoPattern.title | String | Title of the card information section. |
| CardInfoPattern.subtitle.content | String | Content of the subtitle. |
| UpperTagPattern | Object | Object that defines a custom upper tag and is displayed below the widget header. |
| UpperTagPattern.title | String | Title of the upper tag. |
| UpperTagPattern.description | String | Description of the upper tag. |
| UpperTagPattern.iconColor | String | Color of the icon of the upper tag. |
| UpperTagPattern.style | Object | Style of the upper tag, such as color(text color), box-shadow, margin-top and backgroundColor. |
| UserCardPattern | Object | Object defining translations and settings for user card management. |
| UserCardPattern.translations.en | Object | Spanish translations for user card management components. |
| UserCardPattern.translations.en.addNewCard.info | String | Text for the "Add new card" option. |
| UserCardPattern.translations.en.moreOptions.payWith | String | Text for the "Pay with" option. |
| UserCardPattern.translations.en.paymentMethods.seeAllMyCards | String | Text to see all the saved cards. |
| UserCardPattern.translations.en.paymentMethods.expiredCard | String | Text indicating an expired card. |
| UserCardPattern.translations.en.paymentMethods.warningExpiredCard | String | Warning message to select a valid payment method. |
| UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodTitle | String | Title for the card deletion confirmation method. |
| UserCardPattern.translations.en.paymentMethods.deleteMainText | String | Main text for the delete option. |
| UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodAccept | String | Text for the accept button in the delete confirmation. |
| UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodCancel | String | Text for the cancel button in the delete confirmation. |
| UserCardPattern.translations.en.paymentMethods.confirmDeleteMethod | String | Message indicating that the deletion is irreversible. |
| PaymentMethodsPattern | Object | Object defining translations and settings for input fields related to payment methods. |
| PaymentMethodsPattern.translations.inputs.card.cardNumber.label | String | Label for the card number field: "Card Number". |
| PaymentMethodsPattern.translations.en.inputs.card.cardNumber.placeholder | String | Help text for the card number field: "0000 0000 0000 0000 0000 0000". |
| PaymentMethodsPattern.translations.en.inputs.card.cardHolder.label | String | Label for cardholder name field: "Name as it appears on card". |
| PaymentMethodsPattern.translations.en.inputs.card.cardHolder.placeholder | String | Help text for cardholder name field: "e.g. Juan Zapata". |
| PaymentMethodsPattern.translations.en.inputs.card.expirationDate.label | String | Label for expiration date field: "Expiration Date". |
| PaymentMethodsPattern.translations.en.inputs.card.expirationDate.placeholder | String | Help text for expiration date: "MM / YY". |
| PaymentMethodsPattern.translations.en.inputs.card.securityCode.label | String | Label for security code: "CVV". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.label | String | Label for the fee field: "Fees". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.pay_by | String | Text to indicate payment in installments: "Paga en" Text to indicate payment in installments: "Paga en". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.first_pay | String | Text to indicate first payment: "First payment". |
| PaymentMethodsPattern.translations.es.inputs.card.installment.without_interest | String | Text to indicate no interest: "No interest". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.without_installments | String | Text to indicate without installments: "Without installments". |
| PaymentMethodsPattern.translations.en.inputs.card.installment.loading | String | Text displayed during installment validation: "Validating installments..." Text to indicate no installment: "No installment |
| PaymentMethodsPattern.translations.en.inputs.paymentMethods.info.card.title | String | Custom title for the card: "Custom title". |
| PaymentMethodsPattern.translations.en.inputs.paymentMethods.info.card.subtitle | String | Custom subtitle for the card: "Custom subtitle". |
| cardHolder | Object | Object defining the label for the cardholder name field. |
| cardHolder.label | String | Custom label for the cardholder name field. |
| installment | Object | Object defining the label for the installment field. |
| installment.label | String | Custom label for the installment field. |
| installment.withoutInstallments | String | Text to indicate that there are no installments. |
| LowerTagPattern | Object | Object that defines a custom lower tag and is displayed in the lower area of the widget above the T&Cs and the payment button. |
| LowerTagPattern.title | String | Title of the lower tag. |
| LowerTagPattern.description | String | Description of the lower tag. |
| LowerTagPattern.iconColor | String | Color of the icon of the lower tag. |
| LowerTagPattern.style | Object | Style of the upper tag, such as color(text color), box-shadow and backgroundColor. |
| TermsConditionsPattern | Object | Object defining the terms and conditions settings. |
| TermsConditionsPattern.showForGuest | Boolean | Indicates whether terms and conditions are shown for guest users. |
| TermsConditionsPattern.showForAuth | Boolean | Indicates whether the terms and conditions for authenticated users are shown. |
| TermsConditionsPattern.legalMessage | String | Custom legal message. |
| TermsConditionsPattern.connectorText | String | Connector text in the terms and conditions. |
| TermsConditionsPattern.hideCompanyDisclaimer | Boolean | Indicates if the company disclaimer is hidden. |
| TermsConditionsPattern.termsAndConditionsUrl | string | Defines the URL to be used as a hyperlink for the Terms and Conditions that the user will see. |
| TermsConditionsPattern.privacyPolicyUrl | string | Defines the URL to be used as a hyperlink for the Privacy Policy that the user will see. |
| PaymentButtonPattern | Object | Object that defines the label, style and configuration of the payment button. |
| PaymentButtonPattern.label | String | Text for the payment button. |
| PaymentButtonPattern.showOrderTotal | Boolean | Indicates whether the order total is shown on the form. |
| PaymentButtonPattern.styles | Object | Styles of the payment button, such as padding and border radius. |
| PaymentButtonPattern.styles.padding | String | Padding of the payment button. |
| PaymentButtonPattern.styles.borderRadius | String | Border radius of the payment button. |
| PoweredByPattern | Object | Object defining style and configuration of the Power by DEUNA disclaimer. |
| PoweredByPattern.hide | Boolean | Indicates whether the "Powered by DEUNA" flag is hidden. |
| PoweredByPattern.hidetext | Boolean | Indicates whether the "Powered by" flag is hidden. |
| PoweredByPattern.url | String | URL of the logo to be displayed in Power by. |
| PoweredByPattern.imageStyle | Object | Style of the Power By logo, width and height. |
| ThankYouView | Object | Object defining translations and settings for the thank you view after a payment. |
| ThanksYouView.translations.en.thankYouPage.status.succeeded | String | Message displayed when the payment was successful. |
| ThankYouView.translations.en.thankYouPage.status.pending | String | Message displayed while the payment is being processed. |
| ThankYouView.translations.en.thankYouPage.status.denied | String | Message displayed when the payment was denied. |
| ThankYouView.overrides.Body.props.title | String | Title displayed in the body of the thank you view. |
| ThankYouView.overrides.Actions.props.hideDownloadAction | Boolean | Defines whether to hide the option to download the receipt. |
| ThankYouView.overrides.Actions.props.hideBackToCommerceAction | Boolean | Defines whether to hide the option to return to the store. |
| ThankYouView.overrides.Actions.props.downloadText | String | Text of the button to save the receipt. |
| ThankYouView.overrides.Actions.props.backText | String | Text of the button to return to the store. |
| VoucherPage | Object | Object defining the voucher page configuration for different payment methods. |
| VoucherPage.apmName.overrides.Header.props.title | String | Main title shown in the voucher header for OXXO. |
| VoucherPage.apmName.overrides.Header.props.subtitle | String | Subtitle indicating the action to present the code in store. |
| VoucherPage.apmName.overrides.Header.props.referenceTitle | String | Text identifying the payment reference field. |
| VoucherPage.apmName.overrides.Header.props.payBefore | String | Deadline to make the payment. |
| VoucherPage.OapmName.overrides.Footer.props.downloadReference | String | Text of the button to download the voucher. |
| VoucherPage.apmName.overrides.Footer.props.showPoweredByDeuna | Boolean | Indicates if the "Powered by Deuna" label is shown. |
| OtpPage | Object | Object defining overrides for the OTP page. |
| OtpPage.overrides | Object | Contains overrides specific to components of the OTP page. |
| OtpPage.overrides.Header | Object | Object defining header-related overrides for the OTP page. |
| OtpPage.overrides.Header.props | Object | Properties for the header, such as the logo URL. |
| OtpPage.overrides.Header.props.url | String | URL of the logo to be displayed on the OTP page. |
| OtpPage.overrides.Headings | Object | Object defining the title and description for the OTP page. |
| OtpPage.overrides.Headings.title | String | Custom title for the OTP page. |
| OtpPage.overrides.Headings.description | String | Descriptive text for the OTP page. |
| OtpPage.overrides.OtpChangeChannelButton | Object | Object defining the description for the OTP channel change button. |
| OtpPage.overrides.OtpChangeChannelButton.description | Object | Descriptions for sending OTP by SMS or email. |
| OtpPage.overrides.OtpChangeChannelButton.description.sms | String | Custom description to send OTP by SMS. |
| OtpPage.overrides.OtpChangeChannelButton.description.email | String | Custom description to send OTP by email. |
| OtpPage.overrides.ContinueAsGuestButton | Object | Object defining the description for the "continue as guest" button. |
| OtpPage.overrides.ContinueAsGuestButton.description | String | Descriptive text to continue as guest. |
| BillingPatternX | Object | Object defining the input structure for the billing data. |
| BillingPatternX.translations.en.title | String | Main title for the billing section. |
| BillingPatternX.translations.en.addBillingData.error | String | Error message when not completing billing data. |
| BillingPatternX.translations.en.addBillingData.optionalTag | String | Tag to indicate non-mandatory fields. |
| BillingPatternX.translations.en.addBillingData.title | String | Title to add billing information. |
| BillingPatternX.translations.en.billingSummary.dni | String | Label for document in billing summary. |
| BillingPatternX.translations.en.billingSummary.update | String | Text to modify the information. |
| BillingPatternX.translations.en.billingView.cancel | String | Text to cancel the action. |
| BillingPatternX.translations.en.billingView.save | String | Text to save billing changes. |
| BillingPatternX.translations.en.billingView.title | String | Title for billing data entry view. |
| BillingPatternX.translations.en.billingWithSameData.title | String | Text to use the same billing data. |
| BillingPatternX.translations.en.inputs.companyBilling.label | String | Label for the legal entity. |
| BillingPatternX.translations.en.inputs.companyBilling.name.label | String | Label for company name. |
| BillingPatternX.translations.en.inputs.companyBilling.activity.label | String | Label for line of business or activity. |
| BillingPatternX.translations.en.inputs.companyBilling.address.label | String | Label for fiscal address. |
| BillingPatternX.translations.en.inputs.companyBilling.city.label | String | Label for city. |
| BillingPatternX.translations.es.inputs.companyBilling.email.label | String | Label for email. |
| BillingPatternX.translations.en.inputs.companyBilling.identityDocument.label | String | Label for tax registration. |
| BillingPatternX.translations.en.inputs.companyBilling.phone.label | String | Label for contact phone number. |
| BillingPatternX.translations.en.inputs.personBilling.label | String | Label for natural person. |
| BillingPatternX.translations.en.inputs.personBilling.firstName.label | String | Label for first name. |
| BillingPatternX.translations.en.inputs.personBilling.lastName.label | String | Label for family name. |
| BillingPatternX.translations.en.inputs.personBilling.city.label1 | String | Alternative label 1 for city. |
| BillingPatternX.translations.en.inputs.personBilling.stateName.label1 | String | Label for province. |
| BillingPatternX.translations.en.inputs.personBilling.zipCode.label | String | Label for zip code. |
| BillingPatternX.translations.en.inputs.errors.inputRequired | String | Message for required field. |
| BillingPatternX.translations.en.inputs.errors.invalidEmail | String | Message for invalid email. |
| BillingPatternX.translations.en.inputs.personBilling.identityDocument.label | String | Label for identity document. |
| BillingPatternX.translations.en.inputs.personBilling.identityDocument.invalidByCountry.AR | String | Error for country: Invalid ID (Argentina). |
| UserInfoPattern | Object | Object defining the input structure for user data. |
| UserInfoPattern.title | String | Custom title for the user data section. |
| UserInfoPattern.translations.inputs.email.label | String | Custom label for the email field. |
| UserInfoPattern.translations.en.inputs.firstName.label | String | Custom label for the name field. |
| UserInfoPattern.translations.en.inputs.lastName.label | String | Custom label for the last name field. |
| UserInfoPattern.translations.en.inputs.phone.label | String | Custom label for the phone field. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.CO | String | Label for Colombia: Cédula / Doc de identidad. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.CL | String | Label for Chile: RUT/DNI. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.EC | String | Label for Ecuador: Cédula / Doc de identidad. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.MX | String | Label for Mexico: RFC Number. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.BR | String | Label for Brazil: Registro Geral. |
| UserInfoPattern.translations.en.inputs.identityDocument.label.AR | String | Label for Argentina: DNI / Doc de Identidad. |
| UserInfoPattern.translations.es.inputs.identityDocument.label.UY | String | Label for Uruguay: Cédula / Doc de identidad. |
Updated about 6 hours ago