Skip to main content

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.

Note: Dummy Adapter

The CVV refresh call is not enabled for the dummy adapter.

Use the CVV Refresh call as following:

  1. On top of your HTML page (either in <head> or directly after <body>), include the payment.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 attribute
    It is important to set the data-main="payment-js" attribute on the <script> tag.

  2. Build the payment form providing a <div> element with an id 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>

  3. Initialize the payment.js library by instantiating an PaymentJs object, and call initCvvRefresh() 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>

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

  5. You can now call the Transaction API to perform the Debit/Preauthorize with CVV present.

Last updated on