ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Webにおいてクレジットカードの入力は頻繁にあると思います。番号、有効期限、保有者名、CVCの入力が主になると思いますが、その入力フォームをかっこうよくしてくれるのがCardです。

Cardの使い方

こちらは適用前。普通のフォームですね。
こちらは適用前。普通のフォームですね。

そこにこんな感じのJavaScriptを実行します。カスタマイズも可能です。

$('form').card({ container: $('.card-wrapper') });

そうするとこのようなフォームに変化します。

まるで本物のクレジットカードのような表示がされます。
まるで本物のクレジットカードのような表示がされます。

CVCの入力になるとカードが回転するアニメーション付きです。
CVCの入力になるとカードが回転するアニメーション付きです。

カードの種類を読み取って表示が変わります。
カードの種類を読み取って表示が変わります。

Cardはインタラクティブな表現なので、入力した内容がそのままカード面に反映されるのが面白いです。また、CVCのようにどこに書いてある項目なのか分かりやすく説明できるのでユーザビリティ向上にもつながりそうです。

CardはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

Card — make your credit card better in one line of code

jessepollak/card

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2