DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 966,155 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Credit Card Payment UI With ReactJS
Chris Hansen
Chris Hansen

Posted on • Updated on

Credit Card Payment UI With ReactJS

This is not a tutorial, or anything even informational. Just a place to share my project, hoping to inspire some creativity. Hopefully you learn about a new resource or try a new project. Repo is available!


Hey devs, we're pretty fortunate πŸ˜‰

This badass platform gives us the ability to show off a project with the "#showdev" community tag and I am taking that opportunity!


Resources

Try different credit card issuers:

  • Visa cards start with 4
  • Mastercards 51
  • Discover 6011 / or 65
  • Diners Club 300

Features

  1. ReactJS
  2. JSX
  3. Basic Javascript
  4. Custom SCSS
  5. Cleave.JS
  6. Dynamic rendering

Something to point out

The FUNNIEST thing about the entire project, what I am also the most proud of, is the holographic sticker on the top left! It's a picture of raindrops on a window! 🀣


Conclusion

Let me know what you think about it. So much more could be added to this. For example, I would like to add a rotateX animation that allows the user to instead enter their security code on the back, once they click on the form field! That would be cool.

If you are practicing frontend development and using React, give it a go! It's really based on all the fundamentals of React and the basics of Javascript.

Show off your project below if you end up giving a shot! I'm sure you can do something even better! 😎


Follow me on Twitter

for byte-sized web dev content!

You should also follow my Instagram

Dev-related stuff only!


Buy Me A Coffee


Check out these other beginner friendly articles also written by me! ‡️

Top comments (7)

Collapse
 
srini profile image
Sri-Ni, Thirumalaa Srinivas

It will be interesting to see how you evolve this Chris.
So many possibilities to take it from here.
Giving context on the UI for the credit card payment, is one possible expansion of this demo UI.

Collapse
 
hyggedev profile image
Chris Hansen Author

Hey, thanks a lot for the vote of encouragement πŸ’― Context is definitely a way to go. There is error handling, yup, Formik, slicker animations. Seems like something I'm going to work on soon!

Collapse
 
srini profile image
Sri-Ni, Thirumalaa Srinivas

Yes, error handling and user messaging will be valuable!

Thread Thread
 
hyggedev profile image
Chris Hansen Author

Absolutely!

Collapse
 
abderrazakchat profile image
abderrazakchat • Edited on

Your project is looking fresh, Chris Hansen, and I wish you good luck with improving the project. I think you can create a great application for people to check their credit card availability, especially for people traveling a lot. It would be a useful application, in my opinion. Also, you can provide a good tutorial service for many customers with advice like - how to increase my credit score, take a mortgage with a bad credit score, and check my credit score with the bank. I bet these are important topics.

Collapse
 
edgarmendozatech profile image
Edgar Mendoza

It looks awesome, there's only one issue, the month and year are wrong

Collapse
 
hyggedev profile image
Chris Hansen Author

You're right l, are you talking about how I have month displayed first on the card, but year is the first users choice? Good catch if so πŸ’―πŸ‘Œ

πŸ‘€ Just want to lurk?

You can still create an account and turn on features like 🌚 dark mode.