CVV refreshing
If you already have tokenized a card and stored it via a Register or Debit/Preauthorize with register transaction, all subsequent transaction will not pass CVC/CVV code to the acquiring bank, because the verification code must not be stored due to PCI regulations.
If you still want to perform card-on-file transactions with CVC/CVV code, you have to present the CVC/CVV input field to the customer again.
For refreshing the CVV you must have the referenceId
of the initial transaction
stored in your customer details.
Furthermore, we recommend to store the last 4 digits of the card to let your
customer know, which card will be used for the payment.
The CVV refresh call is not enabled for the dummy adapter.
Use the CVV Refresh call as following:
-
On top of your HTML page (either in
<head>
or directly after<body>
), include thepayment.1.3.min.js
as shown here:<script data-main="payment-js"
src="https://gateway.ixopay.com/js/integrated/payment.1.3.min.js">
</script>Note: data-main attributeIt is important to set thedata-main="payment-js"
attribute on the<script>
tag. -
Build the payment form providing a
<div>
element with anid
for the CVV/CVC code input field.<form id="payment_form" method="POST" action="/customer/update-card" onsubmit="interceptSubmit(); return false;">
<div>
<h1>Payment</h1>
<p>Your purchase will be made with your stored credit card <b>**** **** **** 1111</b></p>
</div>
<div>
<label for="cc-csc">CVV</label>
<div id="cc-csc" style="height: 35px; width: 200px;"></div>
</div>
<div>
<input type="submit" value="Submit" />
</div>
</form> -
Initialize the payment.js library by instantiating an
PaymentJs
object, and callinitCvvRefresh()
on it. The method expects the connector's public integration key,uuid
of the initial transaction which was used to store the card,id
of the CVV div and a callback function as parameters. The callback function will receive the PaymentJs object, and you should call any other setup methods — like formatting or event handlers — directly there.<script>
const payment = new PaymentJs();
payment.initCvvRefresh("$INTEGRATION_KEY", "$INITIAL_TRANSACTION_UUID", "cc-csc", (payment) => {
payment.setCvvStyle({
border: "1px solid red",
width: "75px",
});
payment.cvvOn("input", (data) => {
alert("A number was entered");
});
});
</script> -
Once the user submits the form, you must intercept the submit event and call payment.js
refreshCvv
method, passing a success callback and an error callback function. The success callback will be called once the CVV was successfully updated for the card. The error callback function will receive an array with error objects, containing field name and error message.function interceptSubmit() {
payment.refreshCvv(
() => {
// success callback
document.getElementById("payment_form").submit(); //submit the form
},
(errors) => {
// error callback
alert("Errors occurred");
// render error information here
},
);
} -
You can now call the Transaction API to perform the Debit/Preauthorize with CVV present.