├── .gitignore ├── .github └── dependabot.yml ├── .gitmodules ├── src ├── scss │ ├── browsers │ │ ├── _safari.scss │ │ └── _ie.scss │ ├── logos │ │ ├── _hipercard.scss │ │ ├── _logo.scss │ │ ├── _troy.scss │ │ ├── _dinersclub.scss │ │ ├── _visa.scss │ │ ├── _visaelectron.scss │ │ ├── _maestro.scss │ │ ├── _mastercard.scss │ │ ├── _discover.scss │ │ ├── _unionpay.scss │ │ ├── _amex.scss │ │ ├── _elo.scss │ │ ├── _jcb.scss │ │ └── _dankort.scss │ ├── cards │ │ ├── _card.scss │ │ ├── _elo.scss │ │ ├── _unionpay.scss │ │ ├── _dankort.scss │ │ ├── _jcb.scss │ │ ├── _troy.scss │ │ ├── _visa.scss │ │ ├── _visaelectron.scss │ │ ├── _hipercard.scss │ │ ├── _maestro.scss │ │ ├── _dinersclub.scss │ │ ├── _mastercard.scss │ │ ├── _amex.scss │ │ └── _discover.scss │ ├── _mixins.scss │ └── card.scss └── coffee │ ├── jquery.card.coffee │ └── card.coffee ├── dist ├── card.js.LICENSE.txt ├── jquery.card.js.LICENSE.txt ├── card.css ├── card.js └── jquery.card.js ├── bower.json ├── .npmignore ├── LICENSE ├── webpack.config.js ├── public └── index.html ├── package.json ├── CONTRIBUTING.md └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | bower_components 2 | .tmp 3 | .idea 4 | coverage 5 | node_modules 6 | lib 7 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: "npm" 4 | directory: "/" 5 | schedule: 6 | interval: "daily" 7 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "src/scss/bourbon"] 2 | path = src/scss/bourbon 3 | url = https://github.com/thoughtbot/bourbon.git 4 | [submodule "src/coffee/payment"] 5 | path = src/coffee/payment 6 | url = https://github.com/jessepollak/payment 7 | -------------------------------------------------------------------------------- /src/scss/browsers/_safari.scss: -------------------------------------------------------------------------------- 1 | .jp-card.jp-card-safari { 2 | &.jp-card-identified { 3 | .jp-card-front, .jp-card-back { 4 | &:before { 5 | @include card-texture($radial-gradient: false); 6 | } 7 | } 8 | } 9 | } -------------------------------------------------------------------------------- /src/scss/logos/_hipercard.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-hipercard { 4 | height: 20px; 5 | width: 100px; 6 | color: white; 7 | font-size: 21px; 8 | font-style: italic; 9 | font-weight: bold; 10 | 11 | &::before, &::after { 12 | display: block; 13 | position: relative; 14 | } 15 | } -------------------------------------------------------------------------------- /src/scss/cards/_card.scss: -------------------------------------------------------------------------------- 1 | $card-width: 350px; 2 | $card-height: 200px; 3 | $card-border-radius: 10px; 4 | $card-fill-color: #3399cc; 5 | $card-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 6 | $card-monospace-font-family: "Bitstream Vera Sans Mono", Consolas, Courier, 7 | monospace; 8 | $card-font-color: white; 9 | $card-transition-time: 400ms; 10 | -------------------------------------------------------------------------------- /src/scss/logos/_logo.scss: -------------------------------------------------------------------------------- 1 | $logo-height: 36px; 2 | $logo-width: 60px; 3 | $mastercard-family-name-height: 84px; 4 | 5 | @include exports("_logo.scss") { 6 | .jp-card-logo { 7 | &, &:before, &:after { 8 | box-sizing: border-box; 9 | } 10 | height: $logo-height; 11 | width: $logo-width; 12 | font-style: italic; 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/scss/cards/_elo.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/elo"; 3 | 4 | $fill-color: #6F6969; 5 | 6 | .jp-card.jp-card-elo { 7 | &.jp-card-identified { 8 | .jp-card-front, .jp-card-back { 9 | &:before { 10 | background-color: $fill-color; 11 | } 12 | } 13 | .jp-card-logo.jp-card-elo { 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/cards/_unionpay.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/unionpay"; 3 | $fill-color: #987c00; 4 | $highlight-color: #FF6600; 5 | 6 | .jp-card.jp-card-unionpay { 7 | &.jp-card-identified { 8 | .jp-card-back, 9 | .jp-card-front { 10 | &:before { 11 | background-color: $fill-color; 12 | } 13 | } 14 | 15 | .jp-card-logo.jp-card-unionpay { 16 | opacity: 1; 17 | } 18 | } 19 | } -------------------------------------------------------------------------------- /src/scss/cards/_dankort.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/dankort"; 3 | 4 | $fill-color: #0055C7; 5 | 6 | .jp-card.jp-card-dankort { 7 | &.jp-card-identified { 8 | .jp-card-front, .jp-card-back { 9 | &:before { 10 | background-color: $fill-color; 11 | } 12 | } 13 | .jp-card-logo.jp-card-dankort { 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /dist/card.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * node.extend 3 | * Copyright 2011, John Resig 4 | * Dual licensed under the MIT or GPL Version 2 licenses. 5 | * http://jquery.org/license 6 | * 7 | * @fileoverview 8 | * Port of jQuery.extend that actually works on node.js 9 | */ 10 | 11 | /**! 12 | * is 13 | * the definitive JavaScript type testing library 14 | * 15 | * @copyright 2013-2014 Enrico Marino / Jordan Harband 16 | * @license MIT 17 | */ 18 | -------------------------------------------------------------------------------- /src/scss/cards/_jcb.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/jcb"; 3 | 4 | $fill-color: #CB8000; 5 | 6 | .jp-card.jp-card-jcb { 7 | &.jp-card-identified { 8 | .jp-card-front, .jp-card-back { 9 | &:before { 10 | background-color: $fill-color; 11 | } 12 | } 13 | .jp-card-logo.jp-card-jcb { 14 | opacity: 1; 15 | box-shadow: none; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /dist/jquery.card.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /*! 2 | * node.extend 3 | * Copyright 2011, John Resig 4 | * Dual licensed under the MIT or GPL Version 2 licenses. 5 | * http://jquery.org/license 6 | * 7 | * @fileoverview 8 | * Port of jQuery.extend that actually works on node.js 9 | */ 10 | 11 | /**! 12 | * is 13 | * the definitive JavaScript type testing library 14 | * 15 | * @copyright 2013-2014 Enrico Marino / Jordan Harband 16 | * @license MIT 17 | */ 18 | -------------------------------------------------------------------------------- /src/scss/cards/_troy.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/troy"; 3 | 4 | $fill-color: #01adba; 5 | 6 | .jp-card.jp-card-troy { 7 | &.jp-card-identified { 8 | .jp-card-front, .jp-card-back { 9 | &:before { 10 | background-color: $fill-color; 11 | } 12 | } 13 | .jp-card-logo.jp-card-troy { 14 | opacity: 1; 15 | box-shadow: none; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/cards/_visa.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/visa"; 3 | 4 | $fill-color: #191278; 5 | 6 | .jp-card.jp-card-visa { 7 | &.jp-card-identified { 8 | .jp-card-front, .jp-card-back { 9 | &:before { 10 | background-color: $fill-color; 11 | } 12 | } 13 | .jp-card-logo.jp-card-visa { 14 | opacity: 1; 15 | box-shadow: none; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/cards/_visaelectron.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/visaelectron"; 3 | 4 | $fill-color: #191278; 5 | 6 | .jp-card.jp-card-visaelectron { 7 | &.jp-card-identified { 8 | .jp-card-front, .jp-card-back { 9 | &:before { 10 | background-color: $fill-color; 11 | } 12 | } 13 | .jp-card-logo.jp-card-visaelectron { 14 | opacity: 1; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/cards/_hipercard.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/hipercard"; 3 | 4 | $fill-color: #770304; 5 | 6 | .jp-card.jp-card-hipercard { 7 | &.jp-card-identified { 8 | .jp-card-front, .jp-card-back { 9 | &:before { 10 | background-color: $fill-color; 11 | } 12 | } 13 | .jp-card-logo.jp-card-hipercard { 14 | opacity: 1; 15 | box-shadow: none; 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/cards/_maestro.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/maestro"; 3 | 4 | $fill-color: #0B2C5F; 5 | 6 | .jp-card.jp-card-maestro { 7 | &.jp-card-identified { 8 | .jp-card-front, .jp-card-back { 9 | .jp-card-logo.jp-card-maestro { 10 | box-shadow: none; 11 | } 12 | &:before { 13 | background-color: $fill-color; 14 | } 15 | } 16 | .jp-card-logo.jp-card-maestro { 17 | opacity: 1; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/scss/cards/_dinersclub.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/dinersclub"; 3 | 4 | $fill-color: #999; 5 | 6 | .jp-card.jp-card-dinersclub .jp-card-front .jp-card-logo { 7 | box-shadow: none !important; 8 | } 9 | 10 | .jp-card.jp-card-dinersclub { 11 | &.jp-card-identified { 12 | .jp-card-front, .jp-card-back { 13 | &:before { 14 | background-color: $fill-color; 15 | } 16 | } 17 | .jp-card-logo.jp-card-dinersclub { 18 | opacity: 1; 19 | } 20 | } 21 | } -------------------------------------------------------------------------------- /src/scss/cards/_mastercard.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/mastercard"; 3 | 4 | $fill-color: #0061A8; 5 | 6 | .jp-card.jp-card-mastercard { 7 | &.jp-card-identified { 8 | .jp-card-front, .jp-card-back { 9 | .jp-card-logo.jp-card-mastercard { 10 | box-shadow: none; 11 | } 12 | &:before { 13 | background-color: $fill-color; 14 | } 15 | } 16 | .jp-card-logo.jp-card-mastercard { 17 | opacity: 1; 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "card", 3 | "homepage": "https://github.com/jessepollak/card", 4 | "authors": ["Jesse Pollak "], 5 | "description": "Card let's you add an interactive, CSS3 credit card animation to your credit card form to help your users through the process.", 6 | "main": ["dist/card.js"], 7 | "keywords": ["card", "credit", "card", "form"], 8 | "dependencies": { 9 | "jquery": ">=1.5" 10 | }, 11 | "license": "MIT", 12 | "ignore": ["**/.*", "node_modules", "example", "test", "tests"], 13 | "version": "2.5.0" 14 | } 15 | -------------------------------------------------------------------------------- /src/scss/logos/_troy.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-troy { 4 | text-transform: lowercase; 5 | color: #fff; 6 | text-align: center; 7 | font-weight: 700; 8 | font-size: 24px; 9 | line-height: 18px; 10 | margin-top: 5px; 11 | 12 | 13 | &:before, &:after { 14 | content: \"\"; 15 | display: block; 16 | width: 26%; 17 | height: 6%; 18 | background: #22b8c3; 19 | right: 32%; 20 | top: 24%; 21 | position: absolute; 22 | transform: rotate(105deg); 23 | } 24 | 25 | } 26 | -------------------------------------------------------------------------------- /src/scss/logos/_dinersclub.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-dinersclub { 4 | font-family: serif; 5 | height: 40px; 6 | width: 100px; 7 | color: white; 8 | font-size: 17px; 9 | font-style: normal; 10 | letter-spacing: 1px; 11 | 12 | &::before, &::after { 13 | display: block; 14 | position: relative; 15 | } 16 | 17 | &::before { 18 | content: 'Diners Club'; 19 | } 20 | 21 | &::after { 22 | content: 'International'; 23 | text-transform: uppercase; 24 | font-size: 0.6em; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/coffee/jquery.card.coffee: -------------------------------------------------------------------------------- 1 | Card = require './card' 2 | $ = require('jquery') 3 | 4 | $.card = {} 5 | $.card.fn = {} 6 | $.fn.card = (opts) -> 7 | $.card.fn.construct.apply(this, opts) 8 | 9 | $.fn.extend card: (option, args...) -> 10 | @each -> 11 | $this = $(this) 12 | data = $this.data('card') 13 | 14 | if !data 15 | $.each option, (key, value) => 16 | if value instanceof jQuery 17 | option[key] = value[0] 18 | option['form'] = this 19 | $this.data 'card', (data = new Card(option)) 20 | if typeof option == 'string' 21 | data[option].apply(data, args) 22 | -------------------------------------------------------------------------------- /src/scss/logos/_visa.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-visa { 4 | // display: none; 5 | text-transform: uppercase; 6 | color: white; 7 | text-align: center; 8 | font-weight: bold; 9 | font-size: 24px; 10 | line-height: 18px; 11 | margin-top:5px; 12 | 13 | 14 | &:before, &:after { 15 | content: " "; 16 | display: block; 17 | width: 100%; 18 | height: 25%; 19 | } 20 | 21 | &:before { 22 | position:absolute; 23 | left:-4px; 24 | width: 0; 25 | height: 0; 26 | border-style: solid; 27 | border-width: 0 12px 6px 0; 28 | border-color: transparent #ffffff transparent transparent; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/scss/cards/_amex.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/amex"; 3 | 4 | $fill-color: #108168; 5 | 6 | .jp-card.jp-card-amex { 7 | 8 | &.jp-card-flipped{ 9 | @include transform(none); 10 | } 11 | 12 | &.jp-card-identified { 13 | .jp-card-front, .jp-card-back { 14 | &:before { 15 | background-color: $fill-color; 16 | } 17 | } 18 | 19 | .jp-card-front { 20 | 21 | .jp-card-logo.jp-card-amex { 22 | opacity: 1; 23 | } 24 | 25 | .jp-card-cvc { 26 | visibility: visible; 27 | } 28 | 29 | &:after { 30 | opacity: 1; 31 | } 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | # Automatically ignored per: 2 | # https://www.npmjs.org/doc/developers.html#Keeping-files-out-of-your-package 3 | # 4 | # .*.swp 5 | # ._* 6 | # .DS_Store 7 | # .git 8 | # .hg 9 | # .lock-wscript 10 | # .svn 11 | # .wafpickle-* 12 | # CVS 13 | # npm-debug.log 14 | # node_modules 15 | 16 | *.seed 17 | *.log 18 | *.csv 19 | *.dat 20 | *.out 21 | *.pid 22 | *.gz 23 | *.orig 24 | *.jql.js 25 | 26 | work 27 | build 28 | src 29 | test 30 | spec 31 | pids 32 | logs 33 | results 34 | coverage 35 | lib-cov 36 | html-report 37 | xunit.xml 38 | 39 | .project 40 | .idea 41 | .settings 42 | .iml 43 | *.sublime-workspace 44 | *.sublime-project 45 | 46 | ehthumbs.db 47 | Icon? 48 | Thumbs.db 49 | .AppleDouble 50 | .LSOverride 51 | .Spotlight-V100 52 | .Trashes 53 | -------------------------------------------------------------------------------- /src/scss/logos/_visaelectron.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-visaelectron { 4 | // display: none; 5 | $blue: #1A1876; 6 | $yellow: #E79800; 7 | background: white; 8 | text-transform: uppercase; 9 | color: $blue; 10 | text-align: center; 11 | font-weight: bold; 12 | font-size: 15px; 13 | line-height: 18px; 14 | 15 | 16 | &:before, &:after { 17 | content: " "; 18 | display: block; 19 | width: 100%; 20 | height: 25%; 21 | } 22 | 23 | &:before { 24 | background: $blue; 25 | } 26 | 27 | &:after { 28 | background: $yellow; 29 | } 30 | .elec { 31 | float: right; 32 | font-family: arial; 33 | font-size: 9px; 34 | margin-right: 1px; 35 | margin-top: -5px; 36 | text-transform: none; 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/scss/browsers/_ie.scss: -------------------------------------------------------------------------------- 1 | .jp-card.jp-card-ie-10, .jp-card.jp-card-ie-11 { 2 | &.jp-card-flipped { 3 | @include transform(0deg); 4 | .jp-card-front { 5 | @include transform(rotateY(0deg)); 6 | } 7 | .jp-card-back { 8 | @include transform(rotateY(0deg)); 9 | 10 | &:after { 11 | left: 18%; 12 | } 13 | 14 | .jp-card-cvc { 15 | @include transform(rotateY(180deg)); 16 | left: 5%; 17 | } 18 | 19 | .jp-card-shiny { 20 | left: 84%; 21 | &:after { 22 | left: -480%; 23 | @include transform(rotateY(180deg)); 24 | } 25 | } 26 | } 27 | } 28 | } 29 | .jp-card.jp-card-ie-10.jp-card-amex .jp-card-back, .jp-card.jp-card-ie-11.jp-card-amex .jp-card-back { 30 | display: none; 31 | } 32 | -------------------------------------------------------------------------------- /src/scss/logos/_maestro.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-maestro { 4 | // display: none; 5 | $blue: #EB001B; 6 | $red: #00A2E5; 7 | $offset: 0; 8 | color: white; 9 | font-style: normal; 10 | text-transform: lowercase; 11 | font-weight: bold; 12 | text-align: center; 13 | font-size: 14px; 14 | line-height: $mastercard-family-name-height; 15 | z-index: 1; 16 | text-shadow: 1px 1px rgba(0, 0, 0, .6); 17 | &:before, &:after { 18 | content: " "; 19 | display: block; 20 | width: $logo-height; 21 | top: 0; 22 | position: absolute; 23 | height: $logo-height; 24 | border-radius: $logo-height / 2; 25 | } 26 | 27 | &:before { 28 | left: $offset; 29 | background: $blue; 30 | z-index: -2; 31 | } 32 | 33 | &:after { 34 | right: $offset; 35 | background: $red; 36 | z-index: -1; 37 | opacity: 0.8; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/scss/logos/_mastercard.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-mastercard { 4 | // display: none; 5 | $red: #EB001B; 6 | $yellow: #FF5F00; 7 | $offset: 0; 8 | color: white; 9 | font-style: normal; 10 | text-transform: lowercase; 11 | font-weight: bold; 12 | text-align: center; 13 | font-size: 9px; 14 | line-height: $mastercard-family-name-height; 15 | z-index: 1; 16 | text-shadow: 1px 1px rgba(0, 0, 0, .6); 17 | &:before, &:after { 18 | content: " "; 19 | display: block; 20 | width: $logo-height; 21 | top: 0; 22 | position: absolute; 23 | height: $logo-height; 24 | border-radius: $logo-height / 2; 25 | } 26 | 27 | &:before { 28 | left: $offset; 29 | background: $red; 30 | z-index: -1; 31 | opacity: 0.9; 32 | } 33 | 34 | &:after { 35 | right: $offset; 36 | background: $yellow; 37 | z-index: -2; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 Jesse Pollak 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /src/scss/logos/_discover.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-discover { 4 | $orange: #FF6600; 5 | $offset: 9px; 6 | background: $orange; 7 | color: #111; 8 | text-transform: uppercase; 9 | font-style: normal; 10 | font-weight: bold; 11 | font-size: 10px; 12 | text-align: center; 13 | overflow: hidden; 14 | z-index: 1; 15 | padding-top: $offset; 16 | letter-spacing: .03em; 17 | border: 1px solid #EEE; 18 | 19 | &:before, &:after { 20 | content: " "; 21 | display: block; 22 | position: absolute; 23 | } 24 | 25 | &:before { 26 | $size: 200px; 27 | background: white; 28 | width: $size; 29 | height: $size; 30 | border-radius: $size; 31 | bottom: -5%; 32 | right: -80%; 33 | z-index: -1; 34 | } 35 | 36 | &:after { 37 | $size: 8px; 38 | width: $size; 39 | height: $size; 40 | border-radius: $size /2; 41 | top: $offset + 1; 42 | left: 27px; 43 | @include radial-gradient($orange, #fff); 44 | content: "network"; 45 | font-size: 4px; 46 | line-height: 24px; 47 | text-indent: -7px; 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/scss/logos/_unionpay.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-unionpay { 4 | $red: #e21836; 5 | $offset: 0; 6 | $size: 40px; 7 | width: $size + 20; 8 | display: block; 9 | height: $size; 10 | background: $red; 11 | -webkit-transform: skew(-15deg); 12 | -moz-transform: skew(20deg); 13 | -o-transform: skew(20deg); 14 | border-radius: 5px; 15 | font-size: 10px; 16 | z-index: 1; 17 | line-height: 33px; 18 | color: #fff; 19 | text-align: center; 20 | font-family: "Sans-serif", "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", "Hiragino Sans", "Gulim", "\5B8B\4F53"; 21 | font-weight: bold; 22 | 23 | &:after, 24 | &:before { 25 | display: block; 26 | margin: $offset auto; 27 | position: absolute; 28 | height: $size; 29 | top: $offset; 30 | z-index: -1; 31 | } 32 | 33 | &:before { 34 | content: " "; 35 | width: $size - 12; 36 | background: #00447c; 37 | left: 14px; 38 | border-top-left-radius: 5px; 39 | border-bottom-left-radius: 5px; 40 | } 41 | 42 | &:after { 43 | content: "银联"; 44 | width: $size - 14; 45 | background: #007b84; 46 | left: 34px; 47 | border-radius: 5px; 48 | font-size: 10px; 49 | line-height: 54px; 50 | text-indent: -17px; 51 | } 52 | } -------------------------------------------------------------------------------- /src/scss/logos/_amex.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-amex { 4 | $box-offset: 8px; 5 | $box-width: $logo-height - $box-offset; 6 | $box-height: $box-width; 7 | $font-size: 4px; 8 | $font-padding: 2px; 9 | 10 | text-transform: uppercase; 11 | 12 | font-size: $font-size; 13 | font-weight: bold; 14 | color: white; 15 | 16 | @include background-image(repeating-radial-gradient(circle at center, #FFF 1px, #999 2px)); 17 | border: 1px solid #EEE; 18 | 19 | &:before, &:after { 20 | width: $box-width; 21 | display: block; 22 | position: absolute; 23 | left: ($logo-width - $box-width) / 2; 24 | } 25 | 26 | &:before { 27 | $blue: #267AC3; 28 | height: $box-height; 29 | content: "american"; 30 | // box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.6); 31 | top: $box-offset / 2 - 1; 32 | text-align: left; 33 | padding-left: $font-padding; 34 | padding-top: $box-height / 2 - $font-size + 1; 35 | background: $blue; 36 | } 37 | 38 | &:after { 39 | content: "express"; 40 | bottom: $box-height / 2 - $font-size + 1; 41 | text-align: right; 42 | padding-right: $font-padding; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/scss/cards/_discover.scss: -------------------------------------------------------------------------------- 1 | @import "card"; 2 | @import "../logos/discover"; 3 | 4 | $fill-color: #86B8CF; 5 | $highlight-color: #FF6600; 6 | 7 | .jp-card { 8 | .jp-card-front .jp-card-logo.jp-card-discover { 9 | right: 12%; 10 | top: 18%; 11 | } 12 | } 13 | 14 | .jp-card.jp-card-discover { 15 | 16 | &.jp-card-identified { 17 | .jp-card-front, .jp-card-back { 18 | &:before { 19 | background-color: $fill-color; 20 | } 21 | } 22 | .jp-card-logo.jp-card-discover { 23 | opacity: 1; 24 | } 25 | 26 | .jp-card-front { 27 | &:after { 28 | $size: 50px; 29 | @include transition($card-transition-time); 30 | @include shape(); 31 | @include linear-gradient($highlight-color, lighten($highlight-color, 20%), $highlight-color); 32 | height: $size; 33 | width: $size; 34 | border-radius: $size / 2; 35 | position: absolute; 36 | left: 100%; 37 | top: 15%; 38 | margin-left: -$size / 2; 39 | box-shadow: inset 1px 1px 3px 1px rgba(0, 0, 0, .5); 40 | } 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/scss/logos/_elo.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-elo { 4 | height: 50px; 5 | width: 50px; 6 | border-radius: 100%; 7 | background: black; 8 | color: white; 9 | text-align: center; 10 | text-transform: lowercase; 11 | font-size: 21px; 12 | font-style: normal; 13 | letter-spacing: 1px; 14 | font-weight: bold; 15 | padding-top: 13px; 16 | 17 | .e, .l, .o { 18 | display: inline-block; 19 | position: relative; 20 | } 21 | 22 | .e { 23 | @include transform(rotate(-15deg)); 24 | } 25 | 26 | .o { 27 | position: relative; 28 | display: inline-block; 29 | width: 12px; 30 | height: 12px; 31 | right: 0; 32 | top: 7px; 33 | border-radius: 100%; 34 | @include background-image(linear-gradient(yellow 50%, red 50%)); 35 | @include transform(rotate(40deg)); 36 | text-indent: -9999px; 37 | 38 | &:before { 39 | content: ""; 40 | position: absolute; 41 | width: 49%; 42 | height: 49%; 43 | background: black; 44 | border-radius: 100%; 45 | text-indent: -99999px; 46 | top: 25%; 47 | left: 25%; 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var webpack = require("webpack"); 2 | var _ = require("underscore"); 3 | 4 | var baseConfig = { 5 | mode: "production", 6 | resolve: { 7 | extensions: [".js", ".coffee", ".scss"], 8 | }, 9 | entry: "./src/coffee/card.coffee", 10 | output: { 11 | path: __dirname + "/dist/", 12 | filename: "card.js", 13 | library: "card", 14 | libraryTarget: "var", 15 | }, 16 | module: { 17 | rules: [ 18 | { 19 | test: /\.scss/, 20 | use: [ 21 | "style-loader", 22 | "css-loader", 23 | { 24 | loader: "sass-loader", 25 | options: { 26 | implementation: require("node-sass"), 27 | sassOptions: { 28 | outputStyle: "compressed", 29 | }, 30 | }, 31 | }, 32 | ], 33 | }, 34 | { test: /\.coffee$/, loader: "coffee-loader" }, 35 | ], 36 | }, 37 | }; 38 | 39 | var jQueryConfig = _.defaults( 40 | { 41 | entry: "./src/coffee/jquery.card.coffee", 42 | output: { 43 | path: __dirname + "/dist/", 44 | filename: "jquery.card.js", 45 | library: "card", 46 | libraryTarget: "var", 47 | }, 48 | externals: { 49 | jquery: "jQuery", 50 | }, 51 | }, 52 | baseConfig 53 | ); 54 | 55 | module.exports = [baseConfig, jQueryConfig]; 56 | -------------------------------------------------------------------------------- /src/scss/logos/_jcb.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-jcb { 4 | @mixin jcb-radius($jcbradius) { 5 | border-radius: $jcbradius 0px $jcbradius 0px; 6 | -moz-border-radius: $jcbradius 0px $jcbradius 0px; 7 | -webkit-border-radius: $jcbradius 0px $jcbradius 0px; 8 | } 9 | $logo-padding:2px; $logo-margin:3px; 10 | $j-left : #000063; $j-right: #008cff; 11 | $c-left : #630000; $c-right: #ff008d; 12 | $b-left : #006300; $b-right: #00ff00; 13 | 14 | @include jcb-radius( 5px ); 15 | background-color: white; 16 | font-style:normal; 17 | color:white; 18 | width:50px; 19 | padding:$logo-padding 0 0 $logo-padding; 20 | > div { 21 | width: 15px ; 22 | margin-right:1px; 23 | display:inline-block; 24 | text-align:center; 25 | text-shadow:1px 1px rgba(0, 0, 0, 0.6); 26 | @include jcb-radius( 5px ); 27 | &:before, &:after { 28 | content: " "; 29 | display: block; 30 | height: 8px; 31 | } 32 | 33 | &.j { 34 | @include linear-gradient( to right , $j-left, $j-right); 35 | } 36 | &.c { 37 | @include linear-gradient( to right , $c-left, $c-right); 38 | } 39 | &.b { 40 | @include linear-gradient( to right , $b-left, $b-right); 41 | } 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Card – the better way to collect credit cards 6 | 7 | 8 | 9 | 10 | 11 | 28 |
29 |
30 | 31 |
32 |
33 | 34 | 35 | 36 | 37 |
38 |
39 |
40 | 41 | 42 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "card", 3 | "version": "2.5.4", 4 | "author": "Jesse Pollak ", 5 | "description": "Card lets you add an interactive, CSS3 credit card animation to your credit card form to help your users through the process.", 6 | "main": "lib/card.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/jessepollak/card" 10 | }, 11 | "contributors": [ 12 | { 13 | "name": "Jesse Pollak", 14 | "email": "jpollak92@gmail.com" 15 | }, 16 | { 17 | "name": "Melloware", 18 | "email": "mellowaredev@gmail.com" 19 | }, 20 | { 21 | "name": "Daniel Juhl", 22 | "email": "danieljuhl@gmail.com" 23 | } 24 | ], 25 | "scripts": { 26 | "clean": "rimraf ./lib/ && rimraf ./dist/", 27 | "compile": "npm run clean && npm run compile:lib && npm run compile:dist && npm run compile:styles", 28 | "compile:lib": "coffee --compile -o ./lib/ ./src/coffee/card.coffee && node-sass ./src/scss/card.scss -o lib/ && replace '../scss/card.scss' './card.css' lib/card.js", 29 | "compile:dist": "npm run env NODE_ENV=production && webpack", 30 | "compile:styles": "node-sass ./src/scss/card.scss -o ./dist/ --output-style compressed", 31 | "development": "webpack-dev-server --hot", 32 | "preversion": "npm run compile", 33 | "prepublish": "npm run env NODE_ENV=production && npm run compile", 34 | "postpublish": "git push origin master && git push --tags", 35 | "test": "karma start --single-run --browsers PhantomJS" 36 | }, 37 | "devDependencies": { 38 | "bower": "^1.8.12", 39 | "coffee-loader": "^4.0.0", 40 | "coffee-script": "~1.12.7", 41 | "css-loader": "^6.7.2", 42 | "event-stream": "^4.0.1", 43 | "glob": "^8.0.3", 44 | "jquery": "^3.6.0", 45 | "node-sass": "^8.0.0", 46 | "nodemon": "^2.0.7", 47 | "replace": "^1.2.1", 48 | "rimraf": "^4.0.4", 49 | "run-sequence": "~2.2.1", 50 | "sass-loader": "^13.2.0", 51 | "style-loader": "^3.3.1", 52 | "underscore": "^1.12.1", 53 | "vinyl-source-stream": "^2.0.0", 54 | "webpack": "^5.75.0", 55 | "webpack-cli": "^5.0.0", 56 | "webpack-dev-server": "^4.11.1" 57 | }, 58 | "dependencies": { 59 | "node.extend": "~2.0.2", 60 | "payment": "^2.4.6", 61 | "qj": "^2.0.0" 62 | }, 63 | "engines": { 64 | "node": ">=16.0.0" 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/scss/logos/_dankort.scss: -------------------------------------------------------------------------------- 1 | @import "logo"; 2 | 3 | .jp-card-logo.jp-card-dankort { 4 | $white: #FFFFFF; 5 | $black: #000000; 6 | $red: #ED1C24; 7 | $padding: 3px; 8 | $radius: 8px; 9 | 10 | $inner-height: $logo-height - ($padding * 2) - 2; // height - padding - border 11 | $letter-height: $inner-height * 0.55; 12 | 13 | width: $logo-width; 14 | height: $logo-height; 15 | padding: $padding; 16 | border-radius: $radius; 17 | border: $black 1px solid; 18 | background-color: $white; 19 | 20 | .dk { 21 | position: relative; 22 | width: 100%; 23 | height: 100%; 24 | 25 | overflow: hidden; 26 | 27 | &:before { 28 | background-color: $red; 29 | content: ''; 30 | position: absolute; 31 | width: 100%; 32 | height: 100%; 33 | display: block; 34 | border-radius: $radius*0.75; 35 | } 36 | &:after { 37 | content: ''; 38 | position: absolute; 39 | top: 50%; 40 | margin-top: -($letter-height/2); 41 | right: 0; 42 | width: 0; 43 | height: 0; 44 | border-style: solid; 45 | border-width: 7px 7px 10px 0; 46 | border-color: transparent $red transparent transparent; 47 | z-index: 1; 48 | } 49 | } 50 | 51 | .d, .k { 52 | position: absolute; 53 | top: 50%; 54 | width: 50%; 55 | display: block; 56 | height: $letter-height; 57 | margin-top: -($letter-height/2); 58 | background: white; 59 | } 60 | .d { 61 | left: 0; 62 | border-radius: 0 8px 10px 0; 63 | &:before { 64 | content: ''; 65 | position: absolute; 66 | top: 50%; 67 | left: 50%; 68 | display: block; 69 | background: $red; 70 | border-radius: 2px 4px 6px 0px; 71 | height: 5px; 72 | width: 7px; 73 | margin: -3px 0 0 -4px; 74 | } 75 | } 76 | .k { 77 | right: 0; 78 | 79 | &:before, &:after { 80 | content: ''; 81 | position: absolute; 82 | right: 50%; 83 | width: 0; 84 | height: 0; 85 | border-style: solid; 86 | margin-right: -1px; 87 | } 88 | 89 | &:before { 90 | top: 0; 91 | border-width: 8px 5px 0 0; 92 | border-color: $red transparent transparent transparent; 93 | } 94 | 95 | &:after { 96 | bottom: 0; 97 | border-width: 0 5px 8px 0; 98 | border-color: transparent transparent $red transparent; 99 | } 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Welcome 2 | 3 | Welcome to the Card contributor guidelines. We are *so happy to have you*. No matter who you are or what your contributing background is, we want this to be a safe, fun place for you to help out. 4 | 5 | Card follows the [Clef code of conduct](https://github.com/clef/code-of-conduct) and violations are taken very seriously. If you seem something wrong, please don't hesitate to reach out to [@jessepollak](http://twitter.com/jessepollak) through their email on Github. 6 | 7 | There is also a strict *no meanness* rule. At every step, please be kind and inclusive, even if people are asking not-so-informed questions. 8 | 9 | # How do I set up for development? 10 | 11 | Here's how you can get started developing locally: 12 | 13 | $ git clone --recursive https://github.com/jessepollak/card.git 14 | $ cd card 15 | $ git submodule init && git submodule update 16 | $ npm install 17 | $ npm start 18 | 19 | Now, if you go to localhost:8080/example in your browser, you should see the demo page. 20 | 21 | # How to contribute 22 | 23 | Here are the basic steps to get started contributing: 24 | 25 | 1. Fork then clone the repo and get development running on your computer. You can find instructions for setting up your development environment above. 26 | 2. Replicate the issue you're trying to fix or spec out the feature you're trying to add. Understanding the scope of what you're fixing or adding is important and upfront thought helps. 27 | 3. Change the code to fix the bug or add the feature. All changes should happen in the relevant `*.coffee` and `*.scss` files. All `*.js` files are automatically build. 28 | 4. Verify that your fix or feature works. 29 | 5. Run `NODE_ENV=production gulp build` to build your changes in the production build 30 | 6. Commit your changes with an informative description 31 | 7. Open a pull request to [the primary repo](https://github.com/jessepollak/card) with your new commit and a descriptive message about what the PR does. 32 | 33 | # What can I contribute? 34 | 35 | Check out the [issues](http://github.com/jessepollak/card/issues) for a comprehensive list of unfixed bugs and desired features. 36 | 37 | ## Are you new? 38 | 39 | If you're new to open source software, it can be really scary to get started. Believe me, we've all been there. 40 | 41 | To make it a little less scary, we've tagged a bunch of issues with `good-first-PR` tags. These issues or features are ones that we think will be approachable for a new contributor to the project (or to open source in general). They have a ton of information in the issue that should make it easy to get started. 42 | 43 | If you want to tackle one of these issues, we are here to help you! Ping [@jessepollak](http://twitter.com/jessepollak) and he'll walk you through everything you need to know to get started. 44 | -------------------------------------------------------------------------------- /src/scss/_mixins.scss: -------------------------------------------------------------------------------- 1 | // IMPORT ONCE 2 | // We use this to prevent styles from being loaded multiple times for compenents that rely on other components. 3 | $modules: () !default; 4 | @mixin exports($name) { 5 | // Import from global scope 6 | $modules: $modules !global; 7 | // Check if a module is already on the list 8 | $module_index: index($modules, $name); 9 | @if (($module_index == null) or ($module_index == false)) { 10 | $modules: append($modules, $name) !global; 11 | @content; 12 | } 13 | } 14 | 15 | @mixin shape() { 16 | content: " "; 17 | display: block; 18 | } 19 | 20 | @mixin card-texture($radial-gradient: true) { 21 | $b1: rgba(255, 255, 255, 0); 22 | $b2: opacify($b1, .03); 23 | $b3: opacify($b1, .04); 24 | $b4: opacify($b1, .05); 25 | 26 | @if ($radial-gradient) { 27 | @include background-image( 28 | repeating-linear-gradient(45deg, 29 | $b1 1px, $b2 2px, 30 | $b3 3px, $b4 4px 31 | ), 32 | repeating-linear-gradient(135deg, 33 | $b4 1px, $b1 2px, 34 | $b3 3px, $b2 4px 35 | ), 36 | repeating-linear-gradient(90deg, 37 | $b1 1px, $b2 2px, 38 | $b3 3px, $b4 4px 39 | ), 40 | repeating-linear-gradient(210deg, 41 | $b1 1px, $b2 2px, 42 | $b3 3px, $b4 4px 43 | ), 44 | repeating-radial-gradient(circle at 30% 30%, 45 | $b1 1px, $b2 2px, 46 | $b3 3px, $b4 4px 47 | ), 48 | repeating-radial-gradient(circle at 70% 70%, 49 | $b1 1px, $b2 2px, 50 | $b3 3px, $b4 4px 51 | ), 52 | repeating-radial-gradient(circle at 90% 20%, 53 | $b1 1px, $b2 2px, 54 | $b3 3px, $b4 4px 55 | ), 56 | repeating-radial-gradient(circle at 15% 80%, 57 | $b1 1px, $b2 2px, 58 | $b3 3px, $b4 4px 59 | ), 60 | linear-gradient(-25deg, $b1 50%, opacify($b1, .2) 70%, $b1 90%) 61 | ); 62 | } @else { 63 | @include background-image( 64 | repeating-linear-gradient(45deg, 65 | $b1 1px, $b2 2px, 66 | $b3 3px, $b4 4px 67 | ), 68 | repeating-linear-gradient(135deg, 69 | $b4 1px, $b1 2px, 70 | $b3 3px, $b2 4px 71 | ), 72 | repeating-linear-gradient(90deg, 73 | $b1 1px, $b2 2px, 74 | $b3 3px, $b4 4px 75 | ), 76 | repeating-linear-gradient(210deg, 77 | $b1 1px, $b2 2px, 78 | $b3 3px, $b4 4px 79 | ), 80 | linear-gradient(-25deg, $b1 50%, opacify($b1, .2) 70%, $b1 90%) 81 | ); 82 | } 83 | } -------------------------------------------------------------------------------- /src/scss/card.scss: -------------------------------------------------------------------------------- 1 | @import "bourbon/app/assets/stylesheets/bourbon"; 2 | @import "mixins"; 3 | 4 | // browser specific hacks 5 | @import "browsers/safari"; 6 | @import "browsers/ie"; 7 | @import "cards/amex"; 8 | @import "cards/discover"; 9 | @import "cards/unionpay"; 10 | @import "cards/visa"; 11 | @import "cards/visaelectron"; 12 | @import "cards/mastercard"; 13 | @import "cards/maestro"; 14 | @import "cards/dankort"; 15 | @import "cards/elo"; 16 | @import "cards/jcb"; 17 | @import "cards/dinersclub"; 18 | @import "cards/hipercard"; 19 | @import "cards/troy"; 20 | 21 | .jp-card-container { 22 | @include perspective(1000px); 23 | width: $card-width; 24 | max-width: 100%; 25 | height: $card-height; 26 | margin: auto; 27 | z-index: 1; 28 | position: relative; 29 | } 30 | 31 | .jp-card { 32 | font-family: $card-font-family; 33 | line-height: 1; 34 | position: relative; 35 | width: 100%; 36 | height: 100%; 37 | min-width: 315px; 38 | border-radius: $card-border-radius; 39 | 40 | & > *, 41 | & > *:after, 42 | & > *:before { 43 | -moz-box-sizing: border-box; 44 | -webkit-box-sizing: border-box; 45 | box-sizing: border-box; 46 | font-family: inherit; 47 | } 48 | @include transform-style(preserve-3d); 49 | @include transition(all $card-transition-time linear); 50 | 51 | &.jp-card-flipped { 52 | @include transform(rotateY(180deg)); 53 | } 54 | 55 | .jp-card-back, 56 | .jp-card-front { 57 | @include backface-visibility(hidden); 58 | @include transform-style(preserve-3d); 59 | @include transition(all $card-transition-time linear); 60 | width: 100%; 61 | height: 100%; 62 | position: absolute; 63 | top: 0; 64 | left: 0; 65 | overflow: hidden; 66 | border-radius: $card-border-radius; 67 | background: #ddd; 68 | 69 | &:before { 70 | @include shape(); 71 | position: absolute; 72 | width: 100%; 73 | height: 100%; 74 | top: 0; 75 | left: 0; 76 | opacity: 0; 77 | border-radius: 10px; 78 | @include transition(all $card-transition-time ease); 79 | } 80 | 81 | &:after { 82 | @include shape(); 83 | } 84 | 85 | .jp-card-display { 86 | color: $card-font-color; 87 | font-weight: normal; 88 | opacity: 0.5; 89 | @include transition(opacity $card-transition-time linear); 90 | 91 | &.jp-card-focused { 92 | opacity: 1; 93 | font-weight: 700; 94 | 95 | &.valid { 96 | } 97 | } 98 | } 99 | 100 | .jp-card-cvc { 101 | font-family: $card-monospace-font-family; 102 | font-size: 14px; 103 | } 104 | 105 | .jp-card-shiny { 106 | $color: #ccc; 107 | $radius: 5px; 108 | width: 50px; 109 | height: 35px; 110 | border-radius: $radius; 111 | background: $color; 112 | position: relative; 113 | 114 | &:before { 115 | @include shape(); 116 | $height: 60%; 117 | width: 70%; 118 | height: $height; 119 | border-top-right-radius: $radius; 120 | border-bottom-right-radius: $radius; 121 | background: lighten($color, 5%); 122 | position: absolute; 123 | top: (100% - $height) / 2; 124 | } 125 | } 126 | } 127 | 128 | .jp-card-front { 129 | .jp-card-logo { 130 | position: absolute; 131 | opacity: 0; 132 | right: 5%; 133 | top: 8%; 134 | @include transition($card-transition-time); 135 | } 136 | 137 | .jp-card-lower { 138 | $width: 80%; 139 | width: $width; 140 | position: absolute; 141 | left: (100% - $width) / 2; 142 | bottom: 30px; 143 | @media only screen and (max-width: 480px) { 144 | width: 90%; 145 | left: 5%; 146 | } 147 | 148 | .jp-card-cvc { 149 | visibility: hidden; 150 | float: right; 151 | position: relative; 152 | bottom: 5px; 153 | } 154 | 155 | .jp-card-number { 156 | font-family: $card-monospace-font-family; 157 | font-size: 24px; 158 | clear: both; 159 | margin-bottom: 30px; 160 | } 161 | 162 | .jp-card-expiry { 163 | font-family: $card-monospace-font-family; 164 | $label-padding: 5px; 165 | letter-spacing: 0; 166 | position: relative; 167 | float: right; 168 | width: 25%; 169 | 170 | &:after, 171 | &:before { 172 | font-family: $card-font-family; 173 | font-weight: bold; 174 | font-size: 7px; 175 | white-space: pre; 176 | display: block; 177 | opacity: 0.5; 178 | } 179 | 180 | &:before { 181 | content: attr(data-before); 182 | margin-bottom: $label-padding - 3px; 183 | font-size: 7px; 184 | text-transform: uppercase; 185 | } 186 | 187 | &:after { 188 | position: absolute; 189 | content: attr(data-after); 190 | text-align: right; 191 | right: 100%; 192 | margin-right: $label-padding; 193 | margin-top: 2px; 194 | bottom: 0; 195 | } 196 | } 197 | 198 | .jp-card-name { 199 | text-transform: uppercase; 200 | font-family: $card-monospace-font-family; 201 | font-size: 20px; 202 | max-height: 45px; 203 | position: absolute; 204 | bottom: 0; 205 | width: 190px; 206 | display: -webkit-box; 207 | -webkit-line-clamp: 2; 208 | -webkit-box-orient: horizontal; 209 | overflow: hidden; 210 | text-overflow: ellipsis; 211 | } 212 | } 213 | } 214 | 215 | .jp-card-back { 216 | @include transform(rotateY(180deg)); 217 | $bar-top-offset: 40%; 218 | $signature-height: 16%; 219 | $signature-left: 2%; 220 | 221 | .jp-card-bar { 222 | @include linear-gradient(#444, #333); 223 | width: 100%; 224 | height: 20%; 225 | position: absolute; 226 | top: 10%; 227 | } 228 | 229 | &:after { 230 | @include shape(); 231 | @include linear-gradient(#fff, #fff); 232 | width: 80%; 233 | height: $signature-height; 234 | position: absolute; 235 | top: $bar-top-offset; 236 | left: $signature-left; 237 | } 238 | 239 | .jp-card-cvc { 240 | position: absolute; 241 | top: $bar-top-offset; 242 | left: 85%; 243 | @include transition-delay($card-transition-time + 200ms); 244 | } 245 | 246 | .jp-card-shiny { 247 | position: absolute; 248 | top: $bar-top-offset + $signature-height + 10%; 249 | left: $signature-left; 250 | 251 | &:after { 252 | content: "This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free. It comes with no warranty. For support issues, please visit: github.com/jessepollak/card."; 253 | position: absolute; 254 | left: 120%; 255 | top: 5%; 256 | color: white; 257 | font-size: 7px; 258 | width: 230px; 259 | opacity: 0.5; 260 | } 261 | } 262 | } 263 | 264 | &.jp-card-identified { 265 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); 266 | 267 | .jp-card-back, 268 | .jp-card-front { 269 | background-color: #000; 270 | background-color: rgba(0, 0, 0, 0.5); 271 | 272 | &:before { 273 | @include transition(all $card-transition-time ease); 274 | @include card-texture(); 275 | opacity: 1; 276 | // box-shadow: inset 0 0 5px rgba(255,255,255,1); 277 | } 278 | 279 | .jp-card-logo { 280 | box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3); 281 | } 282 | } 283 | 284 | &.no-radial-gradient { 285 | .jp-card-back, 286 | .jp-card-front { 287 | &:before { 288 | @include card-texture($radial-gradient: false); 289 | } 290 | } 291 | } 292 | } 293 | } 294 | 295 | @media (max-width: 450px) { 296 | .card-wrapper { 297 | max-width: 80vw; 298 | width: 100%; 299 | margin: 20px auto; 300 | overflow-x: hidden; 301 | & > .jp-card-container { 302 | transform: scale(0.625); 303 | transform-origin: left center; 304 | } 305 | } 306 | } 307 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![npm](https://img.shields.io/npm/v/card) 2 | 3 | # Card - check out the **[demo](https://jessepollak.github.io/card)** 4 | 5 | ### A better credit card form in one line of code 6 | 7 | Card will take *any* credit card form and make it the best part of the checkout process (without you changing anything). Everything is created with pure CSS, HTML, and Javascript — no images required. 8 | 9 | ![card](http://i.imgur.com/qG3TenO.gif) 10 | 11 | ## Usage (without jQuery) 12 | 13 | To use, you'll need to include the Card JavaScript files into your HTML, no CSS link is necessary as the JavaScript file does this for you. You can find the necessary file at `/dist/card.js` and include it in your HTML like so. 14 | 15 | ```html 16 | 17 | 18 | 19 | ``` 20 | 21 | Once you've included those files, you can initialize Card. 22 | 23 | ```javascript 24 | var card = new Card({ 25 | // a selector or DOM element for the form where users will 26 | // be entering their information 27 | form: 'form', // *required* 28 | // a selector or DOM element for the container 29 | // where you want the card to appear 30 | container: '.card-wrapper', // *required* 31 | 32 | formSelectors: { 33 | numberInput: 'input#number', // optional — default input[name="number"] 34 | expiryInput: 'input#expiry', // optional — default input[name="expiry"] 35 | cvcInput: 'input#cvc', // optional — default input[name="cvc"] 36 | nameInput: 'input#name' // optional - defaults input[name="name"] 37 | }, 38 | 39 | width: 200, // optional — default 350px 40 | formatting: true, // optional - default true 41 | 42 | // Strings for translation - optional 43 | messages: { 44 | validDate: 'valid\ndate', // optional - default 'valid\nthru' 45 | monthYear: 'mm/yyyy', // optional - default 'month/year' 46 | }, 47 | 48 | // Default placeholders for rendered fields - optional 49 | placeholders: { 50 | number: '•••• •••• •••• ••••', 51 | name: 'Full Name', 52 | expiry: '••/••', 53 | cvc: '•••' 54 | }, 55 | 56 | masks: { 57 | cardNumber: '•' // optional - mask card number 58 | }, 59 | 60 | // if true, will log helpful messages for setting up Card 61 | debug: false // optional - default false 62 | }); 63 | ``` 64 | ### Installing card from bower 65 | 66 | If you're using bower, you can install card.js with: 67 | 68 | bower install card --save 69 | 70 | ### Installing card from npm 71 | 72 | If you're using npm, you can install card.js with: 73 | 74 | npm install --save card 75 | 76 | var $ = require("jquery"); 77 | // The current card.js code does not explictly require jQuery, but instead uses the global, so this line is needed. 78 | window.jQuery = $; 79 | var card = require("card"); 80 | 81 | ### Using multiple inputs for one field 82 | 83 | Card can be used in forms where you have multiple inputs that render to a single field (i.e. you have a first and last name input). To use Card with this functionality, just pass in a selector that selects the fields in the correct order. For example, 84 | 85 | ```html 86 | 87 | 88 |
89 | 90 | 91 |
92 | 93 | 94 | 95 | 96 | 97 |
98 | 108 | 109 | 110 | ``` 111 | 112 | ### Rendering with different initial card placeholders 113 | 114 | Card renders with default placeholders for card `name`, `number`, `expiry`, and `cvc`. To override these placeholders, you can pass in a `placeholders` object. 115 | 116 | ```html 117 | 118 | 119 |
120 | 121 | 122 |
123 | 124 | 125 | 126 | 127 |
128 | 142 | 143 | 144 | ``` 145 | 146 | ### Translation 147 | 148 | To render the card with the strings in a different language, you can pass in a `messages` object. 149 | 150 | ```html 151 | 152 | 153 |
154 | 155 | 156 |
157 | 158 | 159 | 160 | 161 |
162 | 174 | 175 | 176 | ``` 177 | 178 | ## Using with jQuery 179 | 180 | To use with jQuery, you'll need to include the `jquery.card.js` file into your HTML. You can find the necessary file at `/dist/jquery.card.js` and include it in your HTML like so. 181 | 182 | ```html 183 | 184 | 185 | 186 | ``` 187 | 188 | Once you've included those files, you can initialize Card with jQuery. 189 | 190 | ```javascript 191 | $('form').card({ 192 | // a selector or DOM element for the container 193 | // where you want the card to appear 194 | container: '.card-wrapper', // *required* 195 | 196 | // all of the other options from above 197 | }); 198 | 199 | ``` 200 | ## Using with other javascript libraries 201 | 202 | Card has wrappers that make it easy to use with other javascript libraries: 203 | 204 | ### Angular 1.x 205 | 206 | * [angular-card](https://github.com/gavruk/angular-card) 207 | 208 | ### Angular 2+ 209 | 210 | * [ngx-card](https://github.com/ihym/ngx-card) 211 | 212 | ### Ember 213 | 214 | * [ember-credit-card](https://github.com/esbanarango/ember-credit-card) 215 | 216 | ### React 217 | 218 | * [react-credit-card](https://github.com/JohnyDays/react-credit-card) 219 | * [card-react](https://github.com/shatran/card-react) 220 | * [react-plastic](https://github.com/armsteadj1/react-plastic) - static CSS only version. 221 | 222 | ### Vue 223 | 224 | For use with VueJs, install card.js from npm: 225 | 226 | ```bash 227 | npm install card --save 228 | 229 | ``` 230 | Add in your component an Div with class 'card-wrapper', just pass in a selector that selects the fields in the correct order. Import the component card.js and add the object in instance mounted like this example: 231 | ```html 232 |
233 | 234 |
235 | 236 | 237 | 238 | 239 | 240 |
241 | 242 | 269 | ``` 270 | 271 | 272 | 273 | 274 | ## Development 275 | 276 | To contribute, follow this steps: 277 | 278 | ```bash 279 | $ git clone --recursive https://github.com/jessepollak/card.git 280 | $ cd card 281 | $ git submodule init && git submodule update 282 | $ npm install 283 | $ npm run development 284 | ``` 285 | 286 | Now, if you go to localhost:8080/example in your browser, you should see the demo page. 287 | 288 | ## Places using Card 289 | 290 | Card is used in the wild in these places: 291 | 292 | * [InspectAll](http://www.inspectall.com/) 293 | * [PennyWhale](https://www.pennywhale.com/) 294 | * [MakeSpace](https://www.makespace.com/) 295 | * [Blumpa](http://www.blumpa.com/) 296 | * [CourseLoads](http://www.courseloads.com/) 297 | * [PubNub](http://pubnub.com/) 298 | * [GigSalad](https://www.gigsalad.com) 299 | * [Boligninja](http://www.boligninja.dk) 300 | * [EasyCarros](http://www.easycarros.com/) 301 | * [Sintelle](http://www.sintelleparapharmacie.com/) 302 | * [Wevorce](http://wevorce.com/) 303 | * [PayumServer](https://github.com/Payum/PayumServer) 304 | * [Paribus](https://paribus.co) 305 | * [Bizzabo](https://www.bizzabo.com) 306 | * [Tortuba](https://www.tortuba.com) 307 | * [Netlify](https://www.netlify.com) 308 | * [The Spice House](https://www.thespicehouse.com/) 309 | * [Touts](https://www.touts.com.br/) 310 | * [Ryman Limited](http://www.ryman.co.uk) 311 | * [Robert Dyas](http://www.robertdyas.co.uk) 312 | * [ROKA](https://www.rokahub.com) 313 | * [LeSalon](https://lesalon.com) 314 | * [Kenyan Directorate Of Immigration And Citizen Service](https://dis.ecitizen.go.ke) 315 | 316 | Are you using Card in production? If so, we'd love to link to you from this page. Open a PR or drop [@jessepollak](http://twitter.com/jessepollak) a line on [Twitter](http://twitter.com/jessepollak) and we'll add you right away! 317 | 318 | ## Project scope 319 | 320 | The project scope is to improve the capture of payment cards on websites. Issues and fixes related to the user interface and validating of payment cards are in scope. 321 | 322 | For questions on how to use Card in your particular project, please ask on Stack Overflow or similar forum. 323 | 324 | ## Donations 325 | 326 | If you'd like to donate to help support development of Card, send Bitcoin directly to `17NUKd3v7GWben18kGhmFafa4ZpWrXpQSC` or through Coinbase [here](https://coinbase.com/jessepollak). 327 | -------------------------------------------------------------------------------- /src/coffee/card.coffee: -------------------------------------------------------------------------------- 1 | require '../scss/card.scss' 2 | 3 | QJ = require 'qj' 4 | payment = require 'payment' 5 | extend = require 'node.extend' 6 | 7 | class Card 8 | initializedDataAttr: "data-jp-card-initialized" 9 | cardTemplate: '' + 10 | '' 49 | template: (tpl, data) -> 50 | tpl.replace /\{\{(.*?)\}\}/g, (match, key, str) -> 51 | data[key] 52 | cardTypes: [ 53 | 'jp-card-amex', 54 | 'jp-card-dankort', 55 | 'jp-card-dinersclub', 56 | 'jp-card-discover', 57 | 'jp-card-unionpay', 58 | 'jp-card-jcb', 59 | 'jp-card-laser', 60 | 'jp-card-maestro', 61 | 'jp-card-mastercard', 62 | 'jp-card-troy', 63 | 'jp-card-unionpay', 64 | 'jp-card-visa', 65 | 'jp-card-visaelectron', 66 | 'jp-card-elo', 67 | 'jp-card-hipercard' 68 | ] 69 | defaults: 70 | formatting: true 71 | formSelectors: 72 | numberInput: 'input[name="number"]' 73 | expiryInput: 'input[name="expiry"]' 74 | cvcInput: 'input[name="cvc"]' 75 | nameInput: 'input[name="name"]' 76 | cardSelectors: 77 | cardContainer: '.jp-card-container' 78 | card: '.jp-card' 79 | numberDisplay: '.jp-card-number' 80 | expiryDisplay: '.jp-card-expiry' 81 | cvcDisplay: '.jp-card-cvc' 82 | nameDisplay: '.jp-card-name' 83 | messages: 84 | validDate: 'valid\nthru' 85 | monthYear: 'month/year' 86 | placeholders: 87 | number: '•••• •••• •••• ••••' 88 | cvc: '•••' 89 | expiry: '••/••' 90 | name: 'Full Name' 91 | masks: 92 | cardNumber: false 93 | classes: 94 | valid: 'jp-card-valid' 95 | invalid: 'jp-card-invalid' 96 | debug: false 97 | 98 | constructor: (opts) -> 99 | @options = extend(true, @defaults, opts) 100 | 101 | unless @options.form 102 | console.log "Please provide a form" 103 | return 104 | 105 | @$el = QJ(@options.form) 106 | 107 | unless @options.container 108 | console.log "Please provide a container" 109 | return 110 | 111 | @$container = QJ(@options.container) 112 | 113 | # set a data attribute to ensure that card is only ever initialized 114 | # once on a given container 115 | toInitialize = if QJ.isDOMElement(@$container) then @$container else @$container[0] 116 | return if toInitialize.getAttribute(@initializedDataAttr) 117 | toInitialize.setAttribute(@initializedDataAttr, true) 118 | 119 | @render() 120 | @attachHandlers() 121 | @handleInitialPlaceholders() 122 | 123 | render: -> 124 | QJ.append(@$container, @template( 125 | @cardTemplate, 126 | extend({}, @options.messages, @options.placeholders) 127 | )) 128 | 129 | for name, selector of @options.cardSelectors 130 | this["$#{name}"] = QJ.find(@$container, selector) 131 | 132 | for name, selector of @options.formSelectors 133 | selector = if @options[name] then @options[name] else selector 134 | obj = QJ.find(@$el, selector) 135 | 136 | console.error "Card can't find a #{name} in your form." if !obj.length and @options.debug 137 | this["$#{name}"] = obj 138 | 139 | if @options.formatting 140 | Payment.formatCardNumber(@$numberInput) 141 | Payment.formatCardCVC(@$cvcInput) 142 | Payment.formatCardExpiry(@$expiryInput) 143 | 144 | if @options.width 145 | $cardContainer = QJ(@options.cardSelectors.cardContainer)[0] 146 | baseWidth = parseInt($cardContainer.clientWidth || window.getComputedStyle($cardContainer).width) 147 | 148 | $cardContainer.style.transform = "scale(#{@options.width / baseWidth})" 149 | 150 | # safari can't handle transparent radial gradient right now 151 | if navigator?.userAgent 152 | ua = navigator.userAgent.toLowerCase() 153 | if ua.indexOf('safari') != -1 and ua.indexOf('chrome') == -1 154 | QJ.addClass @$card, 'jp-card-safari' 155 | if (/MSIE 10\./i.test(navigator.userAgent)) 156 | QJ.addClass @$card, 'jp-card-ie-10' 157 | # ie 11 does not support conditional compilation, use user agent instead 158 | if (/rv:11.0/i.test(navigator.userAgent)) 159 | QJ.addClass @$card, 'jp-card-ie-11' 160 | 161 | attachHandlers: -> 162 | numberInputFilters = [@validToggler('cardNumber')] 163 | numberInputFilters.push(@maskCardNumber) if @options.masks.cardNumber 164 | 165 | bindVal @$numberInput, @$numberDisplay, 166 | fill: false, 167 | filters: numberInputFilters 168 | QJ.on @$numberInput, 'payment.cardType', @handle('setCardType') 169 | 170 | expiryFilters = [(val) -> 171 | if val.length == 1 and val[0] == '0' then '' else val.replace /(\s+)/g, '' 172 | ] 173 | expiryFilters.push @validToggler('cardExpiry') 174 | 175 | bindVal @$expiryInput, @$expiryDisplay, 176 | join: (text) -> 177 | if text[0].length == 2 or text[1] then "/" else "" 178 | filters: expiryFilters 179 | 180 | bindVal @$cvcInput, @$cvcDisplay, filters: @validToggler('cardCVC') 181 | QJ.on @$cvcInput, 'focus', @handle('flipCard') 182 | QJ.on @$cvcInput, 'blur', @handle('unflipCard') 183 | 184 | bindVal @$nameInput, @$nameDisplay, 185 | fill: false 186 | filters: @validToggler('cardHolderName') 187 | join: ' ' 188 | 189 | handleInitialPlaceholders: -> 190 | for name, selector of @options.formSelectors 191 | el = this["$#{name}"] 192 | el = el[0] if el instanceof NodeList 193 | if QJ.val(el) 194 | # if the input has a value, we want to trigger a refresh 195 | QJ.trigger el, 'paste' 196 | # set a timeout because `jquery.payment` does the reset of the val 197 | # in a timeout 198 | do (el) -> setTimeout -> QJ.trigger el, 'keyup' 199 | 200 | handle: (fn) -> 201 | (e) => 202 | args = Array.prototype.slice.call arguments 203 | args.unshift e.target 204 | @handlers[fn].apply this, args 205 | 206 | validToggler: (validatorName) -> 207 | if validatorName == "cardExpiry" 208 | isValid = (val) -> 209 | objVal = Payment.fns.cardExpiryVal val 210 | Payment.fns.validateCardExpiry objVal.month, objVal.year 211 | else if validatorName == "cardCVC" 212 | isValid = (val) => Payment.fns.validateCardCVC val, @cardType 213 | else if validatorName == "cardNumber" 214 | isValid = (val) -> Payment.fns.validateCardNumber val 215 | else if validatorName == "cardHolderName" 216 | isValid = (val) -> val != "" 217 | 218 | (val, $in, $out) => 219 | result = isValid val 220 | @toggleValidClass $in, result 221 | @toggleValidClass $out, result 222 | val 223 | toggleValidClass: (el, test) -> 224 | QJ.toggleClass el, @options.classes.valid, test 225 | QJ.toggleClass el, @options.classes.invalid, !test 226 | 227 | maskCardNumber: (val, el, out) => 228 | mask = @options.masks.cardNumber 229 | numbers = val.split(' ') 230 | 231 | if numbers.length >= 3 232 | numbers.forEach (item, idx) -> 233 | numbers[idx] = numbers[idx].replace(/\d/g, mask) unless idx == numbers.length - 1 234 | numbers.join(' ') 235 | 236 | else 237 | val.replace /\d/g, mask 238 | 239 | handlers: 240 | setCardType: ($el, e) -> 241 | cardType = e.data 242 | event = new CustomEvent('card-type-changed', 'detail': e.data) 243 | document.dispatchEvent event 244 | unless QJ.hasClass @$card, cardType 245 | QJ.removeClass @$card, 'jp-card-unknown' 246 | QJ.removeClass @$card, @cardTypes.join(' ') 247 | QJ.addClass @$card, "jp-card-#{cardType}" 248 | QJ.toggleClass @$card, 'jp-card-identified', (cardType isnt 'unknown') 249 | @cardType = cardType 250 | flipCard: -> 251 | QJ.addClass @$card, 'jp-card-flipped' 252 | unflipCard: -> 253 | QJ.removeClass @$card, 'jp-card-flipped' 254 | 255 | bindVal = (el, out, opts={}) -> 256 | opts.fill = opts.fill || false 257 | opts.filters = opts.filters || [] 258 | opts.filters = [opts.filters] unless opts.filters instanceof Array 259 | 260 | opts.join = opts.join || "" 261 | if !(typeof(opts.join) == "function") 262 | joiner = opts.join 263 | opts.join = () -> joiner 264 | 265 | outDefaults = (o.textContent for o in out) 266 | 267 | # Set the value on initiation 268 | setVal(el, out, outDefaults, opts) 269 | 270 | # Update on Events 271 | QJ.on el, 'focus', -> 272 | QJ.addClass out, 'jp-card-focused' 273 | 274 | QJ.on el, 'blur', -> 275 | QJ.removeClass out, 'jp-card-focused' 276 | 277 | QJ.on el, 'keyup change paste', (e) -> 278 | setVal(el, out, outDefaults, opts) 279 | 280 | el 281 | 282 | setVal = (el, out, outDefaults, opts) -> 283 | val = (QJ.val(elem) for elem in el) 284 | 285 | join = opts.join(val) 286 | 287 | val = val.join(join) 288 | val = "" if val == join 289 | 290 | for filter in opts.filters 291 | val = filter(val, el, out) 292 | 293 | for outEl, i in out 294 | if opts.fill 295 | outVal = val + outDefaults[i].substring(val.length) 296 | else 297 | outVal = val or outDefaults[i] 298 | 299 | outEl.textContent = outVal 300 | 301 | getCardType: -> 302 | ccType = Payment.fns.cardType(@$numberInput[0].value) 303 | if ccType then ccType else 'unknown' 304 | 305 | 306 | module.exports = Card 307 | global.Card = Card -------------------------------------------------------------------------------- /dist/card.css: -------------------------------------------------------------------------------- 1 | .jp-card.jp-card-safari.jp-card-identified .jp-card-front:before,.jp-card.jp-card-safari.jp-card-identified .jp-card-back:before{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%)}.jp-card.jp-card-ie-10.jp-card-flipped,.jp-card.jp-card-ie-11.jp-card-flipped{-webkit-transform:0deg;-moz-transform:0deg;-ms-transform:0deg;-o-transform:0deg;transform:0deg}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-front,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-front{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg)}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg)}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back:after,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back:after{left:18%}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-cvc,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-cvc{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);left:5%}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny{left:84%}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny:after,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny:after{left:-480%;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.jp-card.jp-card-ie-10.jp-card-amex .jp-card-back,.jp-card.jp-card-ie-11.jp-card-amex .jp-card-back{display:none}.jp-card-logo{height:36px;width:60px;font-style:italic}.jp-card-logo,.jp-card-logo:before,.jp-card-logo:after{box-sizing:border-box}.jp-card-logo.jp-card-amex{text-transform:uppercase;font-size:4px;font-weight:bold;color:white;background-image:repeating-radial-gradient(circle at center, #fff 1px, #999 2px);background-image:repeating-radial-gradient(circle at center, #fff 1px, #999 2px);border:1px solid #EEE}.jp-card-logo.jp-card-amex:before,.jp-card-logo.jp-card-amex:after{width:28px;display:block;position:absolute;left:16px}.jp-card-logo.jp-card-amex:before{height:28px;content:"american";top:3px;text-align:left;padding-left:2px;padding-top:11px;background:#267AC3}.jp-card-logo.jp-card-amex:after{content:"express";bottom:11px;text-align:right;padding-right:2px}.jp-card.jp-card-amex.jp-card-flipped{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.jp-card.jp-card-amex.jp-card-identified .jp-card-front:before,.jp-card.jp-card-amex.jp-card-identified .jp-card-back:before{background-color:#108168}.jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-logo.jp-card-amex{opacity:1}.jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-cvc{visibility:visible}.jp-card.jp-card-amex.jp-card-identified .jp-card-front:after{opacity:1}.jp-card-logo.jp-card-discover{background:#f60;color:#111;text-transform:uppercase;font-style:normal;font-weight:bold;font-size:10px;text-align:center;overflow:hidden;z-index:1;padding-top:9px;letter-spacing:.03em;border:1px solid #EEE}.jp-card-logo.jp-card-discover:before,.jp-card-logo.jp-card-discover:after{content:" ";display:block;position:absolute}.jp-card-logo.jp-card-discover:before{background:white;width:200px;height:200px;border-radius:200px;bottom:-5%;right:-80%;z-index:-1}.jp-card-logo.jp-card-discover:after{width:8px;height:8px;border-radius:4px;top:10px;left:27px;background-color:#f60;background-image:-webkit-radial-gradient(#f60,#fff);background-image:radial-gradient( #f60,#fff);content:"network";font-size:4px;line-height:24px;text-indent:-7px}.jp-card .jp-card-front .jp-card-logo.jp-card-discover{right:12%;top:18%}.jp-card.jp-card-discover.jp-card-identified .jp-card-front:before,.jp-card.jp-card-discover.jp-card-identified .jp-card-back:before{background-color:#86B8CF}.jp-card.jp-card-discover.jp-card-identified .jp-card-logo.jp-card-discover{opacity:1}.jp-card.jp-card-discover.jp-card-identified .jp-card-front:after{-webkit-transition:400ms;-moz-transition:400ms;transition:400ms;content:" ";display:block;background-color:#f60;background-image:-webkit-linear-gradient(#f60,#ffa366,#f60);background-image:linear-gradient(#f60,#ffa366,#f60);height:50px;width:50px;border-radius:25px;position:absolute;left:100%;top:15%;margin-left:-25px;box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,0.5)}.jp-card-logo.jp-card-unionpay{width:60px;display:block;height:40px;background:#e21836;-webkit-transform:skew(-15deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);border-radius:5px;font-size:10px;z-index:1;line-height:33px;color:#fff;text-align:center;font-family:"Sans-serif", "Microsoft Yahei", "\5FAE\8F6F\96C5\9ED1", "Hiragino Sans", "Gulim", "\5B8B\4F53";font-weight:bold}.jp-card-logo.jp-card-unionpay:after,.jp-card-logo.jp-card-unionpay:before{display:block;margin:0 auto;position:absolute;height:40px;top:0;z-index:-1}.jp-card-logo.jp-card-unionpay:before{content:" ";width:28px;background:#00447c;left:14px;border-top-left-radius:5px;border-bottom-left-radius:5px}.jp-card-logo.jp-card-unionpay:after{content:"银联";width:26px;background:#007b84;left:34px;border-radius:5px;font-size:10px;line-height:54px;text-indent:-17px}.jp-card.jp-card-unionpay.jp-card-identified .jp-card-back:before,.jp-card.jp-card-unionpay.jp-card-identified .jp-card-front:before{background-color:#987c00}.jp-card.jp-card-unionpay.jp-card-identified .jp-card-logo.jp-card-unionpay{opacity:1}.jp-card-logo.jp-card-visa{text-transform:uppercase;color:white;text-align:center;font-weight:bold;font-size:24px;line-height:18px;margin-top:5px}.jp-card-logo.jp-card-visa:before,.jp-card-logo.jp-card-visa:after{content:" ";display:block;width:100%;height:25%}.jp-card-logo.jp-card-visa:before{position:absolute;left:-4px;width:0;height:0;border-style:solid;border-width:0 12px 6px 0;border-color:transparent #ffffff transparent transparent}.jp-card.jp-card-visa.jp-card-identified .jp-card-front:before,.jp-card.jp-card-visa.jp-card-identified .jp-card-back:before{background-color:#191278}.jp-card.jp-card-visa.jp-card-identified .jp-card-logo.jp-card-visa{opacity:1;box-shadow:none}.jp-card-logo.jp-card-visaelectron{background:white;text-transform:uppercase;color:#1A1876;text-align:center;font-weight:bold;font-size:15px;line-height:18px}.jp-card-logo.jp-card-visaelectron:before,.jp-card-logo.jp-card-visaelectron:after{content:" ";display:block;width:100%;height:25%}.jp-card-logo.jp-card-visaelectron:before{background:#1A1876}.jp-card-logo.jp-card-visaelectron:after{background:#E79800}.jp-card-logo.jp-card-visaelectron .elec{float:right;font-family:arial;font-size:9px;margin-right:1px;margin-top:-5px;text-transform:none}.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-front:before,.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-back:before{background-color:#191278}.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-logo.jp-card-visaelectron{opacity:1}.jp-card-logo.jp-card-mastercard{color:white;font-style:normal;text-transform:lowercase;font-weight:bold;text-align:center;font-size:9px;line-height:84px;z-index:1;text-shadow:1px 1px rgba(0,0,0,0.6)}.jp-card-logo.jp-card-mastercard:before,.jp-card-logo.jp-card-mastercard:after{content:" ";display:block;width:36px;top:0;position:absolute;height:36px;border-radius:18px}.jp-card-logo.jp-card-mastercard:before{left:0;background:#EB001B;z-index:-1;opacity:0.9}.jp-card-logo.jp-card-mastercard:after{right:0;background:#FF5F00;z-index:-2}.jp-card.jp-card-mastercard.jp-card-identified .jp-card-front .jp-card-logo.jp-card-mastercard,.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back .jp-card-logo.jp-card-mastercard{box-shadow:none}.jp-card.jp-card-mastercard.jp-card-identified .jp-card-front:before,.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back:before{background-color:#0061A8}.jp-card.jp-card-mastercard.jp-card-identified .jp-card-logo.jp-card-mastercard{opacity:1}.jp-card-logo.jp-card-maestro{color:white;font-style:normal;text-transform:lowercase;font-weight:bold;text-align:center;font-size:14px;line-height:84px;z-index:1;text-shadow:1px 1px rgba(0,0,0,0.6)}.jp-card-logo.jp-card-maestro:before,.jp-card-logo.jp-card-maestro:after{content:" ";display:block;width:36px;top:0;position:absolute;height:36px;border-radius:18px}.jp-card-logo.jp-card-maestro:before{left:0;background:#EB001B;z-index:-2}.jp-card-logo.jp-card-maestro:after{right:0;background:#00A2E5;z-index:-1;opacity:0.8}.jp-card.jp-card-maestro.jp-card-identified .jp-card-front .jp-card-logo.jp-card-maestro,.jp-card.jp-card-maestro.jp-card-identified .jp-card-back .jp-card-logo.jp-card-maestro{box-shadow:none}.jp-card.jp-card-maestro.jp-card-identified .jp-card-front:before,.jp-card.jp-card-maestro.jp-card-identified .jp-card-back:before{background-color:#0B2C5F}.jp-card.jp-card-maestro.jp-card-identified .jp-card-logo.jp-card-maestro{opacity:1}.jp-card-logo.jp-card-dankort{width:60px;height:36px;padding:3px;border-radius:8px;border:#000 1px solid;background-color:#fff}.jp-card-logo.jp-card-dankort .dk{position:relative;width:100%;height:100%;overflow:hidden}.jp-card-logo.jp-card-dankort .dk:before{background-color:#ED1C24;content:'';position:absolute;width:100%;height:100%;display:block;border-radius:6px}.jp-card-logo.jp-card-dankort .dk:after{content:'';position:absolute;top:50%;margin-top:-7.7px;right:0;width:0;height:0;border-style:solid;border-width:7px 7px 10px 0;border-color:transparent #ED1C24 transparent transparent;z-index:1}.jp-card-logo.jp-card-dankort .d,.jp-card-logo.jp-card-dankort .k{position:absolute;top:50%;width:50%;display:block;height:15.4px;margin-top:-7.7px;background:white}.jp-card-logo.jp-card-dankort .d{left:0;border-radius:0 8px 10px 0}.jp-card-logo.jp-card-dankort .d:before{content:'';position:absolute;top:50%;left:50%;display:block;background:#ED1C24;border-radius:2px 4px 6px 0px;height:5px;width:7px;margin:-3px 0 0 -4px}.jp-card-logo.jp-card-dankort .k{right:0}.jp-card-logo.jp-card-dankort .k:before,.jp-card-logo.jp-card-dankort .k:after{content:'';position:absolute;right:50%;width:0;height:0;border-style:solid;margin-right:-1px}.jp-card-logo.jp-card-dankort .k:before{top:0;border-width:8px 5px 0 0;border-color:#ED1C24 transparent transparent transparent}.jp-card-logo.jp-card-dankort .k:after{bottom:0;border-width:0 5px 8px 0;border-color:transparent transparent #ED1C24 transparent}.jp-card.jp-card-dankort.jp-card-identified .jp-card-front:before,.jp-card.jp-card-dankort.jp-card-identified .jp-card-back:before{background-color:#0055C7}.jp-card.jp-card-dankort.jp-card-identified .jp-card-logo.jp-card-dankort{opacity:1}.jp-card-logo.jp-card-elo{height:50px;width:50px;border-radius:100%;background:black;color:white;text-align:center;text-transform:lowercase;font-size:21px;font-style:normal;letter-spacing:1px;font-weight:bold;padding-top:13px}.jp-card-logo.jp-card-elo .e,.jp-card-logo.jp-card-elo .l,.jp-card-logo.jp-card-elo .o{display:inline-block;position:relative}.jp-card-logo.jp-card-elo .e{-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform:rotate(-15deg)}.jp-card-logo.jp-card-elo .o{position:relative;display:inline-block;width:12px;height:12px;right:0;top:7px;border-radius:100%;background-image:-webkit-linear-gradient( #ff0 50%,red 50%);background-image:linear-gradient( #ff0 50%,red 50%);-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);-ms-transform:rotate(40deg);-o-transform:rotate(40deg);transform:rotate(40deg);text-indent:-9999px}.jp-card-logo.jp-card-elo .o:before{content:"";position:absolute;width:49%;height:49%;background:black;border-radius:100%;text-indent:-99999px;top:25%;left:25%}.jp-card.jp-card-elo.jp-card-identified .jp-card-front:before,.jp-card.jp-card-elo.jp-card-identified .jp-card-back:before{background-color:#6F6969}.jp-card.jp-card-elo.jp-card-identified .jp-card-logo.jp-card-elo{opacity:1}.jp-card-logo.jp-card-jcb{border-radius:5px 0px 5px 0px;-moz-border-radius:5px 0px 5px 0px;-webkit-border-radius:5px 0px 5px 0px;background-color:white;font-style:normal;color:white;width:50px;padding:2px 0 0 2px}.jp-card-logo.jp-card-jcb>div{width:15px;margin-right:1px;display:inline-block;text-align:center;text-shadow:1px 1px rgba(0,0,0,0.6);border-radius:5px 0px 5px 0px;-moz-border-radius:5px 0px 5px 0px;-webkit-border-radius:5px 0px 5px 0px}.jp-card-logo.jp-card-jcb>div:before,.jp-card-logo.jp-card-jcb>div:after{content:" ";display:block;height:8px}.jp-card-logo.jp-card-jcb>div.j{background-color:#000063;background-image:-webkit-linear-gradient(left, #000063,#008cff);background-image:linear-gradient(to right,#000063,#008cff)}.jp-card-logo.jp-card-jcb>div.c{background-color:#630000;background-image:-webkit-linear-gradient(left, #630000,#ff008d);background-image:linear-gradient(to right,#630000,#ff008d)}.jp-card-logo.jp-card-jcb>div.b{background-color:#006300;background-image:-webkit-linear-gradient(left, #006300,lime);background-image:linear-gradient(to right,#006300,lime)}.jp-card.jp-card-jcb.jp-card-identified .jp-card-front:before,.jp-card.jp-card-jcb.jp-card-identified .jp-card-back:before{background-color:#CB8000}.jp-card.jp-card-jcb.jp-card-identified .jp-card-logo.jp-card-jcb{opacity:1;box-shadow:none}.jp-card-logo.jp-card-dinersclub{font-family:serif;height:40px;width:100px;color:white;font-size:17px;font-style:normal;letter-spacing:1px}.jp-card-logo.jp-card-dinersclub::before,.jp-card-logo.jp-card-dinersclub::after{display:block;position:relative}.jp-card-logo.jp-card-dinersclub::before{content:'Diners Club'}.jp-card-logo.jp-card-dinersclub::after{content:'International';text-transform:uppercase;font-size:0.6em}.jp-card.jp-card-dinersclub .jp-card-front .jp-card-logo{box-shadow:none !important}.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-front:before,.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-back:before{background-color:#999}.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-logo.jp-card-dinersclub{opacity:1}.jp-card-logo.jp-card-hipercard{height:20px;width:100px;color:white;font-size:21px;font-style:italic;font-weight:bold}.jp-card-logo.jp-card-hipercard::before,.jp-card-logo.jp-card-hipercard::after{display:block;position:relative}.jp-card.jp-card-hipercard.jp-card-identified .jp-card-front:before,.jp-card.jp-card-hipercard.jp-card-identified .jp-card-back:before{background-color:#770304}.jp-card.jp-card-hipercard.jp-card-identified .jp-card-logo.jp-card-hipercard{opacity:1;box-shadow:none}.jp-card-logo.jp-card-troy{text-transform:lowercase;color:#fff;text-align:center;font-weight:700;font-size:24px;line-height:18px;margin-top:5px}.jp-card-logo.jp-card-troy:before,.jp-card-logo.jp-card-troy:after{content:\"\";display:block;width:26%;height:6%;background:#22b8c3;right:32%;top:24%;position:absolute;transform:rotate(105deg)}.jp-card.jp-card-troy.jp-card-identified .jp-card-front:before,.jp-card.jp-card-troy.jp-card-identified .jp-card-back:before{background-color:#01adba}.jp-card.jp-card-troy.jp-card-identified .jp-card-logo.jp-card-troy{opacity:1;box-shadow:none}.jp-card-container{-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;width:350px;max-width:100%;height:200px;margin:auto;z-index:1;position:relative}.jp-card{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1;position:relative;width:100%;height:100%;min-width:315px;border-radius:10px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 400ms linear;-moz-transition:all 400ms linear;transition:all 400ms linear}.jp-card>*,.jp-card>*:after,.jp-card>*:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}.jp-card.jp-card-flipped{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.jp-card .jp-card-back,.jp-card .jp-card-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 400ms linear;-moz-transition:all 400ms linear;transition:all 400ms linear;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;border-radius:10px;background:#ddd}.jp-card .jp-card-back:before,.jp-card .jp-card-front:before{content:" ";display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;border-radius:10px;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;transition:all 400ms ease}.jp-card .jp-card-back:after,.jp-card .jp-card-front:after{content:" ";display:block}.jp-card .jp-card-back .jp-card-display,.jp-card .jp-card-front .jp-card-display{color:#fff;font-weight:normal;opacity:0.5;-webkit-transition:opacity 400ms linear;-moz-transition:opacity 400ms linear;transition:opacity 400ms linear}.jp-card .jp-card-back .jp-card-display.jp-card-focused,.jp-card .jp-card-front .jp-card-display.jp-card-focused{opacity:1;font-weight:700}.jp-card .jp-card-back .jp-card-cvc,.jp-card .jp-card-front .jp-card-cvc{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:14px}.jp-card .jp-card-back .jp-card-shiny,.jp-card .jp-card-front .jp-card-shiny{width:50px;height:35px;border-radius:5px;background:#ccc;position:relative}.jp-card .jp-card-back .jp-card-shiny:before,.jp-card .jp-card-front .jp-card-shiny:before{content:" ";display:block;width:70%;height:60%;border-top-right-radius:5px;border-bottom-right-radius:5px;background:#d9d9d9;position:absolute;top:20%}.jp-card .jp-card-front .jp-card-logo{position:absolute;opacity:0;right:5%;top:8%;-webkit-transition:400ms;-moz-transition:400ms;transition:400ms}.jp-card .jp-card-front .jp-card-lower{width:80%;position:absolute;left:10%;bottom:30px}@media only screen and (max-width: 480px){.jp-card .jp-card-front .jp-card-lower{width:90%;left:5%}}.jp-card .jp-card-front .jp-card-lower .jp-card-cvc{visibility:hidden;float:right;position:relative;bottom:5px}.jp-card .jp-card-front .jp-card-lower .jp-card-number{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:24px;clear:both;margin-bottom:30px}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;letter-spacing:0;position:relative;float:right;width:25%}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after,.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;font-size:7px;white-space:pre;display:block;opacity:0.5}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before{content:attr(data-before);margin-bottom:2px;font-size:7px;text-transform:uppercase}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after{position:absolute;content:attr(data-after);text-align:right;right:100%;margin-right:5px;margin-top:2px;bottom:0}.jp-card .jp-card-front .jp-card-lower .jp-card-name{text-transform:uppercase;font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:20px;max-height:45px;position:absolute;bottom:0;width:190px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.jp-card .jp-card-back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.jp-card .jp-card-back .jp-card-bar{background-color:#444;background-image:-webkit-linear-gradient(#444,#333);background-image:linear-gradient(#444,#333);width:100%;height:20%;position:absolute;top:10%}.jp-card .jp-card-back:after{content:" ";display:block;background-color:#fff;background-image:-webkit-linear-gradient(#fff,#fff);background-image:linear-gradient(#fff,#fff);width:80%;height:16%;position:absolute;top:40%;left:2%}.jp-card .jp-card-back .jp-card-cvc{position:absolute;top:40%;left:85%;-webkit-transition-delay:600ms;-moz-transition-delay:600ms;transition-delay:600ms}.jp-card .jp-card-back .jp-card-shiny{position:absolute;top:66%;left:2%}.jp-card .jp-card-back .jp-card-shiny:after{content:"This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free. It comes with no warranty. For support issues, please visit: github.com/jessepollak/card.";position:absolute;left:120%;top:5%;color:white;font-size:7px;width:230px;opacity:0.5}.jp-card.jp-card-identified{box-shadow:0 0 20px rgba(0,0,0,0.3)}.jp-card.jp-card-identified .jp-card-back,.jp-card.jp-card-identified .jp-card-front{background-color:#000;background-color:rgba(0,0,0,0.5)}.jp-card.jp-card-identified .jp-card-back:before,.jp-card.jp-card-identified .jp-card-front:before{-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;transition:all 400ms ease;background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 70% 70%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 90% 20%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 15% 80%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 70% 70%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 90% 20%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 15% 80%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);opacity:1}.jp-card.jp-card-identified .jp-card-back .jp-card-logo,.jp-card.jp-card-identified .jp-card-front .jp-card-logo{box-shadow:0 0 0 2px rgba(255,255,255,0.3)}.jp-card.jp-card-identified.no-radial-gradient .jp-card-back:before,.jp-card.jp-card-identified.no-radial-gradient .jp-card-front:before{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%)}@media (max-width: 450px){.card-wrapper{max-width:80vw;width:100%;margin:20px auto;overflow-x:hidden}.card-wrapper>.jp-card-container{transform:scale(0.625);transform-origin:left center}} 2 | -------------------------------------------------------------------------------- /dist/card.js: -------------------------------------------------------------------------------- 1 | /*! For license information please see card.js.LICENSE.txt */ 2 | var card;(()=>{var r={579:function(r,e,t){var a,n,o;t(346),n=t(202),t(28),o=t(907),a=function(){var r,e;class t{template(r,e){return r.replace(/\{\{(.*?)\}\}/g,(function(r,t,a){return e[t]}))}constructor(r){var e;this.maskCardNumber=this.maskCardNumber.bind(this),this.options=o(!0,this.defaults,r),this.options.form?(this.$el=n(this.options.form),this.options.container?(this.$container=n(this.options.container),(e=n.isDOMElement(this.$container)?this.$container:this.$container[0]).getAttribute(this.initializedDataAttr)||(e.setAttribute(this.initializedDataAttr,!0),this.render(),this.attachHandlers(),this.handleInitialPlaceholders())):console.log("Please provide a container")):console.log("Please provide a form")}render(){var r,e,t,a,i,d,c,p;for(t in n.append(this.$container,this.template(this.cardTemplate,o({},this.options.messages,this.options.placeholders))),i=this.options.cardSelectors)c=i[t],this[`$${t}`]=n.find(this.$container,c);for(t in d=this.options.formSelectors)c=d[t],c=this.options[t]?this.options[t]:c,!(a=n.find(this.$el,c)).length&&this.options.debug&&console.error(`Card can't find a ${t} in your form.`),this[`$${t}`]=a;if(this.options.formatting&&(Payment.formatCardNumber(this.$numberInput),Payment.formatCardCVC(this.$cvcInput),Payment.formatCardExpiry(this.$expiryInput)),this.options.width&&(r=n(this.options.cardSelectors.cardContainer)[0],e=parseInt(r.clientWidth||window.getComputedStyle(r).width),r.style.transform=`scale(${this.options.width/e})`),("undefined"!=typeof navigator&&null!==navigator?navigator.userAgent:void 0)&&-1!==(p=navigator.userAgent.toLowerCase()).indexOf("safari")&&-1===p.indexOf("chrome")&&n.addClass(this.$card,"jp-card-safari"),/MSIE 10\./i.test(navigator.userAgent)&&n.addClass(this.$card,"jp-card-ie-10"),/rv:11.0/i.test(navigator.userAgent))return n.addClass(this.$card,"jp-card-ie-11")}attachHandlers(){var e,t;return t=[this.validToggler("cardNumber")],this.options.masks.cardNumber&&t.push(this.maskCardNumber),r(this.$numberInput,this.$numberDisplay,{fill:!1,filters:t}),n.on(this.$numberInput,"payment.cardType",this.handle("setCardType")),(e=[function(r){return 1===r.length&&"0"===r[0]?"":r.replace(/(\s+)/g,"")}]).push(this.validToggler("cardExpiry")),r(this.$expiryInput,this.$expiryDisplay,{join:function(r){return 2===r[0].length||r[1]?"/":""},filters:e}),r(this.$cvcInput,this.$cvcDisplay,{filters:this.validToggler("cardCVC")}),n.on(this.$cvcInput,"focus",this.handle("flipCard")),n.on(this.$cvcInput,"blur",this.handle("unflipCard")),r(this.$nameInput,this.$nameDisplay,{fill:!1,filters:this.validToggler("cardHolderName"),join:" "})}handleInitialPlaceholders(){var r,e,t,a;for(e in a=[],t=this.options.formSelectors)t[e],(r=this[`$${e}`])instanceof NodeList&&(r=r[0]),n.val(r)?(n.trigger(r,"paste"),a.push(function(r){return setTimeout((function(){return n.trigger(r,"keyup")}))}(r))):a.push(void 0);return a}handle(r){return e=>{var t;return(t=Array.prototype.slice.call(arguments)).unshift(e.target),this.handlers[r].apply(this,t)}}validToggler(r){var e;return"cardExpiry"===r?e=function(r){var e;return e=Payment.fns.cardExpiryVal(r),Payment.fns.validateCardExpiry(e.month,e.year)}:"cardCVC"===r?e=r=>Payment.fns.validateCardCVC(r,this.cardType):"cardNumber"===r?e=function(r){return Payment.fns.validateCardNumber(r)}:"cardHolderName"===r&&(e=function(r){return""!==r}),(r,t,a)=>{var n;return n=e(r),this.toggleValidClass(t,n),this.toggleValidClass(a,n),r}}toggleValidClass(r,e){return n.toggleClass(r,this.options.classes.valid,e),n.toggleClass(r,this.options.classes.invalid,!e)}maskCardNumber(r,e,t){var a,n;return a=this.options.masks.cardNumber,(n=r.split(" ")).length>=3?(n.forEach((function(r,e){if(e!==n.length-1)return n[e]=n[e].replace(/\d/g,a)})),n.join(" ")):r.replace(/\d/g,a)}getCardType(){return Payment.fns.cardType(this.$numberInput[0].value)||"unknown"}}return t.prototype.initializedDataAttr="data-jp-card-initialized",t.prototype.cardTemplate='',t.prototype.cardTypes=["jp-card-amex","jp-card-dankort","jp-card-dinersclub","jp-card-discover","jp-card-unionpay","jp-card-jcb","jp-card-laser","jp-card-maestro","jp-card-mastercard","jp-card-troy","jp-card-unionpay","jp-card-visa","jp-card-visaelectron","jp-card-elo","jp-card-hipercard"],t.prototype.defaults={formatting:!0,formSelectors:{numberInput:'input[name="number"]',expiryInput:'input[name="expiry"]',cvcInput:'input[name="cvc"]',nameInput:'input[name="name"]'},cardSelectors:{cardContainer:".jp-card-container",card:".jp-card",numberDisplay:".jp-card-number",expiryDisplay:".jp-card-expiry",cvcDisplay:".jp-card-cvc",nameDisplay:".jp-card-name"},messages:{validDate:"valid\nthru",monthYear:"month/year"},placeholders:{number:"•••• •••• •••• ••••",cvc:"•••",expiry:"••/••",name:"Full Name"},masks:{cardNumber:!1},classes:{valid:"jp-card-valid",invalid:"jp-card-invalid"},debug:!1},t.prototype.handlers={setCardType:function(r,e){var t,a;if(t=e.data,a=new CustomEvent("card-type-changed",{detail:e.data}),document.dispatchEvent(a),!n.hasClass(this.$card,t))return n.removeClass(this.$card,"jp-card-unknown"),n.removeClass(this.$card,this.cardTypes.join(" ")),n.addClass(this.$card,`jp-card-${t}`),n.toggleClass(this.$card,"jp-card-identified","unknown"!==t),this.cardType=t},flipCard:function(){return n.addClass(this.$card,"jp-card-flipped")},unflipCard:function(){return n.removeClass(this.$card,"jp-card-flipped")}},r=function(r,t,a={}){var o,i,d;return a.fill=a.fill||!1,a.filters=a.filters||[],a.filters instanceof Array||(a.filters=[a.filters]),a.join=a.join||"","function"!=typeof a.join&&(o=a.join,a.join=function(){return o}),d=function(){var r,e,a;for(a=[],r=0,e=t.length;r{"use strict";t.d(e,{Z:()=>d});var a=t(81),n=t.n(a),o=t(645),i=t.n(o)()(n());i.push([r.id,'.jp-card.jp-card-safari.jp-card-identified .jp-card-front:before,.jp-card.jp-card-safari.jp-card-identified .jp-card-back:before{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%)}.jp-card.jp-card-ie-10.jp-card-flipped,.jp-card.jp-card-ie-11.jp-card-flipped{-webkit-transform:0deg;-moz-transform:0deg;-ms-transform:0deg;-o-transform:0deg;transform:0deg}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-front,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-front{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg)}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg)}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back:after,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back:after{left:18%}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-cvc,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-cvc{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);left:5%}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny{left:84%}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny:after,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny:after{left:-480%;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.jp-card.jp-card-ie-10.jp-card-amex .jp-card-back,.jp-card.jp-card-ie-11.jp-card-amex .jp-card-back{display:none}.jp-card-logo{height:36px;width:60px;font-style:italic}.jp-card-logo,.jp-card-logo:before,.jp-card-logo:after{box-sizing:border-box}.jp-card-logo.jp-card-amex{text-transform:uppercase;font-size:4px;font-weight:bold;color:white;background-image:repeating-radial-gradient(circle at center, #fff 1px, #999 2px);background-image:repeating-radial-gradient(circle at center, #fff 1px, #999 2px);border:1px solid #EEE}.jp-card-logo.jp-card-amex:before,.jp-card-logo.jp-card-amex:after{width:28px;display:block;position:absolute;left:16px}.jp-card-logo.jp-card-amex:before{height:28px;content:"american";top:3px;text-align:left;padding-left:2px;padding-top:11px;background:#267AC3}.jp-card-logo.jp-card-amex:after{content:"express";bottom:11px;text-align:right;padding-right:2px}.jp-card.jp-card-amex.jp-card-flipped{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.jp-card.jp-card-amex.jp-card-identified .jp-card-front:before,.jp-card.jp-card-amex.jp-card-identified .jp-card-back:before{background-color:#108168}.jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-logo.jp-card-amex{opacity:1}.jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-cvc{visibility:visible}.jp-card.jp-card-amex.jp-card-identified .jp-card-front:after{opacity:1}.jp-card-logo.jp-card-discover{background:#f60;color:#111;text-transform:uppercase;font-style:normal;font-weight:bold;font-size:10px;text-align:center;overflow:hidden;z-index:1;padding-top:9px;letter-spacing:.03em;border:1px solid #EEE}.jp-card-logo.jp-card-discover:before,.jp-card-logo.jp-card-discover:after{content:" ";display:block;position:absolute}.jp-card-logo.jp-card-discover:before{background:white;width:200px;height:200px;border-radius:200px;bottom:-5%;right:-80%;z-index:-1}.jp-card-logo.jp-card-discover:after{width:8px;height:8px;border-radius:4px;top:10px;left:27px;background-color:#f60;background-image:-webkit-radial-gradient(#f60,#fff);background-image:radial-gradient( #f60,#fff);content:"network";font-size:4px;line-height:24px;text-indent:-7px}.jp-card .jp-card-front .jp-card-logo.jp-card-discover{right:12%;top:18%}.jp-card.jp-card-discover.jp-card-identified .jp-card-front:before,.jp-card.jp-card-discover.jp-card-identified .jp-card-back:before{background-color:#86B8CF}.jp-card.jp-card-discover.jp-card-identified .jp-card-logo.jp-card-discover{opacity:1}.jp-card.jp-card-discover.jp-card-identified .jp-card-front:after{-webkit-transition:400ms;-moz-transition:400ms;transition:400ms;content:" ";display:block;background-color:#f60;background-image:-webkit-linear-gradient(#f60,#ffa366,#f60);background-image:linear-gradient(#f60,#ffa366,#f60);height:50px;width:50px;border-radius:25px;position:absolute;left:100%;top:15%;margin-left:-25px;box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,0.5)}.jp-card-logo.jp-card-unionpay{width:60px;display:block;height:40px;background:#e21836;-webkit-transform:skew(-15deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);border-radius:5px;font-size:10px;z-index:1;line-height:33px;color:#fff;text-align:center;font-family:"Sans-serif", "Microsoft Yahei", "\\5FAE\\8F6F\\96C5\\9ED1", "Hiragino Sans", "Gulim", "\\5B8B\\4F53";font-weight:bold}.jp-card-logo.jp-card-unionpay:after,.jp-card-logo.jp-card-unionpay:before{display:block;margin:0 auto;position:absolute;height:40px;top:0;z-index:-1}.jp-card-logo.jp-card-unionpay:before{content:" ";width:28px;background:#00447c;left:14px;border-top-left-radius:5px;border-bottom-left-radius:5px}.jp-card-logo.jp-card-unionpay:after{content:"银联";width:26px;background:#007b84;left:34px;border-radius:5px;font-size:10px;line-height:54px;text-indent:-17px}.jp-card.jp-card-unionpay.jp-card-identified .jp-card-back:before,.jp-card.jp-card-unionpay.jp-card-identified .jp-card-front:before{background-color:#987c00}.jp-card.jp-card-unionpay.jp-card-identified .jp-card-logo.jp-card-unionpay{opacity:1}.jp-card-logo.jp-card-visa{text-transform:uppercase;color:white;text-align:center;font-weight:bold;font-size:24px;line-height:18px;margin-top:5px}.jp-card-logo.jp-card-visa:before,.jp-card-logo.jp-card-visa:after{content:" ";display:block;width:100%;height:25%}.jp-card-logo.jp-card-visa:before{position:absolute;left:-4px;width:0;height:0;border-style:solid;border-width:0 12px 6px 0;border-color:transparent #ffffff transparent transparent}.jp-card.jp-card-visa.jp-card-identified .jp-card-front:before,.jp-card.jp-card-visa.jp-card-identified .jp-card-back:before{background-color:#191278}.jp-card.jp-card-visa.jp-card-identified .jp-card-logo.jp-card-visa{opacity:1;box-shadow:none}.jp-card-logo.jp-card-visaelectron{background:white;text-transform:uppercase;color:#1A1876;text-align:center;font-weight:bold;font-size:15px;line-height:18px}.jp-card-logo.jp-card-visaelectron:before,.jp-card-logo.jp-card-visaelectron:after{content:" ";display:block;width:100%;height:25%}.jp-card-logo.jp-card-visaelectron:before{background:#1A1876}.jp-card-logo.jp-card-visaelectron:after{background:#E79800}.jp-card-logo.jp-card-visaelectron .elec{float:right;font-family:arial;font-size:9px;margin-right:1px;margin-top:-5px;text-transform:none}.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-front:before,.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-back:before{background-color:#191278}.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-logo.jp-card-visaelectron{opacity:1}.jp-card-logo.jp-card-mastercard{color:white;font-style:normal;text-transform:lowercase;font-weight:bold;text-align:center;font-size:9px;line-height:84px;z-index:1;text-shadow:1px 1px rgba(0,0,0,0.6)}.jp-card-logo.jp-card-mastercard:before,.jp-card-logo.jp-card-mastercard:after{content:" ";display:block;width:36px;top:0;position:absolute;height:36px;border-radius:18px}.jp-card-logo.jp-card-mastercard:before{left:0;background:#EB001B;z-index:-1;opacity:0.9}.jp-card-logo.jp-card-mastercard:after{right:0;background:#FF5F00;z-index:-2}.jp-card.jp-card-mastercard.jp-card-identified .jp-card-front .jp-card-logo.jp-card-mastercard,.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back .jp-card-logo.jp-card-mastercard{box-shadow:none}.jp-card.jp-card-mastercard.jp-card-identified .jp-card-front:before,.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back:before{background-color:#0061A8}.jp-card.jp-card-mastercard.jp-card-identified .jp-card-logo.jp-card-mastercard{opacity:1}.jp-card-logo.jp-card-maestro{color:white;font-style:normal;text-transform:lowercase;font-weight:bold;text-align:center;font-size:14px;line-height:84px;z-index:1;text-shadow:1px 1px rgba(0,0,0,0.6)}.jp-card-logo.jp-card-maestro:before,.jp-card-logo.jp-card-maestro:after{content:" ";display:block;width:36px;top:0;position:absolute;height:36px;border-radius:18px}.jp-card-logo.jp-card-maestro:before{left:0;background:#EB001B;z-index:-2}.jp-card-logo.jp-card-maestro:after{right:0;background:#00A2E5;z-index:-1;opacity:0.8}.jp-card.jp-card-maestro.jp-card-identified .jp-card-front .jp-card-logo.jp-card-maestro,.jp-card.jp-card-maestro.jp-card-identified .jp-card-back .jp-card-logo.jp-card-maestro{box-shadow:none}.jp-card.jp-card-maestro.jp-card-identified .jp-card-front:before,.jp-card.jp-card-maestro.jp-card-identified .jp-card-back:before{background-color:#0B2C5F}.jp-card.jp-card-maestro.jp-card-identified .jp-card-logo.jp-card-maestro{opacity:1}.jp-card-logo.jp-card-dankort{width:60px;height:36px;padding:3px;border-radius:8px;border:#000 1px solid;background-color:#fff}.jp-card-logo.jp-card-dankort .dk{position:relative;width:100%;height:100%;overflow:hidden}.jp-card-logo.jp-card-dankort .dk:before{background-color:#ED1C24;content:\'\';position:absolute;width:100%;height:100%;display:block;border-radius:6px}.jp-card-logo.jp-card-dankort .dk:after{content:\'\';position:absolute;top:50%;margin-top:-7.7px;right:0;width:0;height:0;border-style:solid;border-width:7px 7px 10px 0;border-color:transparent #ED1C24 transparent transparent;z-index:1}.jp-card-logo.jp-card-dankort .d,.jp-card-logo.jp-card-dankort .k{position:absolute;top:50%;width:50%;display:block;height:15.4px;margin-top:-7.7px;background:white}.jp-card-logo.jp-card-dankort .d{left:0;border-radius:0 8px 10px 0}.jp-card-logo.jp-card-dankort .d:before{content:\'\';position:absolute;top:50%;left:50%;display:block;background:#ED1C24;border-radius:2px 4px 6px 0px;height:5px;width:7px;margin:-3px 0 0 -4px}.jp-card-logo.jp-card-dankort .k{right:0}.jp-card-logo.jp-card-dankort .k:before,.jp-card-logo.jp-card-dankort .k:after{content:\'\';position:absolute;right:50%;width:0;height:0;border-style:solid;margin-right:-1px}.jp-card-logo.jp-card-dankort .k:before{top:0;border-width:8px 5px 0 0;border-color:#ED1C24 transparent transparent transparent}.jp-card-logo.jp-card-dankort .k:after{bottom:0;border-width:0 5px 8px 0;border-color:transparent transparent #ED1C24 transparent}.jp-card.jp-card-dankort.jp-card-identified .jp-card-front:before,.jp-card.jp-card-dankort.jp-card-identified .jp-card-back:before{background-color:#0055C7}.jp-card.jp-card-dankort.jp-card-identified .jp-card-logo.jp-card-dankort{opacity:1}.jp-card-logo.jp-card-elo{height:50px;width:50px;border-radius:100%;background:black;color:white;text-align:center;text-transform:lowercase;font-size:21px;font-style:normal;letter-spacing:1px;font-weight:bold;padding-top:13px}.jp-card-logo.jp-card-elo .e,.jp-card-logo.jp-card-elo .l,.jp-card-logo.jp-card-elo .o{display:inline-block;position:relative}.jp-card-logo.jp-card-elo .e{-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform:rotate(-15deg)}.jp-card-logo.jp-card-elo .o{position:relative;display:inline-block;width:12px;height:12px;right:0;top:7px;border-radius:100%;background-image:-webkit-linear-gradient( #ff0 50%,red 50%);background-image:linear-gradient( #ff0 50%,red 50%);-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);-ms-transform:rotate(40deg);-o-transform:rotate(40deg);transform:rotate(40deg);text-indent:-9999px}.jp-card-logo.jp-card-elo .o:before{content:"";position:absolute;width:49%;height:49%;background:black;border-radius:100%;text-indent:-99999px;top:25%;left:25%}.jp-card.jp-card-elo.jp-card-identified .jp-card-front:before,.jp-card.jp-card-elo.jp-card-identified .jp-card-back:before{background-color:#6F6969}.jp-card.jp-card-elo.jp-card-identified .jp-card-logo.jp-card-elo{opacity:1}.jp-card-logo.jp-card-jcb{border-radius:5px 0px 5px 0px;-moz-border-radius:5px 0px 5px 0px;-webkit-border-radius:5px 0px 5px 0px;background-color:white;font-style:normal;color:white;width:50px;padding:2px 0 0 2px}.jp-card-logo.jp-card-jcb>div{width:15px;margin-right:1px;display:inline-block;text-align:center;text-shadow:1px 1px rgba(0,0,0,0.6);border-radius:5px 0px 5px 0px;-moz-border-radius:5px 0px 5px 0px;-webkit-border-radius:5px 0px 5px 0px}.jp-card-logo.jp-card-jcb>div:before,.jp-card-logo.jp-card-jcb>div:after{content:" ";display:block;height:8px}.jp-card-logo.jp-card-jcb>div.j{background-color:#000063;background-image:-webkit-linear-gradient(left, #000063,#008cff);background-image:linear-gradient(to right,#000063,#008cff)}.jp-card-logo.jp-card-jcb>div.c{background-color:#630000;background-image:-webkit-linear-gradient(left, #630000,#ff008d);background-image:linear-gradient(to right,#630000,#ff008d)}.jp-card-logo.jp-card-jcb>div.b{background-color:#006300;background-image:-webkit-linear-gradient(left, #006300,lime);background-image:linear-gradient(to right,#006300,lime)}.jp-card.jp-card-jcb.jp-card-identified .jp-card-front:before,.jp-card.jp-card-jcb.jp-card-identified .jp-card-back:before{background-color:#CB8000}.jp-card.jp-card-jcb.jp-card-identified .jp-card-logo.jp-card-jcb{opacity:1;box-shadow:none}.jp-card-logo.jp-card-dinersclub{font-family:serif;height:40px;width:100px;color:white;font-size:17px;font-style:normal;letter-spacing:1px}.jp-card-logo.jp-card-dinersclub::before,.jp-card-logo.jp-card-dinersclub::after{display:block;position:relative}.jp-card-logo.jp-card-dinersclub::before{content:\'Diners Club\'}.jp-card-logo.jp-card-dinersclub::after{content:\'International\';text-transform:uppercase;font-size:0.6em}.jp-card.jp-card-dinersclub .jp-card-front .jp-card-logo{box-shadow:none !important}.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-front:before,.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-back:before{background-color:#999}.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-logo.jp-card-dinersclub{opacity:1}.jp-card-logo.jp-card-hipercard{height:20px;width:100px;color:white;font-size:21px;font-style:italic;font-weight:bold}.jp-card-logo.jp-card-hipercard::before,.jp-card-logo.jp-card-hipercard::after{display:block;position:relative}.jp-card.jp-card-hipercard.jp-card-identified .jp-card-front:before,.jp-card.jp-card-hipercard.jp-card-identified .jp-card-back:before{background-color:#770304}.jp-card.jp-card-hipercard.jp-card-identified .jp-card-logo.jp-card-hipercard{opacity:1;box-shadow:none}.jp-card-logo.jp-card-troy{text-transform:lowercase;color:#fff;text-align:center;font-weight:700;font-size:24px;line-height:18px;margin-top:5px}.jp-card-logo.jp-card-troy:before,.jp-card-logo.jp-card-troy:after{content:\\"\\";display:block;width:26%;height:6%;background:#22b8c3;right:32%;top:24%;position:absolute;transform:rotate(105deg)}.jp-card.jp-card-troy.jp-card-identified .jp-card-front:before,.jp-card.jp-card-troy.jp-card-identified .jp-card-back:before{background-color:#01adba}.jp-card.jp-card-troy.jp-card-identified .jp-card-logo.jp-card-troy{opacity:1;box-shadow:none}.jp-card-container{-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;width:350px;max-width:100%;height:200px;margin:auto;z-index:1;position:relative}.jp-card{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1;position:relative;width:100%;height:100%;min-width:315px;border-radius:10px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 400ms linear;-moz-transition:all 400ms linear;transition:all 400ms linear}.jp-card>*,.jp-card>*:after,.jp-card>*:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}.jp-card.jp-card-flipped{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.jp-card .jp-card-back,.jp-card .jp-card-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 400ms linear;-moz-transition:all 400ms linear;transition:all 400ms linear;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;border-radius:10px;background:#ddd}.jp-card .jp-card-back:before,.jp-card .jp-card-front:before{content:" ";display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;border-radius:10px;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;transition:all 400ms ease}.jp-card .jp-card-back:after,.jp-card .jp-card-front:after{content:" ";display:block}.jp-card .jp-card-back .jp-card-display,.jp-card .jp-card-front .jp-card-display{color:#fff;font-weight:normal;opacity:0.5;-webkit-transition:opacity 400ms linear;-moz-transition:opacity 400ms linear;transition:opacity 400ms linear}.jp-card .jp-card-back .jp-card-display.jp-card-focused,.jp-card .jp-card-front .jp-card-display.jp-card-focused{opacity:1;font-weight:700}.jp-card .jp-card-back .jp-card-cvc,.jp-card .jp-card-front .jp-card-cvc{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:14px}.jp-card .jp-card-back .jp-card-shiny,.jp-card .jp-card-front .jp-card-shiny{width:50px;height:35px;border-radius:5px;background:#ccc;position:relative}.jp-card .jp-card-back .jp-card-shiny:before,.jp-card .jp-card-front .jp-card-shiny:before{content:" ";display:block;width:70%;height:60%;border-top-right-radius:5px;border-bottom-right-radius:5px;background:#d9d9d9;position:absolute;top:20%}.jp-card .jp-card-front .jp-card-logo{position:absolute;opacity:0;right:5%;top:8%;-webkit-transition:400ms;-moz-transition:400ms;transition:400ms}.jp-card .jp-card-front .jp-card-lower{width:80%;position:absolute;left:10%;bottom:30px}@media only screen and (max-width: 480px){.jp-card .jp-card-front .jp-card-lower{width:90%;left:5%}}.jp-card .jp-card-front .jp-card-lower .jp-card-cvc{visibility:hidden;float:right;position:relative;bottom:5px}.jp-card .jp-card-front .jp-card-lower .jp-card-number{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:24px;clear:both;margin-bottom:30px}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;letter-spacing:0;position:relative;float:right;width:25%}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after,.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;font-size:7px;white-space:pre;display:block;opacity:0.5}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before{content:attr(data-before);margin-bottom:2px;font-size:7px;text-transform:uppercase}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after{position:absolute;content:attr(data-after);text-align:right;right:100%;margin-right:5px;margin-top:2px;bottom:0}.jp-card .jp-card-front .jp-card-lower .jp-card-name{text-transform:uppercase;font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:20px;max-height:45px;position:absolute;bottom:0;width:190px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.jp-card .jp-card-back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.jp-card .jp-card-back .jp-card-bar{background-color:#444;background-image:-webkit-linear-gradient(#444,#333);background-image:linear-gradient(#444,#333);width:100%;height:20%;position:absolute;top:10%}.jp-card .jp-card-back:after{content:" ";display:block;background-color:#fff;background-image:-webkit-linear-gradient(#fff,#fff);background-image:linear-gradient(#fff,#fff);width:80%;height:16%;position:absolute;top:40%;left:2%}.jp-card .jp-card-back .jp-card-cvc{position:absolute;top:40%;left:85%;-webkit-transition-delay:600ms;-moz-transition-delay:600ms;transition-delay:600ms}.jp-card .jp-card-back .jp-card-shiny{position:absolute;top:66%;left:2%}.jp-card .jp-card-back .jp-card-shiny:after{content:"This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free. It comes with no warranty. For support issues, please visit: github.com/jessepollak/card.";position:absolute;left:120%;top:5%;color:white;font-size:7px;width:230px;opacity:0.5}.jp-card.jp-card-identified{box-shadow:0 0 20px rgba(0,0,0,0.3)}.jp-card.jp-card-identified .jp-card-back,.jp-card.jp-card-identified .jp-card-front{background-color:#000;background-color:rgba(0,0,0,0.5)}.jp-card.jp-card-identified .jp-card-back:before,.jp-card.jp-card-identified .jp-card-front:before{-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;transition:all 400ms ease;background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 70% 70%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 90% 20%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 15% 80%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 70% 70%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 90% 20%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 15% 80%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);opacity:1}.jp-card.jp-card-identified .jp-card-back .jp-card-logo,.jp-card.jp-card-identified .jp-card-front .jp-card-logo{box-shadow:0 0 0 2px rgba(255,255,255,0.3)}.jp-card.jp-card-identified.no-radial-gradient .jp-card-back:before,.jp-card.jp-card-identified.no-radial-gradient .jp-card-front:before{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%)}@media (max-width: 450px){.card-wrapper{max-width:80vw;width:100%;margin:20px auto;overflow-x:hidden}.card-wrapper>.jp-card-container{transform:scale(0.625);transform-origin:left center}}\n',""]);const d=i},645:r=>{"use strict";r.exports=function(r){var e=[];return e.toString=function(){return this.map((function(e){var t="",a=void 0!==e[5];return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),a&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=r(e),a&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t})).join("")},e.i=function(r,t,a,n,o){"string"==typeof r&&(r=[[null,r,void 0]]);var i={};if(a)for(var d=0;d0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=o),t&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=t):l[2]=t),n&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=n):l[4]="".concat(n)),e.push(l))}},e}},81:r=>{"use strict";r.exports=function(r){return r[1]}},648:r=>{"use strict";var e="Function.prototype.bind called on incompatible ",t=Array.prototype.slice,a=Object.prototype.toString,n="[object Function]";r.exports=function(r){var o=this;if("function"!=typeof o||a.call(o)!==n)throw new TypeError(e+o);for(var i,d=t.call(arguments,1),c=function(){if(this instanceof i){var e=o.apply(this,d.concat(t.call(arguments)));return Object(e)===e?e:this}return o.apply(r,d.concat(t.call(arguments)))},p=Math.max(0,o.length-d.length),l=[],s=0;s{"use strict";var a=t(648);r.exports=Function.prototype.bind||a},221:r=>{"use strict";"undefined"!=typeof self?r.exports=self:"undefined"!=typeof window?r.exports=window:r.exports=Function("return this")()},168:(r,e,t)=>{"use strict";var a=t(221);r.exports=function(){return"object"==typeof t.g&&t.g&&t.g.Math===Math&&t.g.Array===Array?t.g:a}},642:(r,e,t)=>{"use strict";var a=t(612);r.exports=a.call(Function.call,Object.prototype.hasOwnProperty)},452:r=>{"use strict";var e,t,a=Object.prototype,n=a.hasOwnProperty,o=a.toString;"function"==typeof Symbol&&(e=Symbol.prototype.valueOf),"function"==typeof BigInt&&(t=BigInt.prototype.valueOf);var i=function(r){return r!=r},d={boolean:1,number:1,string:1,undefined:1},c=/^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/,p=/^[A-Fa-f0-9]+$/,l={};l.a=l.type=function(r,e){return typeof r===e},l.defined=function(r){return void 0!==r},l.empty=function(r){var e,t=o.call(r);if("[object Array]"===t||"[object Arguments]"===t||"[object String]"===t)return 0===r.length;if("[object Object]"===t){for(e in r)if(n.call(r,e))return!1;return!0}return!r},l.equal=function(r,e){if(r===e)return!0;var t,a=o.call(r);if(a!==o.call(e))return!1;if("[object Object]"===a){for(t in r)if(!l.equal(r[t],e[t])||!(t in e))return!1;for(t in e)if(!l.equal(r[t],e[t])||!(t in r))return!1;return!0}if("[object Array]"===a){if((t=r.length)!==e.length)return!1;for(;t--;)if(!l.equal(r[t],e[t]))return!1;return!0}return"[object Function]"===a?r.prototype===e.prototype:"[object Date]"===a&&r.getTime()===e.getTime()},l.hosted=function(r,e){var t=typeof e[r];return"object"===t?!!e[r]:!d[t]},l.instance=l.instanceof=function(r,e){return r instanceof e},l.nil=l.null=function(r){return null===r},l.undef=l.undefined=function(r){return void 0===r},l.args=l.arguments=function(r){var e="[object Arguments]"===o.call(r),t=!l.array(r)&&l.arraylike(r)&&l.object(r)&&l.fn(r.callee);return e||t},l.array=Array.isArray||function(r){return"[object Array]"===o.call(r)},l.args.empty=function(r){return l.args(r)&&0===r.length},l.array.empty=function(r){return l.array(r)&&0===r.length},l.arraylike=function(r){return!!r&&!l.bool(r)&&n.call(r,"length")&&isFinite(r.length)&&l.number(r.length)&&r.length>=0},l.bool=l.boolean=function(r){return"[object Boolean]"===o.call(r)},l.false=function(r){return l.bool(r)&&!1===Boolean(Number(r))},l.true=function(r){return l.bool(r)&&!0===Boolean(Number(r))},l.date=function(r){return"[object Date]"===o.call(r)},l.date.valid=function(r){return l.date(r)&&!isNaN(Number(r))},l.element=function(r){return void 0!==r&&"undefined"!=typeof HTMLElement&&r instanceof HTMLElement&&1===r.nodeType},l.error=function(r){return"[object Error]"===o.call(r)},l.fn=l.function=function(r){if("undefined"!=typeof window&&r===window.alert)return!0;var e=o.call(r);return"[object Function]"===e||"[object GeneratorFunction]"===e||"[object AsyncFunction]"===e},l.number=function(r){return"[object Number]"===o.call(r)},l.infinite=function(r){return r===1/0||r===-1/0},l.decimal=function(r){return l.number(r)&&!i(r)&&!l.infinite(r)&&r%1!=0},l.divisibleBy=function(r,e){var t=l.infinite(r),a=l.infinite(e),n=l.number(r)&&!i(r)&&l.number(e)&&!i(e)&&0!==e;return t||a||n&&r%e==0},l.integer=l.int=function(r){return l.number(r)&&!i(r)&&r%1==0},l.maximum=function(r,e){if(i(r))throw new TypeError("NaN is not a valid value");if(!l.arraylike(e))throw new TypeError("second argument must be array-like");for(var t=e.length;--t>=0;)if(r=0;)if(r>e[t])return!1;return!0},l.nan=function(r){return!l.number(r)||r!=r},l.even=function(r){return l.infinite(r)||l.number(r)&&r==r&&r%2==0},l.odd=function(r){return l.infinite(r)||l.number(r)&&r==r&&r%2!=0},l.ge=function(r,e){if(i(r)||i(e))throw new TypeError("NaN is not a valid value");return!l.infinite(r)&&!l.infinite(e)&&r>=e},l.gt=function(r,e){if(i(r)||i(e))throw new TypeError("NaN is not a valid value");return!l.infinite(r)&&!l.infinite(e)&&r>e},l.le=function(r,e){if(i(r)||i(e))throw new TypeError("NaN is not a valid value");return!l.infinite(r)&&!l.infinite(e)&&r<=e},l.lt=function(r,e){if(i(r)||i(e))throw new TypeError("NaN is not a valid value");return!l.infinite(r)&&!l.infinite(e)&&r=e&&r<=t},l.object=function(r){return"[object Object]"===o.call(r)},l.primitive=function(r){return!r||!("object"==typeof r||l.object(r)||l.fn(r)||l.array(r))},l.hash=function(r){return l.object(r)&&r.constructor===Object&&!r.nodeType&&!r.setInterval},l.regexp=function(r){return"[object RegExp]"===o.call(r)},l.string=function(r){return"[object String]"===o.call(r)},l.base64=function(r){return l.string(r)&&(!r.length||c.test(r))},l.hex=function(r){return l.string(r)&&(!r.length||p.test(r))},l.symbol=function(r){return"function"==typeof Symbol&&"[object Symbol]"===o.call(r)&&"symbol"==typeof e.call(r)},l.bigint=function(r){return"function"==typeof BigInt&&"[object BigInt]"===o.call(r)&&"bigint"==typeof t.call(r)},r.exports=l},907:(r,e,t)=>{"use strict";r.exports=t(886)},886:(r,e,t)=>{"use strict";var a=t(452),n=t(642),o=Object.defineProperty,i=Object.getOwnPropertyDescriptor,d=function(r,e,t){o&&"__proto__"===e?o(r,e,{enumerable:!0,configurable:!0,value:t,writable:!0}):r[e]=t},c=function(r,e){if("__proto__"===e){if(!n(r,e))return;if(i)return i(r,e).value}return r[e]};r.exports=function r(){var e,t,n,o,i,p,l=arguments[0]||{},s=1,f=arguments.length,g=!1;for("boolean"==typeof l&&(g=l,l=arguments[1]||{},s=2),"object"==typeof l||a.fn(l)||(l={});st[1][0].length)&&(t=[e,o]);return t&&t[0]},o=function(r){var e,t,a;for(t=0,a=i.length;t9&&(e-=9),i+=e;return i%10==0},h=function(r){var e;try{if(null!=r.selectionStart&&r.selectionStart!==r.selectionEnd)return!0;if(null!=("undefined"!=typeof document&&null!==document&&null!=(e=document.selection)?e.createRange:void 0)&&document.selection.createRange().text)return!0}catch(r){}return!1},v=function(r){return setTimeout((function(){var t,n;return t=r.target,n=a.val(t),n=e.fns.formatCardNumber(n),d(t,n),a.trigger(t,"change")}))},s=function(r){return function(e){var t,o,i,d,c,p,l,s,f,g,u;if(e.which>0?(o=String.fromCharCode(e.which),u=a.val(e.target)+o):(o=e.data,u=a.val(e.target)),/^\d+$/.test(o)){for(s=e.target,t=n(u),p=u.replace(/\D/g,"").length,g=[16],t&&(g=t.length),r&&(g=g.filter((function(e){return e<=r}))),i=d=0,c=g.length;d=(f=g[i])&&g[i+1])&&p>=f)return;if(!h(s))return l=t&&"amex"===t.type?/^(\d{4}|\d{4}\s\d{6})$/:/(?:^|\s)(\d{4})$/,u=u.substring(0,u.length-1),l.test(u)?(e.preventDefault(),a.val(s,u+" "+o),a.trigger(s,"change")):void 0}}},p=function(r){var e,t;if(e=r.target,t=a.val(e),!r.meta&&8===r.which&&!h(e))return/\d\s$/.test(t)?(r.preventDefault(),a.val(e,t.replace(/\d\s$/,"")),a.trigger(e,"change")):/\s\d?$/.test(t)?(r.preventDefault(),a.val(e,t.replace(/\s\d?$/,"")),a.trigger(e,"change")):void 0},f=function(r){var e,t,n;if(t=r.target,r.which>0?(e=String.fromCharCode(r.which),n=a.val(t)+e):(e=r.data,n=a.val(t)),/^\d+$/.test(e))return/^\d$/.test(n)&&"0"!==n&&"1"!==n?(r.preventDefault(),a.val(t,"0"+n+" / "),a.trigger(t,"change")):/^\d\d$/.test(n)?(r.preventDefault(),a.val(t,n+" / "),a.trigger(t,"change")):void 0},j=function(r){var e,t,n;if(e=String.fromCharCode(r.which),/^\d+$/.test(e))return t=r.target,n=a.val(t)+e,/^\d$/.test(n)&&"0"!==n&&"1"!==n?(r.preventDefault(),a.val(t,"0"+n),a.trigger(t,"change")):/^\d\d$/.test(n)?(r.preventDefault(),a.val(t,""+n),a.trigger(t,"change")):void 0},g=function(r){var e,t,n;if(e=String.fromCharCode(r.which),/^\d+$/.test(e))return t=r.target,n=a.val(t),/^\d\d$/.test(n)?(a.val(t,n+" / "),a.trigger(t,"change")):void 0},u=function(r){var e,t;if("/"===String.fromCharCode(r.which))return e=r.target,t=a.val(e),/^\d$/.test(t)&&"0"!==t?(a.val(e,"0"+t+" / "),a.trigger(e,"change")):void 0},l=function(r){var e,t;if(!r.metaKey&&(e=r.target,t=a.val(e),8===r.which&&!h(e)))return/\d(\s|\/)+$/.test(t)?(r.preventDefault(),a.val(e,t.replace(/\d(\s|\/)*$/,"")),a.trigger(e,"change")):/\s\/\s?\d?$/.test(t)?(r.preventDefault(),a.val(e,t.replace(/\s\/\s?\d?$/,"")),a.trigger(e,"change")):void 0},E=function(r){var e;return!(!r.metaKey&&!r.ctrlKey)||(32===r.which?r.preventDefault():0===r.which||r.which<33||(e=String.fromCharCode(r.which),/[\d\s]/.test(e)?void 0:r.preventDefault()))},y=function(r){return function(e){var t,o,i,d,c;if(d=e.target,o=String.fromCharCode(e.which),/^\d+$/.test(o)&&!h(d))return c=(a.val(d)+o).replace(/\D/g,""),i=16,(t=n(c))&&(i=t.length[t.length.length-1]),r&&(i=Math.min(i,r)),c.length<=i?void 0:e.preventDefault()}},w=function(r,e){var t,n;if(n=r.target,t=String.fromCharCode(r.which),/^\d+$/.test(t)&&!h(n))return(a.val(n)+t).replace(/\D/g,"").length>e?r.preventDefault():void 0},k=function(r){return w(r,6)},C=function(r){return w(r,2)},$=function(r){return w(r,4)},x=function(r){var e,t;if(t=r.target,e=String.fromCharCode(r.which),/^\d+$/.test(e)&&!h(t))return(a.val(t)+e).length<=4?void 0:r.preventDefault()},z=function(r){var t,n,o,d,c;if(d=r.target,c=a.val(d),o=e.fns.cardType(c)||"unknown",!a.hasClass(d,o))return t=function(){var r,e,t;for(t=[],r=0,e=i.length;r=0&&(!1===e.luhn||m(r)))},validateCardExpiry:function(e,t){var n,o,i,d;return"object"==typeof e&&"month"in e?(e=(i=e).month,t=i.year):"string"==typeof e&&D.call(e,"/")>=0&&(e=(d=r.fns.cardExpiryVal(e)).month,t=d.year),!(!e||!t)&&(e=a.trim(e),t=a.trim(t),!!/^\d+$/.test(e)&&!!/^\d+$/.test(t)&&!!((e=parseInt(e,10))&&e<=12)&&(2===t.length&&(t=(new Date).getFullYear().toString().slice(0,2)+t),o=new Date(t,e),n=new Date,o.setMonth(o.getMonth()-1),o.setMonth(o.getMonth()+1,1),o>n))},validateCardCVC:function(r,e){var t,n;return r=a.trim(r),!!/^\d+$/.test(r)&&(e&&o(e)?(t=r.length,D.call(null!=(n=o(e))?n.cvcLength:void 0,t)>=0):r.length>=3&&r.length<=4)},cardType:function(r){var e;return r&&(null!=(e=n(r))?e.type:void 0)||null},formatCardNumber:function(r){var e,t,a,o;return(e=n(r))?(o=e.length[e.length.length-1],r=(r=r.replace(/\D/g,"")).slice(0,o),e.format.global?null!=(a=r.match(e.format))?a.join(" "):void 0:null!=(t=e.format.exec(r))?(t.shift(),(t=t.filter((function(r){return r}))).join(" ")):void 0):r}},r.restrictNumeric=function(r){return a.on(r,"keypress",E),a.on(r,"input",E)},r.cardExpiryVal=function(e){return r.fns.cardExpiryVal(a.val(e))},r.formatCardCVC=function(e){return r.restrictNumeric(e),a.on(e,"keypress",x),a.on(e,"input",x),e},r.formatCardExpiry=function(e){var t,n;return r.restrictNumeric(e),e.length&&2===e.length?(t=e[0],n=e[1],this.formatCardExpiryMultiple(t,n)):(a.on(e,"keypress",k),a.on(e,"keypress",f),a.on(e,"keypress",u),a.on(e,"keypress",g),a.on(e,"keydown",l),a.on(e,"input",f)),e},r.formatCardExpiryMultiple=function(r,e){return a.on(r,"keypress",C),a.on(r,"keypress",j),a.on(r,"input",j),a.on(e,"keypress",$),a.on(e,"input",$)},r.formatCardNumber=function(e,t){return r.restrictNumeric(e),a.on(e,"keypress",y(t)),a.on(e,"keypress",s(t)),a.on(e,"keydown",p),a.on(e,"keyup blur",z),a.on(e,"blur",s(t)),a.on(e,"paste",v),a.on(e,"input",s(t)),e},r.getCardArray=function(){return i},r.setCardArray=function(r){return i=r,!0},r.addToCardArray=function(r){return i.push(r)},r.removeFromCardArray=function(r){var e;for(e in i)i[e].type===r&&i.splice(e,1);return!0},r}(),r.exports=e,b.Payment=e}).call(this)},202:function(r){(function(){var e,t,a;(e=function(r){return e.isDOMElement(r)?r:document.querySelectorAll(r)}).isDOMElement=function(r){return r&&null!=r.nodeName},a=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,e.trim=function(r){return null===r?"":(r+"").replace(a,"")},t=/\r/g,e.val=function(r,e){var a;return arguments.length>1?r.value=e:"string"==typeof(a=r.value)?a.replace(t,""):null===a?"":a},e.preventDefault=function(r){if("function"!=typeof r.preventDefault)return r.returnValue=!1,!1;r.preventDefault()},e.normalizeEvent=function(r){var t;return null==(r={which:null!=(t=r).which?t.which:void 0,target:t.target||t.srcElement,preventDefault:function(){return e.preventDefault(t)},originalEvent:t,data:t.data||t.detail}).which&&(r.which=null!=t.charCode?t.charCode:t.keyCode),r},e.on=function(r,t,a){var n,o,i,d,c,p,l,s;if(r.length)for(o=0,d=r.length;o{"use strict";t.r(e),t.d(e,{default:()=>h});var a=t(379),n=t.n(a),o=t(795),i=t.n(o),d=t(569),c=t.n(d),p=t(565),l=t.n(p),s=t(216),f=t.n(s),g=t(589),u=t.n(g),j=t(120),b={};b.styleTagTransform=u(),b.setAttributes=l(),b.insert=c().bind(null,"head"),b.domAPI=i(),b.insertStyleElement=f(),n()(j.Z,b);const h=j.Z&&j.Z.locals?j.Z.locals:void 0},379:r=>{"use strict";var e=[];function t(r){for(var t=-1,a=0;a{"use strict";var e={};r.exports=function(r,t){var a=function(r){if(void 0===e[r]){var t=document.querySelector(r);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(r){t=null}e[r]=t}return e[r]}(r);if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}},216:r=>{"use strict";r.exports=function(r){var e=document.createElement("style");return r.setAttributes(e,r.attributes),r.insert(e,r.options),e}},565:(r,e,t)=>{"use strict";r.exports=function(r){var e=t.nc;e&&r.setAttribute("nonce",e)}},795:r=>{"use strict";r.exports=function(r){var e=r.insertStyleElement(r);return{update:function(t){!function(r,e,t){var a="";t.supports&&(a+="@supports (".concat(t.supports,") {")),t.media&&(a+="@media ".concat(t.media," {"));var n=void 0!==t.layer;n&&(a+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),a+=t.css,n&&(a+="}"),t.media&&(a+="}"),t.supports&&(a+="}");var o=t.sourceMap;o&&"undefined"!=typeof btoa&&(a+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleTagTransform(a,r,e.options)}(e,r,t)},remove:function(){!function(r){if(null===r.parentNode)return!1;r.parentNode.removeChild(r)}(e)}}}},589:r=>{"use strict";r.exports=function(r,e){if(e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}}},e={};function t(a){var n=e[a];if(void 0!==n)return n.exports;var o=e[a]={id:a,exports:{}};return r[a].call(o.exports,o,o.exports,t),o.exports}t.n=r=>{var e=r&&r.__esModule?()=>r.default:()=>r;return t.d(e,{a:e}),e},t.d=(r,e)=>{for(var a in e)t.o(e,a)&&!t.o(r,a)&&Object.defineProperty(r,a,{enumerable:!0,get:e[a]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(r){if("object"==typeof window)return window}}(),t.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),t.r=r=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},t.nc=void 0;var a=t(579);card=a})(); -------------------------------------------------------------------------------- /dist/jquery.card.js: -------------------------------------------------------------------------------- 1 | /*! For license information please see jquery.card.js.LICENSE.txt */ 2 | var card;(()=>{var r,e,t={579:function(r,e,t){var a,n,o;t(346),n=t(202),t(28),o=t(907),a=function(){var r,e;class t{template(r,e){return r.replace(/\{\{(.*?)\}\}/g,(function(r,t,a){return e[t]}))}constructor(r){var e;this.maskCardNumber=this.maskCardNumber.bind(this),this.options=o(!0,this.defaults,r),this.options.form?(this.$el=n(this.options.form),this.options.container?(this.$container=n(this.options.container),(e=n.isDOMElement(this.$container)?this.$container:this.$container[0]).getAttribute(this.initializedDataAttr)||(e.setAttribute(this.initializedDataAttr,!0),this.render(),this.attachHandlers(),this.handleInitialPlaceholders())):console.log("Please provide a container")):console.log("Please provide a form")}render(){var r,e,t,a,i,d,c,p;for(t in n.append(this.$container,this.template(this.cardTemplate,o({},this.options.messages,this.options.placeholders))),i=this.options.cardSelectors)c=i[t],this[`$${t}`]=n.find(this.$container,c);for(t in d=this.options.formSelectors)c=d[t],c=this.options[t]?this.options[t]:c,!(a=n.find(this.$el,c)).length&&this.options.debug&&console.error(`Card can't find a ${t} in your form.`),this[`$${t}`]=a;if(this.options.formatting&&(Payment.formatCardNumber(this.$numberInput),Payment.formatCardCVC(this.$cvcInput),Payment.formatCardExpiry(this.$expiryInput)),this.options.width&&(r=n(this.options.cardSelectors.cardContainer)[0],e=parseInt(r.clientWidth||window.getComputedStyle(r).width),r.style.transform=`scale(${this.options.width/e})`),("undefined"!=typeof navigator&&null!==navigator?navigator.userAgent:void 0)&&-1!==(p=navigator.userAgent.toLowerCase()).indexOf("safari")&&-1===p.indexOf("chrome")&&n.addClass(this.$card,"jp-card-safari"),/MSIE 10\./i.test(navigator.userAgent)&&n.addClass(this.$card,"jp-card-ie-10"),/rv:11.0/i.test(navigator.userAgent))return n.addClass(this.$card,"jp-card-ie-11")}attachHandlers(){var e,t;return t=[this.validToggler("cardNumber")],this.options.masks.cardNumber&&t.push(this.maskCardNumber),r(this.$numberInput,this.$numberDisplay,{fill:!1,filters:t}),n.on(this.$numberInput,"payment.cardType",this.handle("setCardType")),(e=[function(r){return 1===r.length&&"0"===r[0]?"":r.replace(/(\s+)/g,"")}]).push(this.validToggler("cardExpiry")),r(this.$expiryInput,this.$expiryDisplay,{join:function(r){return 2===r[0].length||r[1]?"/":""},filters:e}),r(this.$cvcInput,this.$cvcDisplay,{filters:this.validToggler("cardCVC")}),n.on(this.$cvcInput,"focus",this.handle("flipCard")),n.on(this.$cvcInput,"blur",this.handle("unflipCard")),r(this.$nameInput,this.$nameDisplay,{fill:!1,filters:this.validToggler("cardHolderName"),join:" "})}handleInitialPlaceholders(){var r,e,t,a;for(e in a=[],t=this.options.formSelectors)t[e],(r=this[`$${e}`])instanceof NodeList&&(r=r[0]),n.val(r)?(n.trigger(r,"paste"),a.push(function(r){return setTimeout((function(){return n.trigger(r,"keyup")}))}(r))):a.push(void 0);return a}handle(r){return e=>{var t;return(t=Array.prototype.slice.call(arguments)).unshift(e.target),this.handlers[r].apply(this,t)}}validToggler(r){var e;return"cardExpiry"===r?e=function(r){var e;return e=Payment.fns.cardExpiryVal(r),Payment.fns.validateCardExpiry(e.month,e.year)}:"cardCVC"===r?e=r=>Payment.fns.validateCardCVC(r,this.cardType):"cardNumber"===r?e=function(r){return Payment.fns.validateCardNumber(r)}:"cardHolderName"===r&&(e=function(r){return""!==r}),(r,t,a)=>{var n;return n=e(r),this.toggleValidClass(t,n),this.toggleValidClass(a,n),r}}toggleValidClass(r,e){return n.toggleClass(r,this.options.classes.valid,e),n.toggleClass(r,this.options.classes.invalid,!e)}maskCardNumber(r,e,t){var a,n;return a=this.options.masks.cardNumber,(n=r.split(" ")).length>=3?(n.forEach((function(r,e){if(e!==n.length-1)return n[e]=n[e].replace(/\d/g,a)})),n.join(" ")):r.replace(/\d/g,a)}getCardType(){return Payment.fns.cardType(this.$numberInput[0].value)||"unknown"}}return t.prototype.initializedDataAttr="data-jp-card-initialized",t.prototype.cardTemplate='',t.prototype.cardTypes=["jp-card-amex","jp-card-dankort","jp-card-dinersclub","jp-card-discover","jp-card-unionpay","jp-card-jcb","jp-card-laser","jp-card-maestro","jp-card-mastercard","jp-card-troy","jp-card-unionpay","jp-card-visa","jp-card-visaelectron","jp-card-elo","jp-card-hipercard"],t.prototype.defaults={formatting:!0,formSelectors:{numberInput:'input[name="number"]',expiryInput:'input[name="expiry"]',cvcInput:'input[name="cvc"]',nameInput:'input[name="name"]'},cardSelectors:{cardContainer:".jp-card-container",card:".jp-card",numberDisplay:".jp-card-number",expiryDisplay:".jp-card-expiry",cvcDisplay:".jp-card-cvc",nameDisplay:".jp-card-name"},messages:{validDate:"valid\nthru",monthYear:"month/year"},placeholders:{number:"•••• •••• •••• ••••",cvc:"•••",expiry:"••/••",name:"Full Name"},masks:{cardNumber:!1},classes:{valid:"jp-card-valid",invalid:"jp-card-invalid"},debug:!1},t.prototype.handlers={setCardType:function(r,e){var t,a;if(t=e.data,a=new CustomEvent("card-type-changed",{detail:e.data}),document.dispatchEvent(a),!n.hasClass(this.$card,t))return n.removeClass(this.$card,"jp-card-unknown"),n.removeClass(this.$card,this.cardTypes.join(" ")),n.addClass(this.$card,`jp-card-${t}`),n.toggleClass(this.$card,"jp-card-identified","unknown"!==t),this.cardType=t},flipCard:function(){return n.addClass(this.$card,"jp-card-flipped")},unflipCard:function(){return n.removeClass(this.$card,"jp-card-flipped")}},r=function(r,t,a={}){var o,i,d;return a.fill=a.fill||!1,a.filters=a.filters||[],a.filters instanceof Array||(a.filters=[a.filters]),a.join=a.join||"","function"!=typeof a.join&&(o=a.join,a.join=function(){return o}),d=function(){var r,e,a;for(a=[],r=0,e=t.length;r{"use strict";t.d(e,{Z:()=>d});var a=t(81),n=t.n(a),o=t(645),i=t.n(o)()(n());i.push([r.id,'.jp-card.jp-card-safari.jp-card-identified .jp-card-front:before,.jp-card.jp-card-safari.jp-card-identified .jp-card-back:before{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%)}.jp-card.jp-card-ie-10.jp-card-flipped,.jp-card.jp-card-ie-11.jp-card-flipped{-webkit-transform:0deg;-moz-transform:0deg;-ms-transform:0deg;-o-transform:0deg;transform:0deg}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-front,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-front{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg)}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back{-webkit-transform:rotateY(0deg);-moz-transform:rotateY(0deg);-ms-transform:rotateY(0deg);-o-transform:rotateY(0deg);transform:rotateY(0deg)}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back:after,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back:after{left:18%}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-cvc,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-cvc{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg);left:5%}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny{left:84%}.jp-card.jp-card-ie-10.jp-card-flipped .jp-card-back .jp-card-shiny:after,.jp-card.jp-card-ie-11.jp-card-flipped .jp-card-back .jp-card-shiny:after{left:-480%;-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.jp-card.jp-card-ie-10.jp-card-amex .jp-card-back,.jp-card.jp-card-ie-11.jp-card-amex .jp-card-back{display:none}.jp-card-logo{height:36px;width:60px;font-style:italic}.jp-card-logo,.jp-card-logo:before,.jp-card-logo:after{box-sizing:border-box}.jp-card-logo.jp-card-amex{text-transform:uppercase;font-size:4px;font-weight:bold;color:white;background-image:repeating-radial-gradient(circle at center, #fff 1px, #999 2px);background-image:repeating-radial-gradient(circle at center, #fff 1px, #999 2px);border:1px solid #EEE}.jp-card-logo.jp-card-amex:before,.jp-card-logo.jp-card-amex:after{width:28px;display:block;position:absolute;left:16px}.jp-card-logo.jp-card-amex:before{height:28px;content:"american";top:3px;text-align:left;padding-left:2px;padding-top:11px;background:#267AC3}.jp-card-logo.jp-card-amex:after{content:"express";bottom:11px;text-align:right;padding-right:2px}.jp-card.jp-card-amex.jp-card-flipped{-webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none}.jp-card.jp-card-amex.jp-card-identified .jp-card-front:before,.jp-card.jp-card-amex.jp-card-identified .jp-card-back:before{background-color:#108168}.jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-logo.jp-card-amex{opacity:1}.jp-card.jp-card-amex.jp-card-identified .jp-card-front .jp-card-cvc{visibility:visible}.jp-card.jp-card-amex.jp-card-identified .jp-card-front:after{opacity:1}.jp-card-logo.jp-card-discover{background:#f60;color:#111;text-transform:uppercase;font-style:normal;font-weight:bold;font-size:10px;text-align:center;overflow:hidden;z-index:1;padding-top:9px;letter-spacing:.03em;border:1px solid #EEE}.jp-card-logo.jp-card-discover:before,.jp-card-logo.jp-card-discover:after{content:" ";display:block;position:absolute}.jp-card-logo.jp-card-discover:before{background:white;width:200px;height:200px;border-radius:200px;bottom:-5%;right:-80%;z-index:-1}.jp-card-logo.jp-card-discover:after{width:8px;height:8px;border-radius:4px;top:10px;left:27px;background-color:#f60;background-image:-webkit-radial-gradient(#f60,#fff);background-image:radial-gradient( #f60,#fff);content:"network";font-size:4px;line-height:24px;text-indent:-7px}.jp-card .jp-card-front .jp-card-logo.jp-card-discover{right:12%;top:18%}.jp-card.jp-card-discover.jp-card-identified .jp-card-front:before,.jp-card.jp-card-discover.jp-card-identified .jp-card-back:before{background-color:#86B8CF}.jp-card.jp-card-discover.jp-card-identified .jp-card-logo.jp-card-discover{opacity:1}.jp-card.jp-card-discover.jp-card-identified .jp-card-front:after{-webkit-transition:400ms;-moz-transition:400ms;transition:400ms;content:" ";display:block;background-color:#f60;background-image:-webkit-linear-gradient(#f60,#ffa366,#f60);background-image:linear-gradient(#f60,#ffa366,#f60);height:50px;width:50px;border-radius:25px;position:absolute;left:100%;top:15%;margin-left:-25px;box-shadow:inset 1px 1px 3px 1px rgba(0,0,0,0.5)}.jp-card-logo.jp-card-unionpay{width:60px;display:block;height:40px;background:#e21836;-webkit-transform:skew(-15deg);-moz-transform:skew(20deg);-o-transform:skew(20deg);border-radius:5px;font-size:10px;z-index:1;line-height:33px;color:#fff;text-align:center;font-family:"Sans-serif", "Microsoft Yahei", "\\5FAE\\8F6F\\96C5\\9ED1", "Hiragino Sans", "Gulim", "\\5B8B\\4F53";font-weight:bold}.jp-card-logo.jp-card-unionpay:after,.jp-card-logo.jp-card-unionpay:before{display:block;margin:0 auto;position:absolute;height:40px;top:0;z-index:-1}.jp-card-logo.jp-card-unionpay:before{content:" ";width:28px;background:#00447c;left:14px;border-top-left-radius:5px;border-bottom-left-radius:5px}.jp-card-logo.jp-card-unionpay:after{content:"银联";width:26px;background:#007b84;left:34px;border-radius:5px;font-size:10px;line-height:54px;text-indent:-17px}.jp-card.jp-card-unionpay.jp-card-identified .jp-card-back:before,.jp-card.jp-card-unionpay.jp-card-identified .jp-card-front:before{background-color:#987c00}.jp-card.jp-card-unionpay.jp-card-identified .jp-card-logo.jp-card-unionpay{opacity:1}.jp-card-logo.jp-card-visa{text-transform:uppercase;color:white;text-align:center;font-weight:bold;font-size:24px;line-height:18px;margin-top:5px}.jp-card-logo.jp-card-visa:before,.jp-card-logo.jp-card-visa:after{content:" ";display:block;width:100%;height:25%}.jp-card-logo.jp-card-visa:before{position:absolute;left:-4px;width:0;height:0;border-style:solid;border-width:0 12px 6px 0;border-color:transparent #ffffff transparent transparent}.jp-card.jp-card-visa.jp-card-identified .jp-card-front:before,.jp-card.jp-card-visa.jp-card-identified .jp-card-back:before{background-color:#191278}.jp-card.jp-card-visa.jp-card-identified .jp-card-logo.jp-card-visa{opacity:1;box-shadow:none}.jp-card-logo.jp-card-visaelectron{background:white;text-transform:uppercase;color:#1A1876;text-align:center;font-weight:bold;font-size:15px;line-height:18px}.jp-card-logo.jp-card-visaelectron:before,.jp-card-logo.jp-card-visaelectron:after{content:" ";display:block;width:100%;height:25%}.jp-card-logo.jp-card-visaelectron:before{background:#1A1876}.jp-card-logo.jp-card-visaelectron:after{background:#E79800}.jp-card-logo.jp-card-visaelectron .elec{float:right;font-family:arial;font-size:9px;margin-right:1px;margin-top:-5px;text-transform:none}.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-front:before,.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-back:before{background-color:#191278}.jp-card.jp-card-visaelectron.jp-card-identified .jp-card-logo.jp-card-visaelectron{opacity:1}.jp-card-logo.jp-card-mastercard{color:white;font-style:normal;text-transform:lowercase;font-weight:bold;text-align:center;font-size:9px;line-height:84px;z-index:1;text-shadow:1px 1px rgba(0,0,0,0.6)}.jp-card-logo.jp-card-mastercard:before,.jp-card-logo.jp-card-mastercard:after{content:" ";display:block;width:36px;top:0;position:absolute;height:36px;border-radius:18px}.jp-card-logo.jp-card-mastercard:before{left:0;background:#EB001B;z-index:-1;opacity:0.9}.jp-card-logo.jp-card-mastercard:after{right:0;background:#FF5F00;z-index:-2}.jp-card.jp-card-mastercard.jp-card-identified .jp-card-front .jp-card-logo.jp-card-mastercard,.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back .jp-card-logo.jp-card-mastercard{box-shadow:none}.jp-card.jp-card-mastercard.jp-card-identified .jp-card-front:before,.jp-card.jp-card-mastercard.jp-card-identified .jp-card-back:before{background-color:#0061A8}.jp-card.jp-card-mastercard.jp-card-identified .jp-card-logo.jp-card-mastercard{opacity:1}.jp-card-logo.jp-card-maestro{color:white;font-style:normal;text-transform:lowercase;font-weight:bold;text-align:center;font-size:14px;line-height:84px;z-index:1;text-shadow:1px 1px rgba(0,0,0,0.6)}.jp-card-logo.jp-card-maestro:before,.jp-card-logo.jp-card-maestro:after{content:" ";display:block;width:36px;top:0;position:absolute;height:36px;border-radius:18px}.jp-card-logo.jp-card-maestro:before{left:0;background:#EB001B;z-index:-2}.jp-card-logo.jp-card-maestro:after{right:0;background:#00A2E5;z-index:-1;opacity:0.8}.jp-card.jp-card-maestro.jp-card-identified .jp-card-front .jp-card-logo.jp-card-maestro,.jp-card.jp-card-maestro.jp-card-identified .jp-card-back .jp-card-logo.jp-card-maestro{box-shadow:none}.jp-card.jp-card-maestro.jp-card-identified .jp-card-front:before,.jp-card.jp-card-maestro.jp-card-identified .jp-card-back:before{background-color:#0B2C5F}.jp-card.jp-card-maestro.jp-card-identified .jp-card-logo.jp-card-maestro{opacity:1}.jp-card-logo.jp-card-dankort{width:60px;height:36px;padding:3px;border-radius:8px;border:#000 1px solid;background-color:#fff}.jp-card-logo.jp-card-dankort .dk{position:relative;width:100%;height:100%;overflow:hidden}.jp-card-logo.jp-card-dankort .dk:before{background-color:#ED1C24;content:\'\';position:absolute;width:100%;height:100%;display:block;border-radius:6px}.jp-card-logo.jp-card-dankort .dk:after{content:\'\';position:absolute;top:50%;margin-top:-7.7px;right:0;width:0;height:0;border-style:solid;border-width:7px 7px 10px 0;border-color:transparent #ED1C24 transparent transparent;z-index:1}.jp-card-logo.jp-card-dankort .d,.jp-card-logo.jp-card-dankort .k{position:absolute;top:50%;width:50%;display:block;height:15.4px;margin-top:-7.7px;background:white}.jp-card-logo.jp-card-dankort .d{left:0;border-radius:0 8px 10px 0}.jp-card-logo.jp-card-dankort .d:before{content:\'\';position:absolute;top:50%;left:50%;display:block;background:#ED1C24;border-radius:2px 4px 6px 0px;height:5px;width:7px;margin:-3px 0 0 -4px}.jp-card-logo.jp-card-dankort .k{right:0}.jp-card-logo.jp-card-dankort .k:before,.jp-card-logo.jp-card-dankort .k:after{content:\'\';position:absolute;right:50%;width:0;height:0;border-style:solid;margin-right:-1px}.jp-card-logo.jp-card-dankort .k:before{top:0;border-width:8px 5px 0 0;border-color:#ED1C24 transparent transparent transparent}.jp-card-logo.jp-card-dankort .k:after{bottom:0;border-width:0 5px 8px 0;border-color:transparent transparent #ED1C24 transparent}.jp-card.jp-card-dankort.jp-card-identified .jp-card-front:before,.jp-card.jp-card-dankort.jp-card-identified .jp-card-back:before{background-color:#0055C7}.jp-card.jp-card-dankort.jp-card-identified .jp-card-logo.jp-card-dankort{opacity:1}.jp-card-logo.jp-card-elo{height:50px;width:50px;border-radius:100%;background:black;color:white;text-align:center;text-transform:lowercase;font-size:21px;font-style:normal;letter-spacing:1px;font-weight:bold;padding-top:13px}.jp-card-logo.jp-card-elo .e,.jp-card-logo.jp-card-elo .l,.jp-card-logo.jp-card-elo .o{display:inline-block;position:relative}.jp-card-logo.jp-card-elo .e{-webkit-transform:rotate(-15deg);-moz-transform:rotate(-15deg);-ms-transform:rotate(-15deg);-o-transform:rotate(-15deg);transform:rotate(-15deg)}.jp-card-logo.jp-card-elo .o{position:relative;display:inline-block;width:12px;height:12px;right:0;top:7px;border-radius:100%;background-image:-webkit-linear-gradient( #ff0 50%,red 50%);background-image:linear-gradient( #ff0 50%,red 50%);-webkit-transform:rotate(40deg);-moz-transform:rotate(40deg);-ms-transform:rotate(40deg);-o-transform:rotate(40deg);transform:rotate(40deg);text-indent:-9999px}.jp-card-logo.jp-card-elo .o:before{content:"";position:absolute;width:49%;height:49%;background:black;border-radius:100%;text-indent:-99999px;top:25%;left:25%}.jp-card.jp-card-elo.jp-card-identified .jp-card-front:before,.jp-card.jp-card-elo.jp-card-identified .jp-card-back:before{background-color:#6F6969}.jp-card.jp-card-elo.jp-card-identified .jp-card-logo.jp-card-elo{opacity:1}.jp-card-logo.jp-card-jcb{border-radius:5px 0px 5px 0px;-moz-border-radius:5px 0px 5px 0px;-webkit-border-radius:5px 0px 5px 0px;background-color:white;font-style:normal;color:white;width:50px;padding:2px 0 0 2px}.jp-card-logo.jp-card-jcb>div{width:15px;margin-right:1px;display:inline-block;text-align:center;text-shadow:1px 1px rgba(0,0,0,0.6);border-radius:5px 0px 5px 0px;-moz-border-radius:5px 0px 5px 0px;-webkit-border-radius:5px 0px 5px 0px}.jp-card-logo.jp-card-jcb>div:before,.jp-card-logo.jp-card-jcb>div:after{content:" ";display:block;height:8px}.jp-card-logo.jp-card-jcb>div.j{background-color:#000063;background-image:-webkit-linear-gradient(left, #000063,#008cff);background-image:linear-gradient(to right,#000063,#008cff)}.jp-card-logo.jp-card-jcb>div.c{background-color:#630000;background-image:-webkit-linear-gradient(left, #630000,#ff008d);background-image:linear-gradient(to right,#630000,#ff008d)}.jp-card-logo.jp-card-jcb>div.b{background-color:#006300;background-image:-webkit-linear-gradient(left, #006300,lime);background-image:linear-gradient(to right,#006300,lime)}.jp-card.jp-card-jcb.jp-card-identified .jp-card-front:before,.jp-card.jp-card-jcb.jp-card-identified .jp-card-back:before{background-color:#CB8000}.jp-card.jp-card-jcb.jp-card-identified .jp-card-logo.jp-card-jcb{opacity:1;box-shadow:none}.jp-card-logo.jp-card-dinersclub{font-family:serif;height:40px;width:100px;color:white;font-size:17px;font-style:normal;letter-spacing:1px}.jp-card-logo.jp-card-dinersclub::before,.jp-card-logo.jp-card-dinersclub::after{display:block;position:relative}.jp-card-logo.jp-card-dinersclub::before{content:\'Diners Club\'}.jp-card-logo.jp-card-dinersclub::after{content:\'International\';text-transform:uppercase;font-size:0.6em}.jp-card.jp-card-dinersclub .jp-card-front .jp-card-logo{box-shadow:none !important}.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-front:before,.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-back:before{background-color:#999}.jp-card.jp-card-dinersclub.jp-card-identified .jp-card-logo.jp-card-dinersclub{opacity:1}.jp-card-logo.jp-card-hipercard{height:20px;width:100px;color:white;font-size:21px;font-style:italic;font-weight:bold}.jp-card-logo.jp-card-hipercard::before,.jp-card-logo.jp-card-hipercard::after{display:block;position:relative}.jp-card.jp-card-hipercard.jp-card-identified .jp-card-front:before,.jp-card.jp-card-hipercard.jp-card-identified .jp-card-back:before{background-color:#770304}.jp-card.jp-card-hipercard.jp-card-identified .jp-card-logo.jp-card-hipercard{opacity:1;box-shadow:none}.jp-card-logo.jp-card-troy{text-transform:lowercase;color:#fff;text-align:center;font-weight:700;font-size:24px;line-height:18px;margin-top:5px}.jp-card-logo.jp-card-troy:before,.jp-card-logo.jp-card-troy:after{content:\\"\\";display:block;width:26%;height:6%;background:#22b8c3;right:32%;top:24%;position:absolute;transform:rotate(105deg)}.jp-card.jp-card-troy.jp-card-identified .jp-card-front:before,.jp-card.jp-card-troy.jp-card-identified .jp-card-back:before{background-color:#01adba}.jp-card.jp-card-troy.jp-card-identified .jp-card-logo.jp-card-troy{opacity:1;box-shadow:none}.jp-card-container{-webkit-perspective:1000px;-moz-perspective:1000px;perspective:1000px;width:350px;max-width:100%;height:200px;margin:auto;z-index:1;position:relative}.jp-card{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1;position:relative;width:100%;height:100%;min-width:315px;border-radius:10px;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 400ms linear;-moz-transition:all 400ms linear;transition:all 400ms linear}.jp-card>*,.jp-card>*:after,.jp-card>*:before{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:inherit}.jp-card.jp-card-flipped{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.jp-card .jp-card-back,.jp-card .jp-card-front{-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;-o-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 400ms linear;-moz-transition:all 400ms linear;transition:all 400ms linear;width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;border-radius:10px;background:#ddd}.jp-card .jp-card-back:before,.jp-card .jp-card-front:before{content:" ";display:block;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0;border-radius:10px;-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;transition:all 400ms ease}.jp-card .jp-card-back:after,.jp-card .jp-card-front:after{content:" ";display:block}.jp-card .jp-card-back .jp-card-display,.jp-card .jp-card-front .jp-card-display{color:#fff;font-weight:normal;opacity:0.5;-webkit-transition:opacity 400ms linear;-moz-transition:opacity 400ms linear;transition:opacity 400ms linear}.jp-card .jp-card-back .jp-card-display.jp-card-focused,.jp-card .jp-card-front .jp-card-display.jp-card-focused{opacity:1;font-weight:700}.jp-card .jp-card-back .jp-card-cvc,.jp-card .jp-card-front .jp-card-cvc{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:14px}.jp-card .jp-card-back .jp-card-shiny,.jp-card .jp-card-front .jp-card-shiny{width:50px;height:35px;border-radius:5px;background:#ccc;position:relative}.jp-card .jp-card-back .jp-card-shiny:before,.jp-card .jp-card-front .jp-card-shiny:before{content:" ";display:block;width:70%;height:60%;border-top-right-radius:5px;border-bottom-right-radius:5px;background:#d9d9d9;position:absolute;top:20%}.jp-card .jp-card-front .jp-card-logo{position:absolute;opacity:0;right:5%;top:8%;-webkit-transition:400ms;-moz-transition:400ms;transition:400ms}.jp-card .jp-card-front .jp-card-lower{width:80%;position:absolute;left:10%;bottom:30px}@media only screen and (max-width: 480px){.jp-card .jp-card-front .jp-card-lower{width:90%;left:5%}}.jp-card .jp-card-front .jp-card-lower .jp-card-cvc{visibility:hidden;float:right;position:relative;bottom:5px}.jp-card .jp-card-front .jp-card-lower .jp-card-number{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:24px;clear:both;margin-bottom:30px}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry{font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;letter-spacing:0;position:relative;float:right;width:25%}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after,.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;font-size:7px;white-space:pre;display:block;opacity:0.5}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:before{content:attr(data-before);margin-bottom:2px;font-size:7px;text-transform:uppercase}.jp-card .jp-card-front .jp-card-lower .jp-card-expiry:after{position:absolute;content:attr(data-after);text-align:right;right:100%;margin-right:5px;margin-top:2px;bottom:0}.jp-card .jp-card-front .jp-card-lower .jp-card-name{text-transform:uppercase;font-family:"Bitstream Vera Sans Mono",Consolas,Courier,monospace;font-size:20px;max-height:45px;position:absolute;bottom:0;width:190px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:horizontal;overflow:hidden;text-overflow:ellipsis}.jp-card .jp-card-back{-webkit-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-ms-transform:rotateY(180deg);-o-transform:rotateY(180deg);transform:rotateY(180deg)}.jp-card .jp-card-back .jp-card-bar{background-color:#444;background-image:-webkit-linear-gradient(#444,#333);background-image:linear-gradient(#444,#333);width:100%;height:20%;position:absolute;top:10%}.jp-card .jp-card-back:after{content:" ";display:block;background-color:#fff;background-image:-webkit-linear-gradient(#fff,#fff);background-image:linear-gradient(#fff,#fff);width:80%;height:16%;position:absolute;top:40%;left:2%}.jp-card .jp-card-back .jp-card-cvc{position:absolute;top:40%;left:85%;-webkit-transition-delay:600ms;-moz-transition-delay:600ms;transition-delay:600ms}.jp-card .jp-card-back .jp-card-shiny{position:absolute;top:66%;left:2%}.jp-card .jp-card-back .jp-card-shiny:after{content:"This card has been issued by Jesse Pollak and is licensed for anyone to use anywhere for free. It comes with no warranty. For support issues, please visit: github.com/jessepollak/card.";position:absolute;left:120%;top:5%;color:white;font-size:7px;width:230px;opacity:0.5}.jp-card.jp-card-identified{box-shadow:0 0 20px rgba(0,0,0,0.3)}.jp-card.jp-card-identified .jp-card-back,.jp-card.jp-card-identified .jp-card-front{background-color:#000;background-color:rgba(0,0,0,0.5)}.jp-card.jp-card-identified .jp-card-back:before,.jp-card.jp-card-identified .jp-card-front:before{-webkit-transition:all 400ms ease;-moz-transition:all 400ms ease;transition:all 400ms ease;background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 70% 70%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 90% 20%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 15% 80%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 70% 70%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 90% 20%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-radial-gradient(circle at 15% 80%, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);opacity:1}.jp-card.jp-card-identified .jp-card-back .jp-card-logo,.jp-card.jp-card-identified .jp-card-front .jp-card-logo{box-shadow:0 0 0 2px rgba(255,255,255,0.3)}.jp-card.jp-card-identified.no-radial-gradient .jp-card-back:before,.jp-card.jp-card-identified.no-radial-gradient .jp-card-front:before{background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),-webkit-linear-gradient(-245deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%);background-image:repeating-linear-gradient(45deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 1px, rgba(255,255,255,0) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.03) 4px),repeating-linear-gradient(90deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),repeating-linear-gradient(210deg, rgba(255,255,255,0) 1px, rgba(255,255,255,0.03) 2px, rgba(255,255,255,0.04) 3px, rgba(255,255,255,0.05) 4px),linear-gradient(-25deg, rgba(255,255,255,0) 50%,rgba(255,255,255,0.2) 70%,rgba(255,255,255,0) 90%)}@media (max-width: 450px){.card-wrapper{max-width:80vw;width:100%;margin:20px auto;overflow-x:hidden}.card-wrapper>.jp-card-container{transform:scale(0.625);transform-origin:left center}}\n',""]);const d=i},645:r=>{"use strict";r.exports=function(r){var e=[];return e.toString=function(){return this.map((function(e){var t="",a=void 0!==e[5];return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),a&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=r(e),a&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t})).join("")},e.i=function(r,t,a,n,o){"string"==typeof r&&(r=[[null,r,void 0]]);var i={};if(a)for(var d=0;d0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=o),t&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=t):l[2]=t),n&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=n):l[4]="".concat(n)),e.push(l))}},e}},81:r=>{"use strict";r.exports=function(r){return r[1]}},648:r=>{"use strict";var e="Function.prototype.bind called on incompatible ",t=Array.prototype.slice,a=Object.prototype.toString,n="[object Function]";r.exports=function(r){var o=this;if("function"!=typeof o||a.call(o)!==n)throw new TypeError(e+o);for(var i,d=t.call(arguments,1),c=function(){if(this instanceof i){var e=o.apply(this,d.concat(t.call(arguments)));return Object(e)===e?e:this}return o.apply(r,d.concat(t.call(arguments)))},p=Math.max(0,o.length-d.length),l=[],s=0;s{"use strict";var a=t(648);r.exports=Function.prototype.bind||a},221:r=>{"use strict";"undefined"!=typeof self?r.exports=self:"undefined"!=typeof window?r.exports=window:r.exports=Function("return this")()},168:(r,e,t)=>{"use strict";var a=t(221);r.exports=function(){return"object"==typeof t.g&&t.g&&t.g.Math===Math&&t.g.Array===Array?t.g:a}},642:(r,e,t)=>{"use strict";var a=t(612);r.exports=a.call(Function.call,Object.prototype.hasOwnProperty)},452:r=>{"use strict";var e,t,a=Object.prototype,n=a.hasOwnProperty,o=a.toString;"function"==typeof Symbol&&(e=Symbol.prototype.valueOf),"function"==typeof BigInt&&(t=BigInt.prototype.valueOf);var i=function(r){return r!=r},d={boolean:1,number:1,string:1,undefined:1},c=/^([A-Za-z0-9+/]{4})*([A-Za-z0-9+/]{4}|[A-Za-z0-9+/]{3}=|[A-Za-z0-9+/]{2}==)$/,p=/^[A-Fa-f0-9]+$/,l={};l.a=l.type=function(r,e){return typeof r===e},l.defined=function(r){return void 0!==r},l.empty=function(r){var e,t=o.call(r);if("[object Array]"===t||"[object Arguments]"===t||"[object String]"===t)return 0===r.length;if("[object Object]"===t){for(e in r)if(n.call(r,e))return!1;return!0}return!r},l.equal=function(r,e){if(r===e)return!0;var t,a=o.call(r);if(a!==o.call(e))return!1;if("[object Object]"===a){for(t in r)if(!l.equal(r[t],e[t])||!(t in e))return!1;for(t in e)if(!l.equal(r[t],e[t])||!(t in r))return!1;return!0}if("[object Array]"===a){if((t=r.length)!==e.length)return!1;for(;t--;)if(!l.equal(r[t],e[t]))return!1;return!0}return"[object Function]"===a?r.prototype===e.prototype:"[object Date]"===a&&r.getTime()===e.getTime()},l.hosted=function(r,e){var t=typeof e[r];return"object"===t?!!e[r]:!d[t]},l.instance=l.instanceof=function(r,e){return r instanceof e},l.nil=l.null=function(r){return null===r},l.undef=l.undefined=function(r){return void 0===r},l.args=l.arguments=function(r){var e="[object Arguments]"===o.call(r),t=!l.array(r)&&l.arraylike(r)&&l.object(r)&&l.fn(r.callee);return e||t},l.array=Array.isArray||function(r){return"[object Array]"===o.call(r)},l.args.empty=function(r){return l.args(r)&&0===r.length},l.array.empty=function(r){return l.array(r)&&0===r.length},l.arraylike=function(r){return!!r&&!l.bool(r)&&n.call(r,"length")&&isFinite(r.length)&&l.number(r.length)&&r.length>=0},l.bool=l.boolean=function(r){return"[object Boolean]"===o.call(r)},l.false=function(r){return l.bool(r)&&!1===Boolean(Number(r))},l.true=function(r){return l.bool(r)&&!0===Boolean(Number(r))},l.date=function(r){return"[object Date]"===o.call(r)},l.date.valid=function(r){return l.date(r)&&!isNaN(Number(r))},l.element=function(r){return void 0!==r&&"undefined"!=typeof HTMLElement&&r instanceof HTMLElement&&1===r.nodeType},l.error=function(r){return"[object Error]"===o.call(r)},l.fn=l.function=function(r){if("undefined"!=typeof window&&r===window.alert)return!0;var e=o.call(r);return"[object Function]"===e||"[object GeneratorFunction]"===e||"[object AsyncFunction]"===e},l.number=function(r){return"[object Number]"===o.call(r)},l.infinite=function(r){return r===1/0||r===-1/0},l.decimal=function(r){return l.number(r)&&!i(r)&&!l.infinite(r)&&r%1!=0},l.divisibleBy=function(r,e){var t=l.infinite(r),a=l.infinite(e),n=l.number(r)&&!i(r)&&l.number(e)&&!i(e)&&0!==e;return t||a||n&&r%e==0},l.integer=l.int=function(r){return l.number(r)&&!i(r)&&r%1==0},l.maximum=function(r,e){if(i(r))throw new TypeError("NaN is not a valid value");if(!l.arraylike(e))throw new TypeError("second argument must be array-like");for(var t=e.length;--t>=0;)if(r=0;)if(r>e[t])return!1;return!0},l.nan=function(r){return!l.number(r)||r!=r},l.even=function(r){return l.infinite(r)||l.number(r)&&r==r&&r%2==0},l.odd=function(r){return l.infinite(r)||l.number(r)&&r==r&&r%2!=0},l.ge=function(r,e){if(i(r)||i(e))throw new TypeError("NaN is not a valid value");return!l.infinite(r)&&!l.infinite(e)&&r>=e},l.gt=function(r,e){if(i(r)||i(e))throw new TypeError("NaN is not a valid value");return!l.infinite(r)&&!l.infinite(e)&&r>e},l.le=function(r,e){if(i(r)||i(e))throw new TypeError("NaN is not a valid value");return!l.infinite(r)&&!l.infinite(e)&&r<=e},l.lt=function(r,e){if(i(r)||i(e))throw new TypeError("NaN is not a valid value");return!l.infinite(r)&&!l.infinite(e)&&r=e&&r<=t},l.object=function(r){return"[object Object]"===o.call(r)},l.primitive=function(r){return!r||!("object"==typeof r||l.object(r)||l.fn(r)||l.array(r))},l.hash=function(r){return l.object(r)&&r.constructor===Object&&!r.nodeType&&!r.setInterval},l.regexp=function(r){return"[object RegExp]"===o.call(r)},l.string=function(r){return"[object String]"===o.call(r)},l.base64=function(r){return l.string(r)&&(!r.length||c.test(r))},l.hex=function(r){return l.string(r)&&(!r.length||p.test(r))},l.symbol=function(r){return"function"==typeof Symbol&&"[object Symbol]"===o.call(r)&&"symbol"==typeof e.call(r)},l.bigint=function(r){return"function"==typeof BigInt&&"[object BigInt]"===o.call(r)&&"bigint"==typeof t.call(r)},r.exports=l},907:(r,e,t)=>{"use strict";r.exports=t(886)},886:(r,e,t)=>{"use strict";var a=t(452),n=t(642),o=Object.defineProperty,i=Object.getOwnPropertyDescriptor,d=function(r,e,t){o&&"__proto__"===e?o(r,e,{enumerable:!0,configurable:!0,value:t,writable:!0}):r[e]=t},c=function(r,e){if("__proto__"===e){if(!n(r,e))return;if(i)return i(r,e).value}return r[e]};r.exports=function r(){var e,t,n,o,i,p,l=arguments[0]||{},s=1,f=arguments.length,g=!1;for("boolean"==typeof l&&(g=l,l=arguments[1]||{},s=2),"object"==typeof l||a.fn(l)||(l={});st[1][0].length)&&(t=[e,o]);return t&&t[0]},o=function(r){var e,t,a;for(t=0,a=i.length;t9&&(e-=9),i+=e;return i%10==0},h=function(r){var e;try{if(null!=r.selectionStart&&r.selectionStart!==r.selectionEnd)return!0;if(null!=("undefined"!=typeof document&&null!==document&&null!=(e=document.selection)?e.createRange:void 0)&&document.selection.createRange().text)return!0}catch(r){}return!1},v=function(r){return setTimeout((function(){var t,n;return t=r.target,n=a.val(t),n=e.fns.formatCardNumber(n),d(t,n),a.trigger(t,"change")}))},s=function(r){return function(e){var t,o,i,d,c,p,l,s,f,g,u;if(e.which>0?(o=String.fromCharCode(e.which),u=a.val(e.target)+o):(o=e.data,u=a.val(e.target)),/^\d+$/.test(o)){for(s=e.target,t=n(u),p=u.replace(/\D/g,"").length,g=[16],t&&(g=t.length),r&&(g=g.filter((function(e){return e<=r}))),i=d=0,c=g.length;d=(f=g[i])&&g[i+1])&&p>=f)return;if(!h(s))return l=t&&"amex"===t.type?/^(\d{4}|\d{4}\s\d{6})$/:/(?:^|\s)(\d{4})$/,u=u.substring(0,u.length-1),l.test(u)?(e.preventDefault(),a.val(s,u+" "+o),a.trigger(s,"change")):void 0}}},p=function(r){var e,t;if(e=r.target,t=a.val(e),!r.meta&&8===r.which&&!h(e))return/\d\s$/.test(t)?(r.preventDefault(),a.val(e,t.replace(/\d\s$/,"")),a.trigger(e,"change")):/\s\d?$/.test(t)?(r.preventDefault(),a.val(e,t.replace(/\s\d?$/,"")),a.trigger(e,"change")):void 0},f=function(r){var e,t,n;if(t=r.target,r.which>0?(e=String.fromCharCode(r.which),n=a.val(t)+e):(e=r.data,n=a.val(t)),/^\d+$/.test(e))return/^\d$/.test(n)&&"0"!==n&&"1"!==n?(r.preventDefault(),a.val(t,"0"+n+" / "),a.trigger(t,"change")):/^\d\d$/.test(n)?(r.preventDefault(),a.val(t,n+" / "),a.trigger(t,"change")):void 0},j=function(r){var e,t,n;if(e=String.fromCharCode(r.which),/^\d+$/.test(e))return t=r.target,n=a.val(t)+e,/^\d$/.test(n)&&"0"!==n&&"1"!==n?(r.preventDefault(),a.val(t,"0"+n),a.trigger(t,"change")):/^\d\d$/.test(n)?(r.preventDefault(),a.val(t,""+n),a.trigger(t,"change")):void 0},g=function(r){var e,t,n;if(e=String.fromCharCode(r.which),/^\d+$/.test(e))return t=r.target,n=a.val(t),/^\d\d$/.test(n)?(a.val(t,n+" / "),a.trigger(t,"change")):void 0},u=function(r){var e,t;if("/"===String.fromCharCode(r.which))return e=r.target,t=a.val(e),/^\d$/.test(t)&&"0"!==t?(a.val(e,"0"+t+" / "),a.trigger(e,"change")):void 0},l=function(r){var e,t;if(!r.metaKey&&(e=r.target,t=a.val(e),8===r.which&&!h(e)))return/\d(\s|\/)+$/.test(t)?(r.preventDefault(),a.val(e,t.replace(/\d(\s|\/)*$/,"")),a.trigger(e,"change")):/\s\/\s?\d?$/.test(t)?(r.preventDefault(),a.val(e,t.replace(/\s\/\s?\d?$/,"")),a.trigger(e,"change")):void 0},E=function(r){var e;return!(!r.metaKey&&!r.ctrlKey)||(32===r.which?r.preventDefault():0===r.which||r.which<33||(e=String.fromCharCode(r.which),/[\d\s]/.test(e)?void 0:r.preventDefault()))},y=function(r){return function(e){var t,o,i,d,c;if(d=e.target,o=String.fromCharCode(e.which),/^\d+$/.test(o)&&!h(d))return c=(a.val(d)+o).replace(/\D/g,""),i=16,(t=n(c))&&(i=t.length[t.length.length-1]),r&&(i=Math.min(i,r)),c.length<=i?void 0:e.preventDefault()}},w=function(r,e){var t,n;if(n=r.target,t=String.fromCharCode(r.which),/^\d+$/.test(t)&&!h(n))return(a.val(n)+t).replace(/\D/g,"").length>e?r.preventDefault():void 0},k=function(r){return w(r,6)},C=function(r){return w(r,2)},$=function(r){return w(r,4)},x=function(r){var e,t;if(t=r.target,e=String.fromCharCode(r.which),/^\d+$/.test(e)&&!h(t))return(a.val(t)+e).length<=4?void 0:r.preventDefault()},z=function(r){var t,n,o,d,c;if(d=r.target,c=a.val(d),o=e.fns.cardType(c)||"unknown",!a.hasClass(d,o))return t=function(){var r,e,t;for(t=[],r=0,e=i.length;r=0&&(!1===e.luhn||m(r)))},validateCardExpiry:function(e,t){var n,o,i,d;return"object"==typeof e&&"month"in e?(e=(i=e).month,t=i.year):"string"==typeof e&&D.call(e,"/")>=0&&(e=(d=r.fns.cardExpiryVal(e)).month,t=d.year),!(!e||!t)&&(e=a.trim(e),t=a.trim(t),!!/^\d+$/.test(e)&&!!/^\d+$/.test(t)&&!!((e=parseInt(e,10))&&e<=12)&&(2===t.length&&(t=(new Date).getFullYear().toString().slice(0,2)+t),o=new Date(t,e),n=new Date,o.setMonth(o.getMonth()-1),o.setMonth(o.getMonth()+1,1),o>n))},validateCardCVC:function(r,e){var t,n;return r=a.trim(r),!!/^\d+$/.test(r)&&(e&&o(e)?(t=r.length,D.call(null!=(n=o(e))?n.cvcLength:void 0,t)>=0):r.length>=3&&r.length<=4)},cardType:function(r){var e;return r&&(null!=(e=n(r))?e.type:void 0)||null},formatCardNumber:function(r){var e,t,a,o;return(e=n(r))?(o=e.length[e.length.length-1],r=(r=r.replace(/\D/g,"")).slice(0,o),e.format.global?null!=(a=r.match(e.format))?a.join(" "):void 0:null!=(t=e.format.exec(r))?(t.shift(),(t=t.filter((function(r){return r}))).join(" ")):void 0):r}},r.restrictNumeric=function(r){return a.on(r,"keypress",E),a.on(r,"input",E)},r.cardExpiryVal=function(e){return r.fns.cardExpiryVal(a.val(e))},r.formatCardCVC=function(e){return r.restrictNumeric(e),a.on(e,"keypress",x),a.on(e,"input",x),e},r.formatCardExpiry=function(e){var t,n;return r.restrictNumeric(e),e.length&&2===e.length?(t=e[0],n=e[1],this.formatCardExpiryMultiple(t,n)):(a.on(e,"keypress",k),a.on(e,"keypress",f),a.on(e,"keypress",u),a.on(e,"keypress",g),a.on(e,"keydown",l),a.on(e,"input",f)),e},r.formatCardExpiryMultiple=function(r,e){return a.on(r,"keypress",C),a.on(r,"keypress",j),a.on(r,"input",j),a.on(e,"keypress",$),a.on(e,"input",$)},r.formatCardNumber=function(e,t){return r.restrictNumeric(e),a.on(e,"keypress",y(t)),a.on(e,"keypress",s(t)),a.on(e,"keydown",p),a.on(e,"keyup blur",z),a.on(e,"blur",s(t)),a.on(e,"paste",v),a.on(e,"input",s(t)),e},r.getCardArray=function(){return i},r.setCardArray=function(r){return i=r,!0},r.addToCardArray=function(r){return i.push(r)},r.removeFromCardArray=function(r){var e;for(e in i)i[e].type===r&&i.splice(e,1);return!0},r}(),r.exports=e,b.Payment=e}).call(this)},202:function(r){(function(){var e,t,a;(e=function(r){return e.isDOMElement(r)?r:document.querySelectorAll(r)}).isDOMElement=function(r){return r&&null!=r.nodeName},a=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,e.trim=function(r){return null===r?"":(r+"").replace(a,"")},t=/\r/g,e.val=function(r,e){var a;return arguments.length>1?r.value=e:"string"==typeof(a=r.value)?a.replace(t,""):null===a?"":a},e.preventDefault=function(r){if("function"!=typeof r.preventDefault)return r.returnValue=!1,!1;r.preventDefault()},e.normalizeEvent=function(r){var t;return null==(r={which:null!=(t=r).which?t.which:void 0,target:t.target||t.srcElement,preventDefault:function(){return e.preventDefault(t)},originalEvent:t,data:t.data||t.detail}).which&&(r.which=null!=t.charCode?t.charCode:t.keyCode),r},e.on=function(r,t,a){var n,o,i,d,c,p,l,s;if(r.length)for(o=0,d=r.length;o{"use strict";t.r(e),t.d(e,{default:()=>h});var a=t(379),n=t.n(a),o=t(795),i=t.n(o),d=t(569),c=t.n(d),p=t(565),l=t.n(p),s=t(216),f=t.n(s),g=t(589),u=t.n(g),j=t(120),b={};b.styleTagTransform=u(),b.setAttributes=l(),b.insert=c().bind(null,"head"),b.domAPI=i(),b.insertStyleElement=f(),n()(j.Z,b);const h=j.Z&&j.Z.locals?j.Z.locals:void 0},379:r=>{"use strict";var e=[];function t(r){for(var t=-1,a=0;a{"use strict";var e={};r.exports=function(r,t){var a=function(r){if(void 0===e[r]){var t=document.querySelector(r);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(r){t=null}e[r]=t}return e[r]}(r);if(!a)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");a.appendChild(t)}},216:r=>{"use strict";r.exports=function(r){var e=document.createElement("style");return r.setAttributes(e,r.attributes),r.insert(e,r.options),e}},565:(r,e,t)=>{"use strict";r.exports=function(r){var e=t.nc;e&&r.setAttribute("nonce",e)}},795:r=>{"use strict";r.exports=function(r){var e=r.insertStyleElement(r);return{update:function(t){!function(r,e,t){var a="";t.supports&&(a+="@supports (".concat(t.supports,") {")),t.media&&(a+="@media ".concat(t.media," {"));var n=void 0!==t.layer;n&&(a+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),a+=t.css,n&&(a+="}"),t.media&&(a+="}"),t.supports&&(a+="}");var o=t.sourceMap;o&&"undefined"!=typeof btoa&&(a+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleTagTransform(a,r,e.options)}(e,r,t)},remove:function(){!function(r){if(null===r.parentNode)return!1;r.parentNode.removeChild(r)}(e)}}}},589:r=>{"use strict";r.exports=function(r,e){if(e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}},311:r=>{"use strict";r.exports=jQuery}},a={};function n(r){var e=a[r];if(void 0!==e)return e.exports;var o=a[r]={id:r,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.exports}n.n=r=>{var e=r&&r.__esModule?()=>r.default:()=>r;return n.d(e,{a:e}),e},n.d=(r,e)=>{for(var t in e)n.o(e,t)&&!n.o(r,t)&&Object.defineProperty(r,t,{enumerable:!0,get:e[t]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(r){if("object"==typeof window)return window}}(),n.o=(r,e)=>Object.prototype.hasOwnProperty.call(r,e),n.r=r=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},n.nc=void 0,e=n(579),(r=n(311)).card={},r.card.fn={},r.fn.card=function(e){return r.card.fn.construct.apply(this,e)},r.fn.extend({card:function(t,...a){return this.each((function(){var n,o;if((o=(n=r(this)).data("card"))||(r.each(t,((r,e)=>{if(e instanceof jQuery)return t[r]=e[0]})),t.form=this,n.data("card",o=new e(t))),"string"==typeof t)return o[t].apply(o,a)}))}}),card={}})(); --------------------------------------------------------------------------------