【Card】クレジットカードの入力をより直感的に行える入力フォームを実装するjQueryプラグイン

フォーム・エディタ
【Card】クレジットカードの入力をより直感的に行える入力フォームを実装するjQueryプラグイン

Demo Page Download Page

カード番号を入力すると、カードの種類を読み取って表示が変わります。

Lisence

MITライセンス

※ライセンスが変更される可能性がありますので、使用される際は必ずご自身でご確認ください。

Browser

Tag

クレジットカード入力支援

設置方法などの参考ページ

インタラクティブなクレジットカード入力フォームを実装するjQueryプラグイン・Card

http://kachibito.net/web-design/card-jquery.html

インタラクティブなクレカ情報入力フォームを実装するスクリプトのご紹介。以前も似たようなものを紹介しましたが、こちらの方が良さそうだったので備忘録。

Card – クレジットカード入力をかっこうよく表現

http://www.moongift.jp/2014/06/card-%E3%82%AF%E3%83%AC%E3%82%B8%E3%83%83%E3%83%88%E3%82%AB%E3%83%BC%E3%83%89%E5%85%A5%E5%8A%9B%E3%82%92%E3%81%8B%E3%81%A3%E3%81%93%E3%81%86%E3%82%88%E3%81%8F%E8%A1%A8%E7%8F%BE/

Webにおいてクレジットカードの入力は頻繁にあると思います。番号、有効期限、保有者名、CVCの入力が主になると思いますが、その入力フォームをかっこうよくしてくれるのがCardです。 Cardの使い方そこにこんな感じのJavaScriptを実行します。カスタマイズも可能です。 $('form').card({ container: $('.card-wrapper') }); そうするとこのようなフォームに変化します。 Cardはインタラクティブな表現なので、入力した内容がそのままカード面に反映されるのが面白いです。また、CVCのようにどこに書いてある項目なのか分かりやすく説明できるのでユーザビリティ向上にもつながりそうです。 CardはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 Card — make your credit card better in one line of code jessepollak/card