Collecting the CVV Code

While you can reuse a customer’s saved card information, you may still be required to pass a customer’s CVV code in an authorization or charge request. Since the CVV code is not part of the saved token, you will thus need to collect the CVV code from your customers before you can proceed with the payment flow.servers.

While you can reuse a customer’s saved card information, you may still be required to pass a customer’s CVV code in an authorization or charge request. Since the CVV code is not part of the saved token, you will thus need to collect the CVV code from your customers before you can proceed with the payment flow.

You can collect the CVV code using either the Secure Code Form or the JavaScript API.

Using the Secure Code Form

PaymentsOS allows you to securely collect a customer’s CVV code using a Secure Code Form that you embed in your web page. Similar to the Secure Fields Form, the Secure Code Form generates the CVV’s input field and handles the logic of grabbing the CVV submitted by the user.

Let’s take a look at how it all works. To get started, include the CVV Javascript SDK in your checkout page. You can find the SDK at https://js.paymentsos.com/cvv/latest/cvv-encryptor.min.js. Also provide your public key to authenticate yourself by calling POSC.setPublicKey().

<body>
  <script language="JavaScript" type="text/javascript" src="https://js.paymentsos.com/cvv/latest/cvv-encryptor.min.js"></script>
  <script>POSC.setPublicKey("99346d84-5186-4221-9c16-dc51a8de27fb");
  </script>
  ...
</body>

Now embed the Secure Code Form form and set your environment (either “test” or “live”) by calling POSC.setEnvironment(). The CVV code must always be related to the payment method that the customer chose to use, so the next step is to call POSC.setPaymentToken() and pass it the token you fetched from the customer object. Then display the form’s CVV field by calling POSC.initCvvEncryptor(). As a last step, attach a click event to the form that is invoked when the form is submitted and pass the event the POSC.createToken() function. This function will send the CVV code to PaymentsOS, tokenize the CVV value and return an encrypted code to your site.

Let’s piece it all together:

<body>
  ...
  <!-- Embed the form after loading the CVV Javascript SDK and setting your public key -->
  <form id="cvv-form">
    <div id="cvv-field">
      <!-- The form will be displayed here -->
    </div>
    <button type=”submit”>Pass CVV Code</button>
  </form>
  <script>
    // Set your environment. Values are either "test" or "live".
    // If omitted, the test environment will be used.
    POSC.setEnvironment("test");

    // Pass us the token that belongs to the payment method that your customer chose to use
    POSC.setPaymentToken(token);
    
    // Initialize the form's fields
    POSC.initCvvEncryptor('cvv-field');
    
    // Attach a click event to the form that is invoked when the form is submitted.
    document.getElementById('cvv-form').addEventListener('submit', function(event) {
      event.preventDefault();
      
      // On submit, pass the CVV code to PaymentsOS
      POSC.createToken(function(result) {
        // Grab the encrypted CVV code here
      });
    });
  </script>
</body>

Styling the Secure Code Form

To customize the look and feel of the Secure Code Form, define the CSS of the CVV input field and call POSC.setStyle() for your changes to take effect. Make sure to initialize the form after setting your styles.

<script>

  // Make sure to use camelCase for the style attributes
  const style = {
    base: {
      border: 'none',
      backgroundColor: 'transparent',
      height: 45,
      fontSize: 14,
      },
      cvv: {
      width: 40,
      height: 45,
      }
  }

  // Done styling? Let us know, so that we can apply your changes.
  POSC.setStyle(style);

  // Make sure to initialize the cvv field after setting your styles
   POSC.initCvvEncryptor('cvv-fields');
  ...
</script>

Setting a CVV Field Placeholder

To set the CVV code’s input field placeholder text, call POSC.setSecurityNumberPlaceholder(). The default placeholder text is “CVV”. Call this method before initializing the form’s fields.

<script>
...
// Set the field's placeholder
POSC.setSecurityNumberPlaceholder("CVD");
// Now initialize the fields
 POSC.initCvvEncryptor('cvv-field');
</script>

Using the JavaScript API

You can choose the use the JavaScript API to collect a user’s CVV code, instead of the Secure Code Form. Simply include the JavaScript API in your web page and then call POS.tokenize(), passing in an object with the fields required for a token_type of card_cvv_code:

...
<!-- Add the JavaScript API Library -->
<script language="JavaScript" type="text/javascript" src="https://js.paymentsos.com/v2/0.0.1/token.min.js"></script>

<!-- Call POS.tokenize() -->
<script>
  POS.tokenize({
        "token_type": "card_cvv_code",
        "credit_card_cvv": "123",
        "payment_method_token": "d5c0d95d-55ef-476d-bea0-0354dfb03194"
    },
    function (result) {

      console.log ("result obtained"+result);

        // Check for errors, if all is good, then proceed!
    }
  );
</script>
Last modified January 4, 2022