Grayscale to Colour Credit Card Payment Form With Flip Animation for CVV

Image: Grayscale to Colour Credit Card Payment Form With Flip Animation for CVV GIF

Here is a minimal but functional CC form that you can test it withย dummy credit card numbersย to see how it automatically detects the card type. As you fill in the card number it detects the type of card and adds the necessary colour to the greyscale card. When you try and enter the CVV the card flips over, very cool.

If you are having trouble with the pen, try the archived copy on GitHub

CC Form With Flip Animation Snippet

See the Pen Credit Card Payment Form by Adam Quinlan (@quinlo) on CodePen.default

Posted by:Saijo George

Digital Marketer with a strong focus on technical SEO and design. One of the top 100 makers on Producthunt, co-organizer of the SEO Meetup in Melbourne, an instructor at General Assembly. Worked with brands like Envato, AEON. Currently the SEO Strategy Director at Supple.