Vue.js製のエレガントなクレジットカードフォーム「vue-interactive-paycard」

◆ vue-interactive-paycard
https://github.com/muhammederdem/vue-interactive-paycard

紹介

「vue-interactive-paycard」は、Vue.jsで出来たオープンソースのクレジットカードフォームです。

インストール

$ git clone https://github.com/muhammederdem/vue-interactive-paycard.git
# インストール実行

$ cd vue-interactive-paycard
# ディレクトリに移動

$ npm install
# npmを実行

$ npm run serve
# コンパイル&ホットリロードを実行

上記手順で、インストールしサービスを起動します。

http://localhost:8080/
localhostにアクセスするとクレジットカードフォームが表示されます。

アクセスするたびにカードのイラストが変わるなかなか憎い設計。

入力フォームに入れるたびに、UI上のクレジットカードが完成する仕組みです。

CVVを入れると、カードがひっくり返り裏面にもしっかり刻印されます。

◆ vue-interactive-paycard
https://github.com/muhammederdem/vue-interactive-paycard


コメントを読む

新着ピック  






















新着ニュース

TechCrunch Tokyo 2019スタートアップバトルのファイナル進出6社が決定 | TechCrunch Japan

Huaweiスマホはどうなる? 「AndroidとGoogleを優先」も、独自のアプリ基盤「HMS」にも注力

伝説のコーダーであるジョン・カーマックはOculusを辞職、個人的AIプロジェクトを追求 | TechCrunch Japan

エンタープライズ事業を売却したDockerが新たに40億円相当を調達し新CEOを任命 | TechCrunch Japan

ロケット・ラボの新しいRosie the Robotは、ロケット製造を大幅にスピードアップさせる | TechCrunch Japan

「自動運転はタクシーから」Autowareが作り出す未来 | TechCrunch Japan

Auth0のサンプルアプリケーション(JS)で Google ログインした場合にトークンが取得できない問題の回避 | Developers.IO

ポケモンGOで「ポケストップ」登録申請が可能に レベル40のトレーナーから

ガンホーの19年度3Q、最終利益59%増 「パズドラ」「Ragnarok M」など堅調

PrometheusをEKSにデプロイしてEKSクラスターをモニタリングしてみた | Developers.IO

【小ネタ】AWS Systems Manager経由でgit cloneする方法 | Developers.IO

【アップデート】ついに来た!CloudFormationで手動で作成したリソースをStackにインポート可能になりました | Developers.IO

早稲田大、教職員7000人を管理する人事システムをクラウドに全面移行

CloudFormationがリソースのインポートに対応しました! | Developers.IO

「ねえ、るか」でテレビを音声操作 アイリスオーヤマがテレビ事業に本格参入、国内シェア10%目指す

日本工営とスカパーが業務提携--衛星データ活用し老朽施設の事故リスクを判断

除菌に力を入れた「一台三役」、ダイソンが加湿空気清浄機「Dyson Pure Humidify+Cool」発売

リクナビ運営元に「Pマーク」取り消し措置 “内定辞退予測”を問題視

大宮駅に、AIを搭載したロボットパスタショップなど--「STARTUP_STATION」

ソニー、インドに研究拠点を設立--AI人材を中心に採用

もっと見る
記事をPICKする
ログイン
会員登録
Register
記事をPICKする

会員登録すると、もっと便利に利用できます。