CustomStyle properties
Look up supported CustomStyle objects, property paths, value types, and their effects in DEUNA widgets.
On this page
Use this page as a field reference while building a CustomStyle object. Properties are grouped by the part of the widget they affect so you can review one implementation area at a time.
Theme and shared controls#
| Property | Type | Description |
|---|---|---|
theme | Object | Global color, typography, input, and button settings. |
theme.typography.primaryFontFamily | String | Primary font for widgets. |
theme.colors.primaryTextColor | String | Primary text color. |
theme.colors.backgroundSecondary | String | Secondary background color, for example in the OTP view. |
theme.colors.backgroundPrimary | String | Primary background color. |
theme.colors.buttonPrimaryFill | String | Primary button fill color. |
theme.colors.buttonPrimaryHover | String | Primary button color on hover. |
theme.colors.buttonPrimaryActive | String | Primary button color while active. |
theme.colors.inputBorder | String | Input border color in the default state. |
theme.colors.inputBorderError | String | Input border color in the error state. |
theme.colors.inputEnhancerFill | String | Input enhancer background color in the focus state. |
theme.colors.inputBorderPositive | String | Input border color in the success state. |
theme.buttons.borderRadius | String | Border radius for buttons. |
theme.inputs.borderRadius | String | Border radius for input fields. |
theme.inputs.inputMode | String | Input behavior: validated, clearable, or none. |
Header and contextual content#
| Property | Type | Description |
|---|---|---|
HeaderPattern | Object | Header component overrides. |
HeaderPattern.overrides | Object | Contains the header component overrides. |
HeaderPattern.overrides.Logo | Object | Logo component configuration. |
HeaderPattern.overrides.Logo.props.url | String | URL of the logo displayed in the header. |
HeaderPattern.overrides.Logo.props.style | Object | Inline dimensions and styles for the logo. |
HeaderPattern.overrides.Logo.props.position | String | Logo alignment: left or center. |
CardInfoPattern | Object | Card-information content. |
CardInfoPattern.title | String | Title of the card-information section. |
CardInfoPattern.subtitle.content | String | Subtitle content. |
UpperTagPattern | Object | Informational tag displayed below the widget header. |
UpperTagPattern.title | String | Upper-tag title. |
UpperTagPattern.description | String | Upper-tag description. |
UpperTagPattern.iconColor | String | Upper-tag icon color. |
UpperTagPattern.style | Object | Styles such as text color, box shadow, top margin, and background color. |
LowerTagPattern | Object | Informational tag displayed above the legal text and payment button. |
LowerTagPattern.title | String | Lower-tag title. |
LowerTagPattern.description | String | Lower-tag description. |
LowerTagPattern.iconColor | String | Lower-tag icon color. |
LowerTagPattern.style | Object | Styles such as text color, box shadow, and background color. |
Saved cards#
| Property | Type | Description |
|---|---|---|
UserCardPattern | Object | Translations and settings for saved-card management. |
UserCardPattern.translations.en | Object | English translations for saved-card 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 for viewing all saved cards. |
UserCardPattern.translations.en.paymentMethods.expiredCard | String | Text indicating an expired card. |
UserCardPattern.translations.en.paymentMethods.warningExpiredCard | String | Warning that asks the customer to select a valid payment method. |
UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodTitle | String | Card-deletion confirmation title. |
UserCardPattern.translations.en.paymentMethods.deleteMainText | String | Main text for the deletion action. |
UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodAccept | String | Confirmation button text. |
UserCardPattern.translations.en.paymentMethods.confirmDeleteMethodCancel | String | Cancellation button text. |
UserCardPattern.translations.en.paymentMethods.confirmDeleteMethod | String | Message explaining that deletion is irreversible. |
Payment method form#
| Property | Type | Description |
|---|---|---|
PaymentMethodsPattern | Object | Translations and settings for payment-method inputs. |
PaymentMethodsPattern.translations.inputs.card.cardNumber.label | String | Card-number field label. |
PaymentMethodsPattern.translations.en.inputs.card.cardNumber.placeholder | String | Card-number placeholder. |
PaymentMethodsPattern.translations.en.inputs.card.cardHolder.label | String | Cardholder-name field label. |
PaymentMethodsPattern.translations.en.inputs.card.cardHolder.placeholder | String | Cardholder-name placeholder. |
PaymentMethodsPattern.translations.en.inputs.card.expirationDate.label | String | Expiration-date field label. |
PaymentMethodsPattern.translations.en.inputs.card.expirationDate.placeholder | String | Expiration-date placeholder. |
PaymentMethodsPattern.translations.en.inputs.card.securityCode.label | String | Security-code field label. |
PaymentMethodsPattern.translations.en.inputs.card.installment.label | String | Installment field label. |
PaymentMethodsPattern.translations.en.inputs.card.installment.pay_by | String | Text introducing the installment count. |
PaymentMethodsPattern.translations.en.inputs.card.installment.first_pay | String | First-payment text. |
PaymentMethodsPattern.translations.es.inputs.card.installment.without_interest | String | No-interest text. |
PaymentMethodsPattern.translations.en.inputs.card.installment.without_installments | String | No-installments text. |
PaymentMethodsPattern.translations.en.inputs.card.installment.loading | String | Text displayed while installments are being validated. |
PaymentMethodsPattern.translations.en.inputs.paymentMethods.info.card.title | String | Custom card-form title. |
PaymentMethodsPattern.translations.en.inputs.paymentMethods.info.card.subtitle | String | Custom card-form subtitle. |
cardHolder | Object | Cardholder-name field configuration. |
cardHolder.label | String | Custom cardholder-name field label. |
installment | Object | Installment-field labels. |
installment.label | String | Custom installment field label. |
installment.withoutInstallments | String | Text displayed when installments are unavailable. |
Legal text and payment action#
| Property | Type | Description |
|---|---|---|
TermsConditionsPattern | Object | Terms and privacy settings. |
TermsConditionsPattern.showForGuest | Boolean | Show the legal text to guest users. |
TermsConditionsPattern.showForAuth | Boolean | Show the legal text to authenticated users. |
TermsConditionsPattern.legalMessage | String | Custom legal message. |
TermsConditionsPattern.connectorText | String | Connector between legal links. |
TermsConditionsPattern.hideCompanyDisclaimer | Boolean | Hide the company disclaimer. |
TermsConditionsPattern.termsAndConditionsUrl | String | Terms and Conditions URL. |
TermsConditionsPattern.privacyPolicyUrl | String | Privacy policy URL. |
PaymentButtonPattern | Object | Payment-button label, content, and style settings. |
PaymentButtonPattern.label | String | Payment-button text. |
PaymentButtonPattern.showOrderTotal | Boolean | Show the order total on the payment form. |
PaymentButtonPattern.styles | Object | Payment-button styles. |
PaymentButtonPattern.styles.padding | String | Payment-button padding. |
PaymentButtonPattern.styles.borderRadius | String | Payment-button border radius. |
PoweredByPattern | Object | Powered-by disclaimer configuration. |
PoweredByPattern.hide | Boolean | Hide the Powered by DEUNA mark. |
PoweredByPattern.hidetext | Boolean | Hide the “Powered by” text. |
PoweredByPattern.url | String | URL of the replacement logo. |
PoweredByPattern.imageStyle | Object | Replacement-logo dimensions and styles. |
Outcome pages#
| Property | Type | Description |
|---|---|---|
ThankYouView | Object | Thank-you view translations and settings. |
ThankYouView.translations.en.thankYouPage.status.succeeded | String | Message displayed after a successful payment. |
ThankYouView.translations.en.thankYouPage.status.pending | String | Message displayed while payment is pending. |
ThankYouView.translations.en.thankYouPage.status.denied | String | Message displayed after a denied payment. |
ThankYouView.overrides.Body.props.title | String | Thank-you body title. |
ThankYouView.overrides.Actions.props.hideDownloadAction | Boolean | Hide the receipt-download action. |
ThankYouView.overrides.Actions.props.hideBackToCommerceAction | Boolean | Hide the back-to-store action. |
ThankYouView.overrides.Actions.props.downloadText | String | Receipt-download button text. |
ThankYouView.overrides.Actions.props.backText | String | Back-to-store button text. |
VoucherPage | Object | Voucher-page configuration by alternative payment method. |
VoucherPage.apmName.overrides.Header.props.title | String | Voucher header title. |
VoucherPage.apmName.overrides.Header.props.subtitle | String | Voucher header subtitle. |
VoucherPage.apmName.overrides.Header.props.referenceTitle | String | Payment-reference label. |
VoucherPage.apmName.overrides.Header.props.payBefore | String | Payment deadline text. |
VoucherPage.apmName.overrides.Footer.props.downloadReference | String | Voucher-download button text. |
VoucherPage.apmName.overrides.Footer.props.showPoweredByDeuna | Boolean | Show the Powered by DEUNA label. |
Verification code view#
| Property | Type | Description |
|---|---|---|
OtpPage | Object | OTP-page component overrides. |
OtpPage.overrides | Object | Contains OTP component overrides. |
OtpPage.overrides.Header | Object | OTP header overrides. |
OtpPage.overrides.Header.props | Object | OTP header properties. |
OtpPage.overrides.Header.props.url | String | URL of the logo displayed on the OTP page. |
OtpPage.overrides.Headings | Object | OTP heading configuration. |
OtpPage.overrides.Headings.title | String | OTP page title. |
OtpPage.overrides.Headings.description | String | OTP page description. |
OtpPage.overrides.OtpChangeChannelButton | Object | OTP channel-change button configuration. |
OtpPage.overrides.OtpChangeChannelButton.description | Object | SMS and email channel descriptions. |
OtpPage.overrides.OtpChangeChannelButton.description.sms | String | SMS channel description. |
OtpPage.overrides.OtpChangeChannelButton.description.email | String | Email channel description. |
OtpPage.overrides.ContinueAsGuestButton | Object | Continue-as-guest button configuration. |
OtpPage.overrides.ContinueAsGuestButton.description | String | Continue-as-guest description. |
Billing information#
| Property | Type | Description |
|---|---|---|
BillingPatternX | Object | Billing-data input structure and translations. |
BillingPatternX.translations.en.title | String | Billing-section title. |
BillingPatternX.translations.en.addBillingData.error | String | Missing-billing-data error. |
BillingPatternX.translations.en.addBillingData.optionalTag | String | Optional-field tag. |
BillingPatternX.translations.en.addBillingData.title | String | Add-billing-information title. |
BillingPatternX.translations.en.billingSummary.dni | String | Document label in the billing summary. |
BillingPatternX.translations.en.billingSummary.update | String | Update-information text. |
BillingPatternX.translations.en.billingView.cancel | String | Cancel-action text. |
BillingPatternX.translations.en.billingView.save | String | Save-action text. |
BillingPatternX.translations.en.billingView.title | String | Billing-data entry title. |
BillingPatternX.translations.en.billingWithSameData.title | String | Use-the-same-billing-data text. |
BillingPatternX.translations.en.inputs.companyBilling.label | String | Legal-entity label. |
BillingPatternX.translations.en.inputs.companyBilling.name.label | String | Company-name label. |
BillingPatternX.translations.en.inputs.companyBilling.activity.label | String | Business-activity label. |
BillingPatternX.translations.en.inputs.companyBilling.address.label | String | Fiscal-address label. |
BillingPatternX.translations.en.inputs.companyBilling.city.label | String | City label. |
BillingPatternX.translations.es.inputs.companyBilling.email.label | String | Email label. |
BillingPatternX.translations.en.inputs.companyBilling.identityDocument.label | String | Tax-registration label. |
BillingPatternX.translations.en.inputs.companyBilling.phone.label | String | Contact-phone label. |
BillingPatternX.translations.en.inputs.personBilling.label | String | Natural-person label. |
BillingPatternX.translations.en.inputs.personBilling.firstName.label | String | First-name label. |
BillingPatternX.translations.en.inputs.personBilling.lastName.label | String | Family-name label. |
BillingPatternX.translations.en.inputs.personBilling.city.label1 | String | Alternative city label. |
BillingPatternX.translations.en.inputs.personBilling.stateName.label1 | String | Province label. |
BillingPatternX.translations.en.inputs.personBilling.zipCode.label | String | Postal-code label. |
BillingPatternX.translations.en.inputs.errors.inputRequired | String | Required-field error. |
BillingPatternX.translations.en.inputs.errors.invalidEmail | String | Invalid-email error. |
BillingPatternX.translations.en.inputs.personBilling.identityDocument.label.AR | String | Argentina identity-document label. |
BillingPatternX.translations.en.inputs.personBilling.identityDocument.invalidByCountry.AR | String | Argentina invalid-identity-document error. |
User information#
| Property | Type | Description |
|---|---|---|
UserInfoPattern | Object | Customer-information input structure and translations. |
UserInfoPattern.title | String | Customer-information section title. |
UserInfoPattern.translations.inputs.email.label | String | Email-field label. |
UserInfoPattern.translations.en.inputs.firstName.label | String | First-name field label. |
UserInfoPattern.translations.en.inputs.lastName.label | String | Last-name field label. |
UserInfoPattern.translations.en.inputs.phone.label | String | Phone-field label. |
UserInfoPattern.translations.en.inputs.identityDocument.label.CO | String | Colombia identity-document label. |
UserInfoPattern.translations.en.inputs.identityDocument.label.CL | String | Chile identity-document label. |
UserInfoPattern.translations.en.inputs.identityDocument.label.EC | String | Ecuador identity-document label. |
UserInfoPattern.translations.en.inputs.identityDocument.label.MX | String | Mexico identity-document label. |
UserInfoPattern.translations.en.inputs.identityDocument.label.BR | String | Brazil identity-document label. |
UserInfoPattern.translations.en.inputs.identityDocument.label.AR | String | Argentina identity-document label. |
UserInfoPattern.translations.es.inputs.identityDocument.label.UY | String | Uruguay identity-document label. |