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>" }