Developers

This chapter discusses the following additional functions you can perform with the Web SDK:

• 3DS-Only Request (without payment) – authenticate3d()
• Web SDK (without Nuvei Fields) – createPayment()
• Authorization-Only
• Tokenization-Only
• Existing User (with no cardholder data collection)
• Existing User, Collecting only CVV

3DS-Only Request (without payment) – authenticate3d()

Another option available to you is to perform a 3D-Secure-Only request with the Web SDK. This means that instead of processing a payment, Nuvei only authorizes and authenticates the end user for 3D-Secure.

To invoke the 3D-Secure-Only service, you need to call the authenticate3d() function, which is identical in input to its twin createPayment(). The difference, besides the functionality, is the output: instead of receiving a payment request you receive the 3D-Secure response and authentication values fields:

• eci – On successful authentication, this field values will be either 2 or 5 (depending on the card type)
• cavv – On successful authentication, this will contain the authentication encrypted value; otherwise it will be either empty or null.

Example of authenticate3d()

var sfc = SafeCharge({
    env: 'int', // the environment you are running on
    merchantId: '', //as assigned by Nuvei
    merchantSiteId: '' // your Merchant Site ID provided by Nuvei
  });

function main(){
sfc.authenticate3d({
    "sessionToken": "",
    "userTokenId": "someone@site.com", // optional
    "clientUniqueId": "695701003",
    "paymentOption": {
      "card": {
        "cardNumber": "5333302221254276",
        "cardHolderName": "john smith",
        "expirationMonth": "12",
        "expirationYear": "25",
        "CVV": "217"
      }
    },    "billingAddress": {
      "email": "someone@somedomain.com",
      "country": "GB"
    }
  }, function(result) {
    console.log(result.cavv)
  });
}

Web SDK (without Nuvei Fields) – createPayment()

If you would rather not use Nuvei Fields, it is also possible to charge the user directly via createPayment(). As shown in the sample below, the function can receive the cardholder information directly.

Example of createPayment()

var sfc = SafeCharge({
    env: 'int', // the environment you are running on (if omitted, default is 'prod')
    merchantId: '', //as assigned by Nuvei
    merchantSiteId: '' // your Merchant Site ID provided by Nuvei
  });

function main() {
  sfc.createPayment({
    "sessionToken": "", //as received from openOrder
    "userTokenId": "230811147",
    "clientUniqueId": "695701003", // optional
    "paymentOption": {
      "card": {
        "cardNumber": "5333302221254276",
        "cardHolderName": "john smith",
        "expirationMonth": "12",
        "expirationYear": "25",
        "CVV": "217"
      }
    },
    "billingAddress": {
      "email": "someone@somedomain.com",
      "country": "GB"
    }
  }, function(res) {
    console.log(res)
  });
}

Authorization-Only – openOrder

There are two types of authorization-only requests you can perform with the Web SDK:

• Auth and Settle – Authorize and Settle the amount at later stage.
• Zero-Authorization – Authorize a zero amount.
  This is used to verify a card or add a card to your user’s account for future use.
  Perform a zero amount transaction as follows:
  1. Call the /openOrder method and set amount=0 and transactionType=Auth.
     Example:

     {
         "merchantId": "427583496191624621",
         "merchantSiteId": "142033",
         "userTokenId": "487106",
         "clientUniqueId": "12345",
         "clientRequestId": "1484759782197",
         "currency": "USD",
         "transactionType": "Auth",
         "amount": "0",
         "timeStamp": "20170118191751 ",
         "checksum": "6b53666fc048a825be63cbb820da467b"
     }

  2. From your client-side, call a createPayment() or an authenticate3d() request. Use the sessionToken returned from the /openOrder, and set the amount field to zero, as described in the Quick Start section.

Tokenization-Only

Some merchants prefer to perform a tokenization-only request, in order to be descoped from PCI, but still being in control of the complete flow from their server-side.

If you need to perform tokenization-only with the Web SDK, you need to follow the same flow as in the Quick Start section, but instead of calling the createPayment() function, you need to call the getToken() function. This function only tokenizes the card and returns the ccTempToken field. You can then use the ccTempToken to process the payment using the /payment API method.

Example of getToken():

var sfc = SafeCharge({
    env: 'int', // the environment you are running on (if omitted, default is 'prod')
    sessionToken: '', //as retrieved from getSessionToken
    merchantId: '', //as assigned by Nuvei
    merchantSiteId: '' // your Merchant Site ID provided by Nuvei
  });

  var ScFields = sfc.fields({
    fonts: [{
        cssUrl: 'https://fonts.googleapis.com/css?family=Source+Code+Pro'
      }, // include your custom fonts
    ],
    locale: 'en' // you can set your users preferred locale, if not provided we will try to autodetect
  });

  var style = {
    base: {
      fontFamily: 'Roboto, sans-serif',
      color: "#045d47",
      fontSmoothing: 'antialiased',
      '::placeholder': {
        color: '#ccb654'
      }
    },
    invalid: {
      color: '#e5312b',
      ':focus': {
        color: '#303238'
      }
    },
    empty: {
      color: '#BADA55',
      '::placeholder': {
        color: '#cc3ac2'
      }
    },
    valid: {
      color: '#2b8f22'
    }
  };

  var scard = ScFields.create('card', {
    style: style
  });
  scard.attach(document.getElementById('card-field-placeholder'));  
  
  function main() {
    sfc.getToken(scard).then(function(result) {
      if (result.status === 'SUCCESS') {
        console.log(result.paymentOption.ccTempToken) // pass the paymentOption block, as is, to the payment API call
      } else {
        // handle error.
      }
    });
  }

Existing User, Collecting only CVV

As explained in the previous section, the Web SDK can process tokenized cardholder information using only the userPaymentOptionId field.

If you would like to authenticate the payment with the CVV/CVC verification codes, you are able to do that as well. You can instruct createPayment() or authenticate3d() to take the CVV from Nuvei Fields.

Example (without Nuvei Fields):

var sfc = SafeCharge({
    env: 'int', // the environment you are running on (if omitted, default is 'prod')
    merchantId: '', //as assigned by Nuvei
    merchantSiteId: '' // your Merchant Site ID provided by Nuvei
  });

  function main() {
    sfc.createPayment({
      "sessionToken": '', //as received from the openOrder
      "userTokenId": "asdasd",
      "clientUniqueId": "695701003", // optional
      "paymentOption": {
        "userPaymentOptionId": "53622598",
        "card": {
          "expirationMonth": "12", //optional - sets a new expiration date
          "expirationYear": "26",  //optional 
          "CVV": "112"        
         }
      },
      "billingAddress": {
        "email": "someone@somedomain.com",
        "country": "GB"
      }
    }, function(res) {
      console.log(res);
   });
}

Example (with Nuvei Fields):

var sfc = SafeCharge({
  env: 'int', // the environment you are running  on (‘prod’ for production)
  merchantId: '', // your Merchant ID provided by Nuvei
  merchantSiteId: '' // your Merchant Site ID provided by Nuvei
});

var ScFields = sfc.fields({
  fonts: [{
      cssUrl: 'https://fonts.googleapis.com/css?family=Roboto'
    }, // include your custom fonts
  ]
});

var ScFieldStyles = {
  base: {
    color: '#32325D',
    fontWeight: 500,
    fontFamily: 'Roboto, Consolas, Menlo, monospace',
    fontSize: '16px',
    fontSmoothing: 'antialiased',
    '::placeholder': {
      color: '#CFD7DF',
    },
    ':-webkit-autofill': {
      color: '#e39f48',
    },
  },
  invalid: {
    color: '#E25950',
    '::placeholder': {
      color: '#FFCCA5',
    },
  },
};

var ScFieldClasses = {
  focus: 'focused',
  empty: 'empty',
  invalid: 'invalid',
  complete: 'complete',
};

var cardCvc = ScFields.create('ccCvc', {
  style: ScFieldStyles,
  classes: ScFieldClasses
});
cardCvc.attach('#card-cvc');

function main() {
  sfc.createPayment({
    "sessionToken": '', //as received from the openOrder
    "userTokenId": "230811147",
    "paymentOption": {
      "userPaymentOptionId": "13084323",
      card: {
       "expirationMonth": "12",  // optional - sets a new expiration date
       "expirationYear": "2026", // optional
       "CVV": cardCvc
      }
    }
  }, function(result) {
    console.log(result);
  })
}