5个最佳JavaScript动画信用卡表单(拟形)插件

本文概述

• 5. CardInfo.js
• 4. Creditly
• 3. CardJS
• 2. Skeuocard
• 1. Card
• Credit Card Payment Form

借助Stripe这样的服务, 该服务可以处理信用卡的在线付款, 因此你可以轻松地为电子商务提供动力。后端逻辑通常更容易实现为前端部分, 因为你需要考虑如何提示用户的信用卡信息。如果你今天缺乏想象力, 或者想要获得灵感(或准备实施的东西), 我们已收集了5个最不重要的开源JavaScript插件, 以实现动态动画形式, 以接收来自用户的信用卡信息。

他们中的大多数会动态加载信用卡类型的徽标, 并验证该号码是否有效。享受我们的顶级！

5. CardInfo.js

Github

使用CardInfo, 你可以创建漂亮的表格来接收来自卡的付款。在卡的前六个字符上, 将确定银行(49个字符中的一个), 表格将用银行的品牌颜色重新粉刷, 银行徽标将出现在左上角。卡的首个符号将确定卡的类型：Visa, 万事达, 美国运通, 大莱卡, Discover, JCB, 银联, Maestro或MIR。现在, 在数据库中只有俄罗斯银行, 但很快将被添加到美国, 加拿大, 英国, 澳大利亚和新西兰的银行中。

4. Creditly

Github

Creditly允许你实现直观的信用卡表单, 它为你提供了创建时尚, 直观的信用卡表单所需的一切。只需复制html, css和javascript, 即可在几秒钟内获得直观的信用卡表格。你可以免费获得信用卡验证(使用Luhn算法)！

3. CardJS

Github

CardJS是一种非常简单, 干净的信用卡表格, 适用于你的网站。包括数字格式化, 验证和自动卡类型检测。

2. Skeuocard

Github

Skeuocard是一个JavaScript插件, 可让你逐步增强信用卡形式以提供拟人界面。当你开始输入卡号时, Skeuocard会尝试将其与可接受的卡类型匹配。一旦能够做到, 它将修改卡的布局以匹配卡产品(Visa, MasterCard等), 并对发卡行进行特定的调整-例如, Chase Sapphire卡的特殊布局。

当你输入信息时, Skeuocard将从原始的未增强的表单中修改基础表单的值。它还验证每个字段以查找简单的用户错误和缺少的字段。如果卡产品在卡的两面都有字段(例如, 在背面放置CVC代码), 将提示用户翻转卡以填写其余字段：

1. Card

Github

Card是使用单行代码显示信用卡表单的更好方法：

new Card({ form: 'form', container: '.card'})

卡将采用任何信用卡形式, 并使其成为结帐流程的最佳部分(无需更改任何内容)。所有内容均使用纯CSS, HTML和Javascript创建, 因此你不需要任何图像。

Credit Card Payment Form

此代码段是一个简单的教程, 内容涉及使用javascript创建简单的付款表单, 该脚本使用正则表达式模式在用户输入值并正确应用与该品牌相关的相关间距时检测信用卡类型。

如果你知道另一个能让你实现动态动画信用卡表格的出色插件, 请在评论框中与社区共享。