• Documentation
  • API Reference
  • Documentation
  • API Reference
Expand All Collapse All
  • Payment Overview
    • Introduction
    • Choosing an Integration Method
  • Accept Payment
    • Payment Page
      • Quick Start
      • Input Parameters
      • Output Parameters
    • Web SDK
      • Quick Start
      • Nuvei Fields
        • Styling
      • Additional Functions
      • APM Payments
      • Tokenization-Only Flow
      • Scenarios
      • Using ReactJS
        • Full Samples
        • Sandbox Examples
      • FAQs
    • Checkout
      • Quick Start
        • UI Customization
        • Payment Customization
        • Advanced Controls
        • Checkout Examples
      • Server-to-Server
      • Payment Scenarios
      • Mobile SDKs (Beta Release)
        • Android Mobile SDK (Beta Release)
        • iOS Mobile SDK (Beta Release)
      • Flow Diagrams
      • Plugins
        • Magento
          • Rebilling with Magento
        • WooCommerce
          • Rebilling with WooCommerce
        • PrestaShop
          • PrestaShop with Web SDK
          • PrestaShop with Checkout
        • OpenCart
        • Shopify (via AsiaBill)
        • Mirakl
        • Salesforce
        • SAP
        • WIX
      • Marketplaces
    • Features
      • Authentication
      • Financial Operations
        • Refund
        • Void
        • Auth and Settle
        • Partial Approval
        • Currency Conversion (DCC and MCP)
        • Payout
      • Card Operations
        • Card-on-File
        • PCI and Tokenization
        • Zero-Authorization
        • Merchant-Initiated Transactions (MIT)
        • Blocking Cards
      • Subscription (Rebilling)
      • 3D-Secure
        • 3D-Secure Explained
        • 3DS Implementations
          • 3DS MPI-Only Web SDK
          • 3DS MPI-Only REST
          • 3DS External MPI
          • 3DS Responses
        • 3DS Functions
          • 3D-Secure Fingerprinting
          • 3D-Secure Authentication Challenge
      • Webhooks (DMNs)
        • Payment Transaction Requests
        • Control Panel Events API
    • Guides
      • Testing Cards, APIs and APMs
        • Testing Cards
        • Testing APIs with Postman
        • Testing APMs
      • Response Handling
      • Alternative Payment Guides (APMs)
      • Airline Ticket Guides
        • Airline Addendum
        • External Authorization Addendum
      • Payment Facilitators (PayFac)
      • Cashier
        • Cashier Events Guide
        • Cashier Features
      • Withdrawal Guide
      • Risk Guide
        • Nuvei Services
        • Transaction Types
        • Credits and Payouts
        • Fraud to Sale Programs
        • Compliance Programs
        • Chargebacks
      • eKYC Guide
      • Server SDKs
        • Java SDK
        • .NET SDK
        • PHP SDK
        • Node.JS SDK
      • Fast Track Onboarding Developer Guide
      • Currency Conversion Guides
        • Multiple Currency Pricing (MCP)
        • Dynamic Currency Conversion (DCC)
          • DCC in Cashier or Payment Page
          • DCC in REST API Workflows
          • DCC in Web SDK Workflows
      • Website Compliance Guides
    • Additional Links
      • FAQs
      • API Reference
      • Release Notes
      • Country and Currency Codes

    Styling

    On this page:
    • 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 topic that 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

    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

    See the explanation of each class 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
      });
    2022 Nuvei. All rights reserved.