Clever Geek Handbook

CardInfo.jsで銀行カードを受け入れるための美しいフォーム

銀行カードを受け入れるためのフォームをタイプセット、タイプセット、またはタイプセットする人は誰でも、このフォームを作成できるCardInfo.jsプラグインを提供します。













カード番号ごとのプラグインにより、ロシアの49の銀行のいずれかが決まります（後で他の国を追加します）。銀行のロゴ、背景色、銀行のWebサイトへのリンク、カードの種類、ロゴなどが決まります。 このデータを使用して、必要なことを行い、任意のフォームをタイプセットします。







デモページのフォームで遊ぶことができます。 githubのプラグインコードとインストール手順。







カットの下：









CardInfo.js



プラグインは、NPM npm install card-info



およびBower bower install card-info



を通じて配布されます。 JSファイルをHTMLページに挿入することで接続されます。または、CommonJSまたはES6スタイルのモジュールとして接続できます。 メインファイルをすべてのロジックと銀行に関するすべてのデータ（69 KB）に接続するか、ロジック（5 KB）と個別のファイルに銀行を接続して、目的の国の銀行（通常、これまでのところロシアのみであるため、これは将来のためです）の詳細については、ドキュメントを参照してくださいgithubで。 プラグインは独立しています。つまり、作業に追加のライブラリを必要としません。 すべてのプラグインコードはテストでカバーされます。 IE6でも動作します。 ブラウザでテストを実行できます。







CardInfoクラスのインスタンスを作成し、ユーザーがフィールドにカード番号var cardInfo = new CardInfo(number)



入力した文字列を引数としてコンストラクターに渡します。 インスタンスには、マップに関する追加情報を持つオブジェクトが含まれます。









銀行のすべてのデータはカード番号の最初の6桁で決定され、タイプのデータはカード番号の最初の1-2桁で決定されます。 呼び出すときに、設定を転送することもできますが、これはgithubのドキュメントに完全に記述されています。 ここでは繰り返しません。







プラグイン自体はどのような方法でもレイアウトに関連付けられておらず、CardInfoを使用して取得したデータを使用して、好きなようにフォームの外観を作成できます。







銀行の拠点



プラグインデータベースの各銀行について、次のデータが確認されています。









BIN（プレフィックス）により、ユーザーのカードが属する銀行が決定されます。 データベースには2573のプレフィックスがあります。 平均して、銀行ごとに52のプレフィックスがあります。







ウェブサイトhttp://www.banki.ru/にはロシアの560の銀行に関する情報があります。すべての銀行の接頭辞が見つかった場合、プラグインを含むファイルの重量は非常に大きくなります。 560個のロゴをダウンロードして処理し、テキストの形状と色の560倍の色を選択した場合、このプラグインをレイアウトするよりもずっと待ち望んでいます。







したがって、最適な数の銀行、つまり50銀行を採用することが決定されました。金融格付けでソートされた銀行のリストを開きました。 クレジットカードまたはデビットカードを発行する最初の50の銀行を利用しました。 一般に、最も人気のある銀行はすべてデータベースに含まれていました。







BIN Codes Webサイトからプレフィックスを取得しました。 おそらく、いくつかのプレフィックスが欠落し、いくつかは誤って銀行を決定しますが、これはむしろ例外です。 BIN Codesには有料のIPAがあり、お金を払うと、ほとんどの場合定性的にそれを行います。 また、異なるサイトのデータベースにあるいくつかのプレフィックスの存在をプレフィックスと比較し、BINコードが優れていることを示しました。 それらのAPIを使用すると、プレフィックスによって銀行を決定することしかできず、私の前には逆の問題がありました。 CardInfo.jsを作成し、ロシアの50銀行のプレフィックスが必要だと彼らに書きました。支払いの準備はできていますが、あなたのIPAが私を助けてくれないので、どうしたらいいかわかりません。 そして、神は健康を禁じています、彼らは私が彼らのウェブサイトで問題を解決するセクションを使うことができると言ったが、彼らのIPAにはまだ反映されていません、一般に、接頭辞は無料で取得されました。







各銀行の情報は、「banks」フォルダー内の個別のJSONファイルに含まれています。 これらのファイルのデータベースを作成したとき、1つのファイルのすべてのフィールドを埋めてロゴをダウンロードするまで、次へ進みませんでした。 ある時点で、多くのファイルがあり、データベースにすでにいくつの銀行があるかを理解しなくなりました。 この方法で確認し、フォルダー情報を見て、フォルダー内のファイルの数を確認しました。 それらが50になったとき、私は立ち止まりました。 しかし、「。DS_Store」ファイルはそこに隠されており、それ自体がポピーのほぼすべてのフォルダーに作成され、何らかの理由で隠しファイルの表示をオンにしても表示されなくなったことが判明しました。 これですべての準備が整いましたが、1つの銀行を完了していないことに気付きました。 しかし、私はすでにこれらすべての銀行に引き戻されているので、49を残しておきましょう:–)







銀行のロゴ



スケーリング時に見栄えがよくなるように、SVG形式でできるだけ多くのロゴをダウンロードしようとしましたが、一部のロゴはPNGでしか見つかりませんでした。 元のサイズと形式のすべてのロゴは「src / banks-logos」フォルダーにあり、すべてのSVGロゴは「dist / banks-logos」フォルダーに変更せずにコピーされ、すべてのSVGとPNGはPNGに変換され、600×にカットされました200。 一般的に、dist / banks-logosフォルダーには、各銀行のPNG形式のロゴと、SVGの一部のロゴがあります。 npm run build-banks-logos



コマンドを呼び出して設定を転送npm run build-banks-logos



により、自分でロゴをカットできます。詳細はドキュメントに記載されています。







ロゴが白の場合、形状は特に美しくなります。明るい色で形状をペイントできるためです。 そのため、可能であればロゴを編集して白に塗り直しました。 また、全ロシア地域開発銀行では、ロゴを自分で描く必要がありました。インターネット上では、ロゴが必要な形で見られなかったからです。







タイプロゴ



すべてのタイプのロゴはSVGとPNGの両方にあります。 次のタイプがあります：Visa、MasterCard、American Express、Diners Club、Discover、JCB、UnionPay、Maestro、MIR。 各タイプには、白、黒、色の3つのスタイルのロゴがあります。 最初の8つのロゴはStuart Colvilleから 、MIR支払いシステムのロゴはYevgeny Katyshevから借りて 、同じロゴを自分自身で一般的なスタイルに導きました。







CardInfoには、ロゴタイプのスタイルを定義する「brandLogoPolicy」設定があります。 彼女にとって最もクールな2つの値は、「auto」と「mono」です。 ドキュメントの残りの部分について。







オート



銀行のロゴが黒/白/色の場合、タイプロゴは黒/白/色になります。 それは印象的に見え、形は活気に満ち、その上のすべてが組み合わされています。







モノ



背景が明るい場合、タイプロゴは黒になり、背景が暗い場合、ロゴは白になります。







おわりに



CardInfoを使用すると、銀行カードを受け入れるためのクールなフォームを作成できます。 このプラグインを柔軟で便利で軽量で信頼性が高く便利なものにしようとしましたが、成功したと思います。 このプラグインをご利用いただき、お支払いページでのコンバージョンが増えることを願っています。 プラグインを使用する喜びが屋根を通り始めた場合、 Sergey Dmitrievに感謝を表す特別なページで私に感謝することができます:–)







フィードバック





More articles:


All Articles