VALI-PAY

Vali-pay is an electronic platform to validate if a card is valid and this is due to the Luhn algorithm

Indice

• VALI-PAY
  • Indice
    • Information:
    • Description:
    • Design:
    • Considerations:
    • Structure:
    • Technologies used:
    • How to use
    • Final product:

---

Information:

Theme: Card Validation
Autor: Andu15
Created: 06/22
Version: 2.0.0

Description:

Web application based on the Luhn algorithm, which allows the user to validate a credit card number, with the added bonus of verifying the type of card entered

Design:

• Figma

Considerations:

• isValid: Luhn's algorithm
• maskify: Return only 4 last digits of the credit card
• getIssuer: With regex you can get the brand of the card (American Express, Discover, Visa, Mastercard, etc.)

Structure:

├── coverage/
├── node_modules/
├── src/
|   ├── assets/
|   |   ├── css/
|   |   ├── images/
|   |   └── scss/
|   ├── .htmlhintrc
|   ├── index.html
|   ├── index.js
|   └── validator.js
├── test/
|   ├── .eslintrc
|   └── validator.spec.js
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── package.json
└── README.md

Technologies used:

• Vanilla js
• HTML
• CSS
• Sass
• Jest
• ESLint

How to use

1. The user clicks 'Ir a Pagar'
2. Enter the data:

• Número de tarjeta: Accepts between 12 to 19 numbers without spaces
• MM: Select card expiration month
• YYYY: Select card expiration year
• CVV: Enter cvv
• Primer Nombre: Accept only one name and no spaces
• Primer Apellido: Accept only one last name and no spaces
• Correo electrónico: Enter a email

3. Wait 2 seconds aprox. while the next screen loads
4. Finally it will show you if the card is valid or not

** OBS: This simple application is a payment simulation, so if the card is valid, it will indicate a transaction code, but it is only so as not to lose the context

Final product:

• Desplegado en gh-pages