DEV Community

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 (9)

Collapse
 
umaimaka profile image
umaimaka • Edited

I'm particularly interested in your Credit Card Payment UI project. I've been meaning to work on something similar myself, so seeing your repo available is definitely exciting. I'm looking forward to checking it out and maybe even learning some new tricks. By the way, have you heard of Vclub new domain? It's a great resource I've been using for making payments online. I think it could be particularly useful in conjunction with your Credit Card Payment UI project. It's always great to have a reliable and secure payment option when working on web development projects.

Collapse
 
hyggedev profile image
Chris Hansen

Thanks a lot! I appreciate you taking the time just to let me know :)

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

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

Absolutely!

Collapse
 
abderrazakchat profile image
abderrazakchat • Edited

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

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 💯👌