Overview

This topic describes how to implement a tokenization-only flow.

Who Uses the Tokenization-Only Flow

The tokenization-only integration is suited to merchants who:

• Want to be descoped from PCI but still be in control of the complete flow from their server-side.
• Perform complete 3D-Secure flows both server-side and client-side.
• Want to be able to choose either 3D-Secure v1 or v2 flows in frictionless or challenge mode.

1. Authenticate the Merchant

Generate a sessionToken by posting a /getSessionToken API server-side call, and include the checksum field.

Example /getSessionToken Request

{
    "merchantId":"<your merchantId>",
    "merchantSiteId":"<your merchantSiteId>",
    "clientRequestId": "<unique request ID in merchant system>",
    "timeStamp": "<YYYYMMDDHHmmss>",
    "checksum": "<calculated checksum>"
}

Example /getSessionToken Response

The response returns the sessionToken, which you need for authentication in all subsequent calls in the flow.

{
    "sessionToken": "7db38b03-c1ae-45fc-8fce-8a55cfa4a6e0",
    "internalRequestId": 188635168,
    "status": "SUCCESS",
    "errCode": 0,
    "reason": "",
    "merchantId": "479748173730597238",
    "merchantSiteId": "180083",
    "version": "1.0",
    "clientRequestId": "20200510165419"
}

2. Generate a ccTempToken

Perform Tokenization-only using the Nuvei Web SDK getToken() method, which tokenizes the card and cvv and returns the ccTempToken.
You can then use the ccTempToken to process the payment using the /payment API method.

Example of getToken() Request

var sfc = SafeCharge({
    env: 'int', // Nuvei API environment - 'int' (integration) or 'prod' (production - default if omitted)
    merchantId: '<your merchantId>', // your Merchant ID provided by Nuvei
    merchantSiteId: '<your 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 try to auto-detect.
  });

  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.
      }
    });
  }

3. Payment with a ccTempToken

You can submit a /payment API request (3D-Secure or Non-3D-Secure) using the Nuvei client-side Web SDK using the ccTempToken returned by the getToken() method.

This example shows a Non-3D-Secure payment.

Example /payment Request (non-3D)

{
    "sessionToken":"<sessionToken from getSessionToken>",
    "merchantId":"<your merchantId>",
    "merchantSiteId":"<your merchantSiteId>",
    "clientRequestId":"<unique request ID in merchant system>",
    "amount":"10",
    "currency":"USD",
    "userTokenId":"<unique customer identifier in merchant system>",
    "clientUniqueId":"<unique transaction ID in merchant system>",
    "paymentOption":{
        "card":{
            "ccTempToken":"<as returned by getToken method>",
            "cardHolderName":"CL-BRW1"
        }
    },
    "deviceDetails":{
        "ipAddress":"127.0.0.1"
    },
    "timeStamp":"<YYYYMMDDHHmmss>",
    "checksum":"<calculated checksum>"
}