SDK Customizations - Default 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.

Use the following links to navigate to the desired component:

• Input
• Dropdown
• Checkbox
• Button
• Card
• Alert
• Modal

Input

The following table lists the classes available for customizing the input element while using the Default Design:

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

You can also customize the error warnings flagged by the interface. The following table lists the classes related to error warnings:

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

The following code block shows 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 shows the result of the customization:

Dropdown

The following table lists the classes available for customizing the dropdown element while using the Default Design:

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

You can also customize the error warnings flagged by the interface. The following table lists the classes related to error warnings:

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

The following code block shows 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 shows the result of the customization:

Checkbox

The following table lists the classes available for customizing the checkbox element while using the Default Design:

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

The following code block shows an example of how you can customize the checkbox element:

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

The following image shows the result of the customization:

Button

The following table lists the classes available for customizing the button element while using the Default Design:

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

The following code block shows an example of how you can customize the button element:

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

The following image shows the result of the customization:

Card

The following table lists the classes available for customizing the card element while using the Default Design:

The image below shows 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 shows the result of the customization:

Alert

The following table lists the classes available for customizing the alert element while using the Default Design:

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

The following code block shows 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 shows the result of the customization:

Modal

The modal element provides two options you can customize:

• Form Card Modal
• APM Modal

Modal customization requirements

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

Form Card Modal

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.

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 shows the result of the customization:

APM Modal

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

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 shows the result of the customization: