SDK Customizations - Deprecated Design

❗️

Deprecation Warning

This design system is deprecated and will be removed in the future. Please use the Default Design for all new customizations.

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

Use the following links to navigate to the desired component:

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

Input

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

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

Dropdown

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

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 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 shows 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.

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 shows 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.

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 shows 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.

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.

styles: `
  .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 Deprecated 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.

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

The following image shows the result of the customization:

APM Modal

The classes available for customizing the APM modal element while using the Deprecated 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.

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