• Documentation
  • API Reference
  • Documentation
  • API Reference
Expand All Collapse All
  • Payment Overview
    • Introduction
  • Accept Payment
    • Checkout Page
      • Quick Start for Checkout
      • Input Parameters
      • Output Parameters
    • Web SDK
      • Quick Start for Web SDK
      • Nuvei Fields
      • Nuvei Fields Stylizing
      • APMs for Web SDK
      • Web SDK Additional Functions
      • Web SDK FAQs
    • Checkout SDK
      • Checkout SDK Payment Form - UI Styling
    • Server-to-Server
    • Plugins
    • Mobile SDKs
      • Android Mobile SDK
      • iOS Mobile SDK
    • Payment Scenarios
    • Flow Diagrams
  • Features
    • API Authentication and the Session Token
    • PCI and Tokenization
    • 3D-Secure
    • Card-on-File
    • Merchant-Initiated Transactions (MIT)
    • Alternative Payment Methods (APMs)
    • Refund
    • Void
    • Auth, PreAuth, Sale and Settle
    • Direct Merchant Notifications (DMNs)
    • Subscription (Rebilling)
    • Zero-Authorization
    • Partial Approval
    • Marketplaces
  • Guides
    • Plugins
      • Magento 1
      • Magento 2
      • WooCommerce
      • PrestaShop
      • Open Cart
      • Shopify (via AsiaBill)
      • Mirakl
    • Choosing an Integration Method
    • Testing Cards, APIs and APMs
      • Testing Cards
      • Testing APMs
      • Testing APIs with Postman
      • Web SDK Scenarios
    • Response Handling and Errors
      • Error Handling
      • Error Codes
    • Country and Currency Codes
    • Direct Merchant Notifications (DMNs)
    • 3D-Secure
      • 3D-Secure Explained
      • 3D-Secure How-To Guide
      • 3D-Secure MPI-Only for Web SDK
      • 3D-Secure MPI-Only for Server-to-Server
      • 3D-Secure Fingerprinting
      • 3D-Secure Authentication Challenge
      • External MPI (Third-Party 3D-Secure)
      • 3D-Secure Response Values
    • Alternative Payments Guide
      • APM Input Fields
      • APM subMethod Classes
      • APM Supported Countries and Currencies
    • Apple Pay
      • Register in the Apple System
        • Create an Apple ID
        • Enroll in the Apple Developer Program
          • Submit an Enrollment Request
          • Complete the Enrollment Process
          • Activate your Apple Developer Program Account
        • Register a Merchant ID in the Apple System
          • Create a Merchant ID
          • Create a Payment Processing Certificate
          • Create a Merchant Identity Certificate
          • Register and Verify your Domain
      • Apple Pay Integration
        • Nuvei Apple Pay Integration Solutions
          • Nuvei Checkout Page IFrame Solution – Main Solution for Cashier
          • Static Apple Pay Button Solution on Merchant Site
          • Dynamic Apple Pay Button Solution on Merchant Site
        • Apple Pay Integration Testing
    • Payment Facilitators (PayFac)
    • Cashier
      • Cashier Events Guide
    • Withdrawal Guide
    • Risk Guide
    • eKYC Guide
    • Server SDKs
      • Java SDK
      • .NET SDK
      • PHP SDK
      • Node.JS SDK
    • Fast Track Onboarding Developer Guide
    • Currency Conversion Services
      • Multiple Currency Pricing (MCP)
        • Accepting Payment for a Sale using MCP Values
      • Dynamic Currency Conversion (DCC)
        • DCC in Cashier or Checkout Page
        • DCC in REST API Workflows
        • DCC in Web SDK Workflows
  • Additional Links
    • FAQs
    • API Reference
    • Release Notes

Nuvei Fields Stylizing

Contents
  • Overview
  • Example CSS
  • Example JavaScript

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.

Refer to the Web SDK Scenarios section which contains live Web SDK examples, which you can view and modify to test your code, using JSFiddle.

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
  });
2021 Nuvei. All rights reserved.