Card Validation

const validationEventListener = {
  onCardBrandChanged(brand) {
    // TODO: handle the card brand change
    // brand is an object properties name and images
    // name contains the name of one of the brands supported and detected by the SDK
    // images is an array of objects where each object has a type (image/png or image/svg+xml) and a url property
    // brand will be undefined in the case where the PAN changes from a detected to an undetected card brand
  },

  onPanValidChanged(isValid) {
    // TODO: handle the pan validation result
  },

  onExpiryDateValidChanged(isValid) {
    // TODO: handle the expiry date validation result
  },

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

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

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

export default function CardFow() {
  const validationEventListener = {
    //...
  }
  const {initialiseValidation, ...} = useAccessCheckout({
    ...,
    config: useCardConfig({
      panId: 'panInput',
      expiryDateId: 'expiryDateInput',
      cvcId: 'cvcInput',
      validationConfig: {
        validationListener: validationEventListener,
      },
    }),
  });
}

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

export default function CardFlow() {
  // ...

  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>
  );
}

import React from 'react';
import {View} from 'react-native';
import {
  AccessCheckoutTextInput,
  useAccessCheckout,
  useCardConfig,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';

export default function CardFlow() {

  const validationEventListener = {
    onCardBrandChanged(brand?: Brand): void {
      // TODO: handle the card brand change
      // brand is an object properties name and images
      // name contains the name of one of the brands supported and detected by the SDK
      // images is an array of objects where each object has a type (image/png or image/svg+xml) and a url property
      // brand will be undefined in the case where the PAN changes from a detected to an undetected card brand
    },
      onPanValidChanged(isValid: boolean): void {
      // TODO: handle the cvc validation result
    },
      onExpiryDateValidChanged(isValid: boolean): void {
      // TODO: handle the cvc validation result
    },
      onCvcValidChanged(isValid: boolean): void {
      // TODO: handle the cvc validation result
    },
      onValidationSuccess(): void {
      // 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: useCardConfig({
      panId: 'panInput',
      expiryDateId: 'expiryDateInput',
      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="panInput"
          placeholder="Pan"
      />
      <AccessCheckoutTextInput
          nativeID="expiryDateInput"
          placeholder="MM/YY"
      />
      <AccessCheckoutTextInput
          nativeID="cvcInput"
          placeholder="CVC"
      />
    </View>
  );
}