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:- 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" }
- From your client-side, call a createPayment() or an authenticate3d() request. Use the
sessionToken
returned from the /openOrder, and set theamount
field to zero, as described in the Quick Start section.
- Call the /openOrder method and set amount=0 and transactionType=Auth.
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 theccTempToken
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 (with no cardholder data collection)
Many merchants keep accounts for their users and would like to charge them on multiple occasions. After collecting the end user’s cardholder information for the first time, you do not need to re-collect it on additional charges when using the Nuvei Tokenization solution.
When calling the Web SDK’s createPayment() or authenticate3d() functions, they can return userPaymentOptionId
. This field represents the full cardholder information that was collected during the function call. The next time you perform a payment using one of the methods, you can provide the userPaymentOptionId
field, instead of again providing or collecting the full cardholder information.
To retrieve the userPaymentOptionId
initially, you need to specify the userTokenId
field when calling the createPayment() or authenticate3d() functions. These fields identify the end user and guarantee that the payment option (card) being used indeed belongs to that user. You need to specify the fields both on the initial call, as well as on subsequent calls.
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": "217" } }, "billingAddress": { "email": "someone@somedomain.com", "country": "GB" } }, function(res) { console.log(res); }); }
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); }) }