Send/Add CVV/CVN Field on Cybersource Flex Microform - salesforce

Question

I am using Flex Microform and was able to successfully render the Credit Card Iframe from Cybersource.
Now, the question is to Add/Send CVN/CVV details along with above request.
In the document, we can pass only three parameters in the createToken Method - CardType, CardExpirationYear, and CardExpirationMonth.
I couldn't find anything about sending/Adding CVN.
Please guide if anyone has done similar implementation where we can send CVN details from the Flex Form.

Answer 1

Html
---
<label id="cardNumber-label">Card Number</label>
<div id="number-container" class="form-control"></div>
<label for="securityCode-container">Security Code</label>
<div id="securityCode-container" class="form-control"></div>
--
</div>
<div class="form-row">
----
</form>
Js
var flex = new Flex(captureContext);
var microform = flex.microform({ styles: myStyles });
var number = microform.createField('number', { placeholder: 'Enter card number' });
var securityCode = microform.createField('securityCode', { placeholder: '•••' });
number.load('#number-container');
securityCode.load('#securityCode-container');
Ref: developer-guides

Answer 2

I think this is what you're looking for
https://developer.cybersource.com/docs/cybs/en-us/digital-accept-flex/developer/all/rest/digital-accept-flex/microform-integ/api_reference/class_Microform.html
Example:
<div class="container card">
<div class="card-body">
<h1>Checkout</h1>
<div id="errors-output" role="alert"></div>
<div class="form-group">
<label for="cardholderName">Name</label>
<input id="cardholderName" class="form-control" name="cardholderName" placeholder="Name on the card">
<label id="cardNumber-label">Card Number</label>
<div id="number-container" class="form-control"></div>
<label for="securityCode-container">Security Code</label>
<div id="securityCode-container" class="form-control"></div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="expMonth">Expiry month</label>
<select id="expMonth" class="form-control">
<option>01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</div>
<div class="form-group col-md-6">
<label for="expYear">Expiry year</label>
<select id="expYear" class="form-control">
<option>2022</option>
<option>2023</option>
</select>
</div>
</div>
</div>
</div>
<script src="https://flex.cybersource.com/cybersource/assets/microform/0.11/flex-microform.min.js"></script>
<script>
$(document).ready(function() {
$('#submission-form').submit(function(e) {
e.preventDefault();
});
var form = document.querySelector('#submission-form');
var payButton = document.querySelector('#btnPay');
var flexResponse = document.querySelector('#SecureToken');
var expMonth = document.querySelector('#expMonth');
var expYear = document.querySelector('#expYear');
var errorsOutput = document.querySelector('#errors-output');
// the capture context that was requested server-side for this transaction
var captureContext = /*caputre context loaded here*/ ;
// setup
var flex = new Flex(captureContext);
var number = microform.createField('number', {
placeholder: 'Enter card number'
});
var securityCode = microform.createField('securityCode', {
placeholder: '•••'
});
number.load('#number-container');
securityCode.load('#securityCode-container');
payButton.addEventListener('click', function() {
var options = {
expirationMonth: expMonth.value,
expirationYear: expYear.value
};
microform.createToken(options, function(err, token) {
if (err) {
// handle error
} else {
flexResponse.value = JSON.stringify(token);
form.submit();
}
});
});
});
</script>