SDK Customizations

The Yuno Web SDK allows you to customize various elements, making it easy to align the design of payment forms and the checkout flow with your brand guidelines and UX/UI. Although the structure of each element remains uniform, you can adjust colors, text, buttons, and much more.

General guidelines

Styles within an iframe: Define the new styles when initializing the SDK. Each form input that receives card information is rendered within an iframe when using the Form Card Modal.
Styles outside an iframe: Inject the styles directly into the page.
Check element structure: Use the browser's developer mode to inspect where the element is rendered.

Default and Deprecated Design

Use the Default Design information when customizing the Yuno Web SDK. This approach is recommended for all new customizations and ensures you use the most up-to-date styles and practices.

The Deprecated Design is available for Yuno clients needing access to CSS class information. However, this option will be removed in the future.

Customizable elements

The following sections detail the elements that make up the Card and APM forms, along with the respective classes for each one, which can be modified to achieve a personalized style. Use the tab selector to choose between the Default and Deprecated content:

Default Deprecated

Use the following links to navigate to the desired component:

Input
Dropdown
Checkbox
Button
Card
Alert
Modal

Form Card Modal
APM Modal

Input

The classes available for customizing the input element while using the Default Design are listed in the following table.

CSS Class	Description
`.Yuno-fieldset__box`	General container for input fields.
`.Yuno-input__content`	Content area for input elements.
`.Yuno-input__label`	Label for input elements.
`.Yuno-input__base`	Base styling for input elements.

The images below present how each class will affect the input element.

You can also customize the error warnings flagged by the interface. The classes related to error warnings are presented in the table below.

CSS Class	Description
`.Yuno-input__label .Yuno-input__label--error`	Label with error styling for input elements.
`.Yuno-error-text-field__content`	Container for error message content.
`.Yuno-error-text-field__error-icon`	Icon for error messages.
`.Yuno-error-text-field__message`	Text for error messages.

The images below present how each class will affect the input element.

The code block below presents an example of how you can customize the input element. To use the following code, you need to add it to card when starting the SDK with yuno.startCheckout.


  styles: `
  #root {
    .Yuno-fieldset__box {
      .Yuno-input__content{
        background: lavender;
        border-radius: 8px;
        .Yuno-input__base {
          background: lavender;
        }
      }
    }
    .Yuno-pan-secure-field .Yuno-fieldset__box.Yuno-fieldset__box--focus {
      border-color: darkviolet !important;
    }
  }
  `,

The following image presents the result of the customization.

The classes available for customizing the dropdown element while using the Default Design are listed in the following table.

CSS Class	Description
`.Yuno-fieldset__box`	General container for input fields.
`.Yuno-select__content`	Content area for select elements.
`.Yuno-select__label`	Label for select elements.
`.Yuno-select__button-combo-box`	Button for combo box elements.
`.Yuno-select__input`	Input area for select elements.
`.Yuno-select__arrow`	Arrow icon for select dropdown.
`.Yuno-select__list-box`	Container for dropdown list items.
`.Yuno-select__list-item`	Individual item in dropdown list.

The images below present how each class will affect the dropdown element.

You can also customize the error warnings flagged by the interface. The classes related to error warnings are presented in the table below.

CSS Class	Description
`.Yuno-fieldset__box .Yuno-fieldset__box--error`	Container with error styling.
`.Yuno-select__label .Yuno-select__label--error`	Label with error styling.
`.Yuno-error-text-field__content`	Container for error message content.
`.Yuno-error-text-field__error-icon`	Icon for error messages.
`.Yuno-error-text-field__message`	Text for error messages.

The images below present how each class will affect the dropdown element.

The code block below presents an example of how you can customize the dropdown element.


.Yuno-fieldset__box {
  .Yuno-select__content {
    background: lavender;
    border-radius: 8px;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    .Yuno-select__input {
      background: lavender;
    }
    .Yuno-select__list-box {
      background: lavender;
    }
  }
}

The following image presents the result of the customization.

Checkbox

The classes available for customizing the checkbox element while using the Default Design are listed in the following table.

CSS Class	Description
`.Yuno-checkbox__content`	Container for checkbox elements.
`.Yuno-checkbox__icon`	Icon for checkbox elements.
`.Yuno-checkbox__text`	Text for checkbox elements.

The image below present how each class will affect the checkbox element.

The code block below presents an example of how you can customize the checkbox element.


.Yuno-checkbox__content {
  .Yuno-checkbox__text {
    color: white;
  }
}

The following image presents the result of the customization.

Button

The classes available for customizing the button element while using the Default Design are listed in the following table.

CSS Class	Description
`.Yuno-button .Yuno-modal-bottom__button`	Class to configure the pay button.

The image below present how each class will affect the button element.

The code block below presents an example of how you can customize the button element.


.Yuno-button.Yuno-modal-bottom__button {
  background: cornflowerblue;  
}

The following image presents the result of the customization.

Card

The classes available for customizing the card element while using the Default Design are listed in the following table.

CSS Class	Description
`.Yuno-front-side-card__content`	Class to configure the card element content.

The image below present how each class will affect the card element.

The code block below presents an example of how you can customize the card element. To use the following code, you need to add it to card when starting the SDK with yuno.startCheckout.


  styles: `
  #root {
    .Yuno-front-side-card__content {
      background: darkslateblue;
    }
  }
`,

The following image presents the result of the customization.

Alert

The classes available for customizing the alert element while using the Default Design are listed in the following table.

CSS Class	Description
`.Yuno-Alert`	Configure the alert container.
`.Yuno-Alert__icon`	Enables you to change the alert icon.
`.Yuno-Alert__message`	Text for the alert element.

The image below present how each class will affect the alert element.

The code block below presents an example of how you can customize the alert element.


.yuno-modal-user-form {
  .Yuno-Alert {
    background-color: black;
    .Yuno-Alert__message {
      color: white;
    }
  }
}

The following image presents the result of the customization.

The modal element provides two option you can customize:

Form Card Modal
APM Modal

Modal contomization requirements

To customize the modal component style, you must define the custom style directly within your web page.

Within the Form Card Modal, three iframes exist, where the card number input, expiration input, and CVV input are rendered separated. The name of the card owner is a standard input.

The classes available for customizing the form card modal element while using the Default Design are listed in the following table.

CSS Class	Description
`Yuno-modal__modal-content`	Container for the modal content.
`Yuno-modal-header__content`	Header section of the modal.
`Yuno-modal-header__icon`	Icon in the modal header.
`Yuno-modal-header__title`	Title of the modal.
`Yuno-modal-body__content`	Body content of the modal.
`Yuno-modal-bottom__content`	Bottom section of the modal.

The image below presents how each class will affect the form card modal element.

The code block below presents an example of how you can customize the form card modal element.


.Yuno-modal__modal-content {
  background: rgb(40, 42, 48) !important;

  & .Yuno-modal-header__title {
    color: white;
  }
  & .Yuno-modal-bottom__content .Yuno-yuno-brand__text {
    color: white;
  }
  & .Yuno-modal-bottom__content .Yuno-button {
    background: #35363e;
  }
  & .Yuno-modal-body__content .Yuno-checkbox__content .Yuno-checkbox__text {
    color: white !important;
  }
}

The following image presents the result of the customization.

The classes available for customizing the APM modal element while using the Default Design are listed in the following table.

CSS Class	Description
`.Yuno-modal__modal-content`	Container for the modal content.
`.Yuno-modal-header__content`	Header section of the modal.
`.Yuno-modal-header__icon`	Icon in the modal header.
`.Yuno-modal-header__title`	Title of the modal.
`.Yuno-modal-header__close-button`	Close button for the modal.
`.yuno-user-form__heading .yuno-heading`	Heading for the user form.
`.yuno-user-form__form`	Form container within the user form.
`.Yuno-modal-body__content`	Body content of the modal.
`.Yuno-modal-bottom__content`	Bottom section of the modal.
`.Yuno-button .Yuno-modal-bottom__button`	Button within the bottom section of the modal.
`.Yuno-yuno-brand__content`	Content area for Yuno brand.
`.Yuno-yuno-brand__icon`	Icon for Yuno brand.
`Yuno-yuno-brand__text`	Text for Yuno brand.

The image below presents how each class will affect the APM modal element.

The code block below presents an example of how you can customize the APM modal element.


.Yuno-modal__modal-content {
  background: rgb(40, 42, 48) !important;
}

.Yuno-modal-header__content {
  .Yuno-modal-header__title {
    color: white;
  }
}

.Yuno-modal-body__content {
  .yuno-user-form__heading.yuno-heading {
    color: white;
  }
  .Yuno-Alert {
    background: #35363e;
    color: white;

    .Yuno-Alert__message {
      color: white;
    }
  }
  .yuno-terms-conditions {
    color: white;
  }
}

.Yuno-modal-bottom__content {
  .Yuno-button.Yuno-modal-bottom__button {
    background: darkslateblue;
  }
}

The following image presents the result of the customization.

Use the following links to navigate to the desired component:

Input
Dropdown
Button
Card
Alert
Modal

Form Card Modal
APM Modal

Input

The classes available for customizing the input element while using the Deprecated Design are listed in the following table.

CSS Class	Description
`.Yuno-text-field__content`	General container for text fields.
`.Yuno-text-field__label`	Label for text fields.
`.Yuno-text-field__input`	Input area for text fields.
`.Yuno-text-field__end-adornment`	End adornment for text fields.

The images below present how each class will affect the input element.

You can also customize the error warnings flagged by the interface. The classes related to error warnings are presented in the table below.

CSS Class	Description
`.Yuno-error-text-field__content`	Container for error message content.
`.Yuno-text-field__label`	Label for text fields.
`.Yuno-text-field__content .error`	Container for the input in case of an error.
`.Yuno-error-text-field__message`	Text for error messages.

The images below present how each class will affect the input element.

The code block below presents an example of how you can customize the input element. To use the following code, you need to add it to card when starting the SDK with yuno.startCheckout.


styles: `
  #root {
    // content
    .Yuno-text-field__content {
      // label
      .Yuno-text-field__label {
        color: white;
      }
      // input
      .Yuno-text-field__input {
        background: lavender;
        border-color: #35363E;
      }
      // input focus
      .Yuno-text-field__input:focus {
        border: '2px solid #35363E';
      }
    }
  }
`,

The following image presents the result of the customization.

The classes available for customizing the dropdown element while using the Deprecated Design are listed in the following table.

CSS Class	Description
`.Yuno-select-field__state-select-wrapper`	Wrapper for state select field.
`.Yuno-select__button-combo-box`	Button for combo box elements.
`.Yuno-select-field__content`	Content area for select field.
`.Yuno-select-field__label`	Label for select field.
`.Yuno-select-field__select-button`	Select button for the field.
`.Yuno-select-field__list`	List container for select options.
`.Yuno-option__option`	Individual option in select list.

The images below present how each class will affect the dropdown element.

You can also customize the error warnings flagged by the interface. The classes related to error warnings are presented in the table below.

CSS Class	Description
`.Yuno-select-field__state-select-wrapper .error`	Wrapper for state select field with error styling.
`.Yuno-error-text-field__content`	Container for error message content.
`.Yuno-select-field__label`	Label for select field.
`.Yuno-error-text-field__message`	Text for error messages.

The images below present how each class will affect the dropdown element.

The code block below presents an example of how you can customize the dropdown element. To use the following code, you need to add it to card when starting the SDK with yuno.startCheckout.


styles: `
  #root {
    //dropdown
    .Yuno-select-field__content {
      .Yuno-select-field__label {
        color: white;
      }
      .Yuno-select-field__select-button{
        background: lavender;
        border-color: #35363E;
      }
      .Yuno-select-field__list{
        background: lavender;
        border-color: #35363E;
      }
    }
  }
`,

The following image presents the result of the customization.

Button

The classes available for customizing the button element while using the Deprecated Design are listed in the following table.

CSS Class	Description
`.Yuno-card-form__submit`	Class to configure the button container.
`.Yuno-button`	Class to configure the pay button.

The image below presents how each class will affect the button element.

The code block below presents an example of how you can customize the button element. To use the following code, you need to add it to card when starting the SDK with yuno.startCheckout.


styles: `
  #root {
    .Yuno-button {
      background: rgb(40, 42, 48);
    }
  }
`,

The following image presents the result of the customization.

Card

The classes available for customizing the card element while using the Deprecated Design are listed in the following table.

CSS Class	Description
`.Yuno-front-side-card__content`	Class to configure the card element content.

The image below presents how each class will affect the card element.

The code block below presents an example of how you can customize the card element. To use the following code, you need to add it to card when starting the SDK with yuno.startCheckout.


styles: `
  #root {
    .Yuno-front-side-card__content {
      background: darkslateblue;
    }
  }
`,

The following image presents the result of the customization.

Alert

The classes available for customizing the alert element while using the Deprecated Design are listed in the following table.

CSS Class	Description
`.Yuno-Alert`	Configure the alert container.
`.Yuno-Alert__icon`	Enables you to change the alert icon.
`.Yuno-Alert__message`	Text for the alert element.

The image below presents how each class will affect the alert element.

The code block below presents an example of how you can customize the alert element. To use the following code, you need to add it to card when starting the SDK with yuno.startCheckout.


.yuno-modal-user-form {
  .Yuno-Alert {
    background-color: black;
    .Yuno-Alert__message {
      color: white;
    }
  }
}

The following image presents the result of the customization.

The modal element provides two option you can customize:

Form Card Modal
APM Modal

Modal contomization requirements

To customize the modal component style, you must define the custom style directly within your web page.

Within the Form Card Modal, three iframes exist, where the card number input, expiration input, and CVV input are rendered separated. The name of the card owner is a standard input.

The classes available for customizing the form card modal element while using the Deprecated Design are listed in the following table.

CSS Class	Description
`.yuno-modal__content`	Design the modal content.
`.yuno-modal__header`	Define the modal header style.
`.Yuno-card-container`	Configure the modal container.

The image below presents how each class will affect the form card modal element.

The code block below presents an example of how you can customize the form card modal element.


.yuno-modal__content {
  background: lavender !important;
}

The following image presents the result of the customization.

The classes available for customizing the APM modal element while using the Deprecated Design are listed in the following table.

CSS Class	Description
`.yuno-modal__content`	Container for modal content.
`.yuno-modal__header`	Header section of the modal.
`.yuno-modal__title`	Title of the modal.
`.yuno-modal__close-btn`	Close button for the modal.
`.yuno-modal-user-form`	User form within the modal.
`.yuno-user-form__heading .yuno-heading`	Heading for the user form.
`.yuno-user-form__form`	Form container within the user form.

The image below presents how each class will affect the APM modal element.

The code block below presents an example of how you can customize the APM modal element.


.yuno-modal__content {
  background: rgb(40, 42, 48) !important;
}

.Yuno-select-field__content {
  .Yuno-select-field__label {
    color: white;
  }
}

.yuno-modal__content {
  .yuno-modal__header {
    .yuno-modal__title {
      color: white;
    }
  }
}

.yuno-modal-user-form {
  .yuno-user-form__heading.yuno-heading {
    color: white;
  }
}

.Yuno-text-field__content {
  .Yuno-text-field__label {
    color: white;
  }
}

.yuno-grid-phone label {
  color: white;
}

.yuno-user-form__form .yuno-terms-conditions {
  color: white;
}

The following image presents the result of the customization.

General guidelines

Default and Deprecated Design

Customizable elements

Input

Dropdown

Checkbox

Button

Card

Alert

Modal

Modal contomization requirements

Form Card Modal

APM Modal

Input

Dropdown

Button

Card

Alert

Modal

Modal contomization requirements

Form Card Modal

APM Modal