Last Updated: 15 May 2024 | Change Log

CVC Validation

Validate your customer's cvc details before processing them.

Warning

The validation does not check if your customer's card details are correct. The validator only checks the formatting of the entered details.


Get started

To integrate the validation feature you must:

  • Initialize and configure the useAccessCheckout hook
  • Create an implementation of a CvcOnlyValidationEventListener to be notified of validation events
  • Get an instance of the initialiseValidation function exposed by the useAccessCheckout hook.
  • Call that function once your UI components are present in the DOM in order to effectively initialize the validation.
Full Sample Integration

You can see an example of the cvc validation integration here.

Initialize the useAccessCheckout hook

First step to implement the validation is to configureuseAccessCheckout, if you haven't already.

To do this, you must provide your baseUrl, checkoutId and the cvc identifier which you defined as the nativeID property within the AccessCheckoutTextInput component.

Here's an example of how to initialize it.

import {useAccessCheckout, useCvcOnlyConfig} from '@worldpay/access-worldpay-checkout-react-native-sdk';

export default function CvcFlow() {

  const {initialiseValidation} = useAccessCheckout({
    baseUrl: 'https://try.access.worldpay.com',
    checkoutId: 'YOUR_CHECKOUT_ID',
    config: useCvcOnlyConfig({
      cvcId: 'cvcInput'
    }),
  });
}

Parameters

ParameterDescription
baseUrl
  • For testing use: https://try.access.worldpay.com/
  • For live use: https://access.worldpay.com/
checkoutIdYour unique checkout ID.
cvcIdThe nativeID assigned to your CVC AccessCheckoutTextInput component.

Implement your CvcOnlyValidationEventListener

To receive validation results of your customer's cvc details, you are required to create your own implementation of the CvcOnlyValidationEventListener interface. Each of the function of this interface is optional to give you flexibility to listen to the events that you care about.

Here is an example detailing how to do this.

  1. JavaScript
  2. TypeScript
const validationEventListener = {

  onCvcValidChanged(isValid) {
    // TODO: handle the cvc validation result
  },

  onValidationSuccess() {
    // TODO: handle the form when the validation is complete i.e. all fields are valid
  },
};

Methods

MethodDescription
onCvcValidChangedThis method is called with the validity of the CVC field. isValid indicates whether the field is in a valid or invalid state.
onValidationSuccessThis method is called when all fields are in a valid state. You typically use this to enable the submit button.

Configure useAccessCheckout to enable validation

You must now configure the useAccessCheckout hook to get an instance of the function which will be used to initialize the validation of your UI.

To do this, add your CvcOnlyValidationEventListener to the hook validation configuration using the helper hook useCvcOnlyConfig this will expose a initialiseValidation method.

Here is an example detailing how to do this.

  1. JavaScript
  2. TypeScript
import {useAccessCheckout, useCvcOnlyConfig} from '@worldpay/access-worldpay-checkout-react-native-sdk';

export default function CvcFlow() {
  const validationEventListener = {
    //...
  }
  const {initialiseValidation, ...} = useAccessCheckout({
    ...
    config: useCvcOnlyConfig({
      cvcId: 'cvcInput',
      validationConfig: {
        validationListener: validationEventListener,
      },
    }),
  });
}

Initialize the validation

You can now initialize the validation using the initialiseValidation() function. Before doing so, you need to make sure that your UI components for CVC are available in the DOM.

Validation initialization is an asynchronous process so make sure to handle the promise returned by the function.

import React from 'react';
import {View} from 'react-native';
// ...

const onLayout = () => {
  initialiseValidation()
    .then(() => {
      // You may want to optionally perform some actions once validation has been successfully initialized.
    })
    .catch(e => {
      // do something in case of error
    });
};

return (
  <View onLayout={onLayout}>
    ...
  </View>);

Full code sample

Here's the full code sample of the steps above.

  1. JavaScript
  2. TypeScript
import React from 'react';
import {View} from 'react-native';
import {
  AccessCheckoutTextInput,
  useAccessCheckout,
  useCvcOnlyConfig,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';

export default function CvcFlow() {

  const validationEventListener = {
    onCvcValidChanged(isValid) {
      // TODO: handle the cvc validation result
    },
    onValidationSuccess() {
      // TODO: handle the form when the validation is complete i.e. all fields are valid
    },
  };

  const {initialiseValidation, ...} = useAccessCheckout({
    baseUrl: 'https://try.access.worldpay.com',
    checkoutId: 'YOUR_CHECKOUT_ID',
    config: useCvcOnlyConfig({
      cvcId: 'cvcInput',
      validationConfig: {
        validationListener: validationEventListener,
      },
    }),
  });

  const onLayout = () => {
    initialiseValidation()
      .then(() => {
        // You may want to optionally perform some actions once validation has been successfully initialized.
      })
      .catch(e => {
        // do something in case of error
      });
  };

  return (
    <View onLayout={onLayout}>
      <AccessCheckoutTextInput
        nativeID="cvcInput"
        placeholder="CVC"
      />
    </View>
  );
}

Next steps


Create a CVC session