¿Cómo validar un número de tarjeta de crédito en ReactJS?

La validación de la tarjeta de crédito es un paso importante en cada aplicación para autenticar el número de tarjeta de crédito del usuario para que la aplicación pueda continuar con el proceso de pago si es necesario. Se puede lograr usando el módulo de validación en ReactJS. El siguiente ejemplo muestra cómo validar el número de tarjeta de crédito ingresado por el usuario y verificar si es válido o no utilizando el módulo npm en la aplicación ReactJS.

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app creditcardvalidatedemo

Paso 2: después de crear la carpeta de su proyecto, es decir , creditcardvalidatedemo, acceda a ella con el siguiente comando:

cd creditcardvalidatedemo

Paso 3: después de crear la aplicación ReactJS, instale el módulo de validación con el siguiente comando:

npm install validator

Estructura del proyecto: se verá así

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código para validar los números de tarjetas de crédito con la interfaz de usuario básica.

import React, { useState } from "react";
import validator from 'validator'
  
const App = () => {
  
  const [errorMessage, setErrorMessage] = useState('')
    
  const validateCreditCard = (value) => {
    
    if (validator.isCreditCard(value)) {
      setErrorMessage('Valid CreditCard Number')
    } else {
      setErrorMessage('Enter valid CreditCard Number!')
    }
  }
  
  return (
    <div style={{
      marginLeft: '200px',
    }}>
      <pre>
        <h2>Validating CreditCard in ReactJS</h2>
        <span>Enter CreditCard: </span><input type="text" 
        onChange={(e) => validateCreditCard(e.target.value)}></input> <br />
        <span style={{
          fontWeight: 'bold',
          color: 'red',
        }}>{errorMessage}</span>
      </pre>
    </div>
  );
}
  
export default App

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

• El siguiente será el resultado si el usuario ingresa un número de tarjeta de crédito no válido como se muestra a continuación:

• El siguiente será el resultado si el usuario ingresa un número de tarjeta de crédito válido como se muestra a continuación: