卡验证

import {
  AccessCheckout,
  Brand,
  CardValidationConfig,
  CardValidationEventListener,
  useCardValidation,
} from '@worldpay/access-worldpay-checkout-react-native-sdk';
import React from 'react';
import { TextInput, View } from 'react-native';

export default function CardFlow() {
  const accessCheckout = new AccessCheckout({
    baseUrl: 'https://try.access.worldpay.com/',
    merchantId: 'YOUR_CHECKOUT_ID',
  });

  const validationEventListener: CardValidationEventListener = {
    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 pan validation result
    },

    onExpiryDateValidChanged(isValid: boolean): void {
      // TODO: handle the expiry date 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 validationConfig = new CardValidationConfig({
    panId: 'panInput',
    expiryDateId: 'expiryDateInput',
    cvcId: 'cvcInput',
  });

  const { initialiseCardValidation } = useCardValidation(
    accessCheckout,
    validationConfig,
    validationEventListener
  );

  return (
    <View
      onLayout={() => {
        initialiseCardValidation()
          .then(() => {
            // You may want to optionally perform some actions once validation has been successfully initialized.
          })
          .catch((error) => {
            // do something in case of error
          });
      }}
    >
      <TextInput
        nativeID="panInput"
        keyboardType="numeric"
        placeholder="Card Number"
      />
      <TextInput
        nativeID="expiryDateInput"
        keyboardType="numeric"
        placeholder="MM/YY"
      />
      <TextInput
        nativeID="cvcInput"
        keyboardType="numeric"
        placeholder="CVC"
      />
    </View>
  );
}