Documentación

Customizing styles

Suggest Edits

Customize your DEUNA solutions using CustomStyle.

📘

Customization is available for all widgets.

DEUNA allows you to visually adapt the checkout to align with your brand's visual identity. This guide describes how to configure the JSON file that controls widget styles, including colors, typography, borders, text, and specific views.

How customization works

  1. Define elements to customize: identify the checkout views or components you want to adjust (e.g., buttons, fields, order summary, error messages, etc.).
  2. Configure the JSON file: include the style values you want to apply. You can modify colors, typography, border radius, padding, among others.
  3. Apply the configuration:
    • For base widget styles, contact your TPM for implementation.
    • For order-specific styles, you can include the style file within each order's tokenization.

📘

Although the examples in the documentation are organized by section, the final configuration should be sent as a consolidated JSON file.

General scope

You can customize the following aspects:

  • Checkout colors
  • Typography
  • Text, height, and radius of inputs and buttons
  • Input border colors by state
  • Enable text reset in inputs
  • Enable iconographic validator in inputs
  • Logo location and size
  • Terms and Conditions
  • Visual elements in specific views (e.g., OTP, cards, thank you page, billing data, etc.)

Global styles

Colors

You can define colors for:

  • Background (primary/secondary)
  • Main text
  • Payment button (color, hover, text, active)

📘

Colors must be defined in HEX format.

{
  "theme": {
    "colors": {
      "primaryTextColor": "#323237",
      "backgroundSecondary": "#FFFFFF",
      "backgroundPrimary": "#FFFFFF",
      "buttonPrimaryFill": "#17171A",
      "buttonPrimaryHover": "#69696E",
      "buttonPrimaryText": "#FFFFFF",
      "buttonPrimaryActive": "#5F529E"
    }
  }
}

Typography

You can choose from the following compatible typefaces:

  • Roboto
  • Montserrat
  • Open Sans
  • Lato
  • Nunito
  • Heebo
  • Raleway
  • Quicksand
  • Ubuntu
  • Mukta
  • Hind
  • San Francisco

📘

If you want to use your own typeface, contact your TPM.

{
  "theme": {
    "typography": {
      "primaryFontFamily": "Lato"
    }
  }
}

Input and button radius

You can define the border-radius in pixels for inputs and buttons:

{
  "theme": {
    "inputs": {
      "borderRadius": "50px"
    },
    "buttons": {
      "borderRadius": "20px"
    }
  }
}

Input and button height

You can define a custom height for inputs and buttons. By default, the height is 40px.

For a better user experience, it's recommended to use a minimum height of 30px and maximum of 60px.

{
  "theme": {
    "buttons": {
      "borderRadius": "20px",
      "heigh": "50px"
    },
    "inputs": {
      "borderRadius": "90px",
      "height": "50px"
    }
  }
}

Input border colors by state

You can select a specific border color for inputs depending on their state:

StateDefinitionDefault color
DisabledThe input is not enabled for the user, therefore they cannot write in the input.# B4B4B7
EnabledThe input is enabled, but has not been focused yet or the user has not written anything.# D9D9DB
FocusThe user is typing or has focus on the input.# 404046
FilledThe input has been completed with valid data.# 8E8E92
ErrorThe input contains validation errors or is incomplete when it's required.# E11900

📘

For a clear user experience, use a red color for the Error state.

 theme: {
    colors: {
    inputBorder: '#D9D9DB', // Default state (enabled)
    inputBorderError: '#F1998E', // Error state
    inputEnhancerFill: '#1AE1D7', // Active state (focus)
    inputBorderPositive: '#66D19E', // Success state
    },
  },

Enable text reset in inputs

You can place a reset button in all text fields. By default, this setting is off. It acts as a shortcut to clear all text from the field without holding backspace.

 theme: {
    inputs: {
      inputMode: 'clearable' // 'validated' | 'clearable' | 'none'
    },
  },

Enable iconographic validator in text inputs

You can enable an iconographic validator in text inputs. By default, this setting is off. It consists of an icon inside the input, aligned to the right, depending on the state:

  • Filled: Check ✅
  • Error: Exclamation ❗️

📘

You cannot enable text reset and iconographic validator at the same time.

 theme: {
    inputs: {
      inputMode: 'validated' // 'validated' | 'clearable' | 'none'
    },
  }

Merchant logo

Refers to available configurations for the logo

  • Change logo
  • Change logo location: center or left
  • Change logo size

Default: 100px logo located on the left of the widget

    "HeaderPattern": {
            "overrides": {
                "Logo": {
                    "props": {
                        "url": "https://upload.wikimedia.org/wikipedia/commons/f/f8/Logo_del_Gobierno_de_M%C3%A9xico_%282018%29.png",
                        "position": "center",
                        "style": {
	                        "min-width": "150px"
                        }
                    }
                }
            }
        }

Customizations by section

OTP view (verification code)

This view appears when it's required for the user to validate their identity through a code sent by email. It's part of the authentication flow. The OTP view is optional.

You can customize:

  • Header
  • Channel change buttons (SMS/email)
  • "Continue as guest" option
{
  "OtpPage": {
    "overrides": {
      "Headings": {
        "props": {
          "title": "Enter the verification code",
          "description": "To view your saved cards, enter the code sent to"
        }
      },
      "OtpChangeChannelButton": {
        "props": {
          "description": {
            "sms": "Send code by email",
            "email": "Send code by SMS"
          }
        }
      },
      "ContinueAsGuestButton": {
        "props": {
          "description": "Continue without entering the code"
        }
      }
    }
  }
}

Card payment view

Corresponds to the main form where the user enters their card details to complete the purchase.

You can customize:

  • Section titles and subtitles
  • Field labels (e.g., card number, name, installments)
  • Payment button text
  • UpperTag / LowerTag (informational notices) [not available in Payment Link]
  • Legal messages and links to terms and conditions
{
  "PaymentMethodsPattern": {
    "translations": {
      "es": {
        "inputs": {
          "card": {
            "securityCode": {
              "label": "CVV",
              
            },
            "installment": {
              "label": "Installments",
              "pay_by": "Pay in",
              "first_pay": "First payment",
              "without_interest": "Without interest ",
              "without_installments": "Without installments",
              "loading": "Validating installments..."
            },
            "cardHolder": {
              "label": "Name as it appears on card",
              "placeholder": "e.g. Juan Zapata"
            },
            "cardNumber": {
              "label": "Card number",
              "placeholder": "0000 0000 0000 0000"
            },
            "expirationDate": {
              "label": "Expiration date",
              "placeholder": "MM / YY"
            },
            
          },
          "paymentMethods": {
            "info": {
              "card": {
                "title": "Custom title",
                "subtitle": "Custom subtitle"
              }
            }
          }
        }
      }
    }
  },
  "TermsConditionsPattern": {
    "showForGuest": true,
    "showForAuth": false,
    "legalMessage": "By continuing you accept the",
    "connectorText": "and",
    "hideCompanyDisclaimer": false,
    "termsAndConditionsUrl": "https://yoursite.com/terms-and-conditions",
    "privacyPolicyUrl": "https://yoursite.com/privacy-policy"
  },
  "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"
    }
  }
}

Saved cards view (authenticated users)

Shown when an authenticated user has previously stored cards and can choose between them to complete their purchase.

You can customize:

  • Button texts
  • Expiration messages or warnings
  • Deletion confirmation
{
  "UserCardPattern": {
    "translations": {
      "es": {
        "addNewCard": {
          "info": "Add a card"
        },
        "moreOptions": {
          "payWith": "Selected card"
        },
        "paymentMethods": {
          "expiredCard": "Expired card",
          "confirmDeleteMethodTitle": "Delete this card",
          "confirmDeleteMethod": "Please note that once deleted, you won't be able to restore it."
        }
      }
    }
  }
}

Thank you page

Purchase confirmation screen that appears at the end of the process if not redirected to another site.

You can customize:

  • Thank you title
  • Order statuses (succeeded, pending, denied)
  • Button text: "Save receipt", "Back to store"
"ThankYouView": {
  "translations": {
    "es": {
      "thankYouPage": {
        "status": {
          "succeeded": "Thank you for your purchase!",
          "pending": "Processing...",
          "denied": "Payment declined"
        }
      }
    }
  },
  "overrides": {
    "Body": {
      "props": {
        "title": "Your order summary"
      }
    },
    "Actions": {
      "props": {
        "hideDownloadAction": false,
        "hideBackToCommerceAction": false,
        "downloadText": "Save receipt",
        "backText": "Back to store"
      }
    }
  }
}

Example

image.png

Voucher Page

Instruction screen for payments with alternative methods (for example, cash payments or transfers).

You can customize:

  • Title, subtitle, description
  • Reference messages and payment deadline
  • Button text
  • Show/hide DEUNA branding

OXXO Example:


"VoucherPage": {
  "OXXO_PAY": {
    "overrides": {
      "Header": {
        "props": {
          "title": "OXXO Payment",
          "subtitle": "Present this code in store",
          "referenceTitle": "Payment reference",
          "payBefore": "Pay before 06/20"
        }
      },
      "Footer": {
        "props": {
          "downloadReference": "Download Voucher",
          "showPoweredByDeuna": false}
      }
    }
  }
}

User information view

Initial form where basic buyer data is requested, such as name, email, phone, and identity document. This view is optional and only available for payment link and full checkout.

Allows customizing fields related to:

  • Section title
  • Labels for all fields
 {
  "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"
            }
          }
        }
      }
    }
  }
}

Billing data view

Form to capture billing data, if required by the merchant or regulation. It's an optional view available in payment link, payment widget, and full checkout.

Allows customizing:

  • Section title
  • Labels for all fields (you can see the details here)

📘

See the properties described in this JSON file:

 {
  "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"
            }
          }
        }
      }
    }
  }
}

Updated 3 days ago