Overview

By setting the styles of the Nuvei Field HTML elements you can duplicate the look, feel, and design of your site in the cardholder information text boxes: number, expiration date, and CVV/CVC.

Styling is set up in two steps (see examples below):

1. CSS
   • Use our CSS class names to override them and thus override the base style of the text box.
   • Specifically for 3D-Secure, you can also override and stylize the 3D-Secure challenge/redirection IFrame. For example, having it is a modal, lightbox, and so on.
2. JavaScript Style Object for State Stylizing
   To control the UI of certain text states (such as empty, invalid, and valid), you need to set an object containing those styles and send it as input for the Nuvei Fields “create” function.

Example CSS

Note: See the explanation of each class in the example below:

/*********** base Nuvei Fields styles ************/
.SfcFields {
    background-color: #feff8c;
    height: 42px;
    padding: 10px 12px;
    border-radius: 4px;
    border: 1px solid transparent;
    box-shadow: 0 1px 3px 0 #e6ebf1;
    -webkit-transition: box-shadow 150ms ease;
    transition: box-shadow 150ms ease;
}

/************* text boxes styles ****************/
/* empty box without focus*/
.sfc-empty {
    background-color: #fecd58 !important;
}

/* empty box with focus */
.sfc-empty.sfc-focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
    background-color: #fe8423 !important;
}

/* box with focus when typing */
.sfc-focus {
    box-shadow: 0 1px 3px 0 #cfd7df;
    background-color: #feb1c7 !important;
}

/* box when typing completed without validation error*/
.sfc-complete {
    background-color: #34fa29 !important;
}
/* box when a validation error */
.sfc-invalid {
    border-color: #fa755a;
}

/*********** base Nuvei 3D-Secure mode styles ************/
.SfcFields--webkit-autofill {
    background-color: #fefde5 !important;
}
.Modal.fade .sfcModal-dialog {
              transform: translate(0, -25%);
              transition: all .3s ease-out;
              opacity: 0;
}
.Modal.is-in .sfcModal-dialog {
              transform: translate(0, 0);
              opacity: 1;
}
.sfcModal-header {
              height: 1.5rem;
}
.sfcModal-dialog {
              margin: 55px auto;
              max-width: 492px;
              position: relative;
              width: auto;
}
.sfcModal-content {
              position: relative;
              background-color: #fff;
              background-clip: padding-box;
              outline: 0;
              border: 1px solid #dfdfdf;
}
.sfcModal-close {
              font-size: .9rem;
              color: #2c2a2a;
              position: absolute;
              top: 0.4rem;
              right: 0.5rem;
              border: 0;
              padding: 0;
              cursor: pointer;
}
.sfcIcon--close:before {
              content: "2716";
}
[class*=" sfcIcon--"]:before, [class^=sfcIcon--]:before {
              speak: none;
              font-style: normal;
              font-weight: 400;
              font-variant: normal;
              text-transform: none;
              line-height: 1;
              -webkit-font-smoothing: antialiased;
              -moz-osx-font-smoothing: grayscale;
}
.sfcModal-body {
              -webkit-overflow-scrolling: touch;
}

Example JavaScript

Note: See the explanation of each state in the example below:

var style = {
    base: { // default idle state
      fontSize: '16pt',
      fontFamily: 'Roboto, sans-serif',
      color: "#045d47",
      fontSmoothing: 'antialiased',
      '::placeholder': {
        color: '#ccb654'
      }
    },
    invalid: { //when invalid input detected o the field
      color: '#e5312b',
      ':focus': {
        color: '#303238'
      }
    },
    empty: { //empty field
      color: '#BADA55',
      '::placeholder': {
        color: '#cc3ac2'
      }
    },
    valid: { //when the input is valid
      color: '#48ef39'
    }
  };

//setting the styles when creating the Nuvei Fields
  var scard = ScFields.create('card', {
    style: style
  });