Building a Credit Card Form Custom Element with Polymer

HTML & CSS
1

Originally published at: http://www.sitepoint.com/building-credit-card-form-custom-element-polymer/

In this article, we’ll be creating a custom element for a credit card payment form using the Polymer library. The final form is going to look something like this,

Credit card form

The markup that defines this payment form is as trivial as this:

<credit -card amount="$300"></credit>

Predictably, there is an additional layer of abstraction hidden beneath the face of this custom element that takes care of all the complexities accompanying a typical credit card payment form. Using a custom element helps in isolating any potential future problems and keeps the top layer of markup clean and semantic.

Our credit card payment form will be composed of:

  • An email address
  • A credit card number
  • An expiry date
  • A CVC number

If you have never used the Polymer library before or need to brush up on your knowledge on the basic concepts of web components, then you can first read my previous articles on SitPoint:

These articles should bring you up to speed with the minimal knowledge required to understand this article.

Continue reading this article on SitePoint
2

Surely this is a typo?

if(isValidNum || isValidExp || isValidCVC)
/* Success /
else
/ Validation failed */

Wouldn’t you want all the be valid, not just one of them?

if(isValidNum && isValidExp && isValidCVC)
/* Success /
else
/ Validation failed */

Otherwise, great article! Was a good read.

4

Thanks @brad7928, I’ve corrected it. One of us should have caught that, good eye.

5

Really good explaination. Great job (y)
Q: is there a generator for yeoman to combine and build the component to avoid calling external files (css, js)?

6

Thanks for the correction @brad7928 . I clearly missed it and should’ve caught it earlier.

7

Yes @younesrafie there is! The generator-polymer is a nice little build tool to scaffold your Polymer app and then concatenates your assets and HTML Imports into a single file, thus avoiding multiple HTTP requests. I plan to write about it soon!

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.