Slice 1

Адаптивная HTML форма оплаты кредитной картой (JS)

Еще один пример реализации формы оплаты кредитной карты на сайте. В этот раз на нативном javascript, без использования фреймворка.

Если вы пропустили предыдущий пост с другим вариантом реализации формы для заполнения кредитной карты, то ознакомиться можно по ссылке.

HTML

 
Payment Information
 
 
 
 
  
 
  
 
 
 
 
Name 
Card Numbergenerate random   
 
Expiration (mm/yy) 
Security Code 
  

CSS

.payment-title < width: 100%; text-align: center; >.form-container .field-container:first-of-type < grid-area: name; >.form-container .field-container:nth-of-type(2) < grid-area: number; >.form-container .field-container:nth-of-type(3) < grid-area: expiration; >.form-container .field-container:nth-of-type(4) < grid-area: security; >.field-container input < -webkit-box-sizing: border-box; box-sizing: border-box; >.field-container < position: relative; >.form-container < display: grid; grid-column-gap: 10px; grid-template-columns: auto auto; grid-template-rows: 90px 90px 90px; grid-template-areas: "name name""number number""expiration security"; max-width: 400px; padding: 20px; color: #707070; >label < padding-bottom: 5px; font-size: 13px; >input < margin-top: 3px; padding: 15px; font-size: 16px; width: 100%; border-radius: 3px; border: 1px solid #dcdcdc; >.ccicon < height: 38px; position: absolute; right: 6px; top: calc(50% - 17px); width: 60px; >/* CREDIT CARD IMAGE STYLING */ .preload * < -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; >.container < width: 100%; max-width: 400px; max-height: 251px; height: 54vw; padding: 20px; >#ccsingle < position: absolute; right: 15px; top: 20px; >#ccsingle svg < width: 100px; max-height: 60px; >.creditcard svg#cardfront, .creditcard svg#cardback < width: 100%; -webkit-box-shadow: 1px 5px 6px 0px black; box-shadow: 1px 5px 6px 0px black; border-radius: 22px; >#generatecard < cursor: pointer; float: right; font-size: 12px; color: #fff; padding: 2px 4px; background-color: #909090; border-radius: 4px; cursor: pointer; float:right; >/* CHANGEABLE CARD ELEMENTS */ .creditcard .lightcolor, .creditcard .darkcolor < -webkit-transition: fill .5s; transition: fill .5s; >.creditcard .lightblue < fill: #03A9F4; >.creditcard .lightbluedark < fill: #0288D1; >.creditcard .red < fill: #ef5350; >.creditcard .reddark < fill: #d32f2f; >.creditcard .purple < fill: #ab47bc; >.creditcard .purpledark < fill: #7b1fa2; >.creditcard .cyan < fill: #26c6da; >.creditcard .cyandark < fill: #0097a7; >.creditcard .green < fill: #66bb6a; >.creditcard .greendark < fill: #388e3c; >.creditcard .lime < fill: #d4e157; >.creditcard .limedark < fill: #afb42b; >.creditcard .yellow < fill: #ffeb3b; >.creditcard .yellowdark < fill: #f9a825; >.creditcard .orange < fill: #ff9800; >.creditcard .orangedark < fill: #ef6c00; >.creditcard .grey < fill: #bdbdbd; >.creditcard .greydark < fill: #616161; >/* FRONT OF CARD */ #svgname < text-transform: uppercase; >#cardfront .st2 < fill: #FFFFFF; >#cardfront .st3 < font-family: 'Source Code Pro', monospace; font-weight: 600; >#cardfront .st4 < font-size: 54.7817px; >#cardfront .st5 < font-family: 'Source Code Pro', monospace; font-weight: 400; >#cardfront .st6 < font-size: 33.1112px; >#cardfront .st7 < opacity: 0.6; fill: #FFFFFF; >#cardfront .st8 < font-size: 24px; >#cardfront .st9 < font-size: 36.5498px; >#cardfront .st10 < font-family: 'Source Code Pro', monospace; font-weight: 300; >#cardfront .st11 < font-size: 16.1716px; >#cardfront .st12 < fill: #4C4C4C; >/* BACK OF CARD */ #cardback .st0 < fill: none; stroke: #0F0F0F; stroke-miterlimit: 10; >#cardback .st2 < fill: #111111; >#cardback .st3 < fill: #F2F2F2; >#cardback .st4 < fill: #D8D2DB; >#cardback .st5 < fill: #C4C4C4; >#cardback .st6 < font-family: 'Source Code Pro', monospace; font-weight: 400; >#cardback .st7 < font-size: 27px; >#cardback .st8 < opacity: 0.6; >#cardback .st9 < fill: #FFFFFF; >#cardback .st10 < font-size: 24px; >#cardback .st11 < fill: #EAEAEA; >#cardback .st12 < font-family: 'Rock Salt', cursive; >#cardback .st13 < font-size: 37.769px; >/* FLIP ANIMATION */ .container < perspective: 1000px; >.creditcard < width: 100%; max-width: 400px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: -webkit-transform 0.6s; -webkit-transition: -webkit-transform 0.6s; transition: transform 0.6s; transition: transform 0.6s, -webkit-transform 0.6s; cursor: pointer; >.creditcard .front, .creditcard .back < position: absolute; width: 100%; max-width: 400px; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-font-smoothing: antialiased; color: #47525d; >.creditcard .back < -webkit-transform: rotateY(180deg); transform: rotateY(180deg); >.creditcard.flipped

JS

Для работы с вводом данных в input нам понадобится подключить imask.js

window.onload = function () < const name = document.getElementById('name'); const cardnumber = document.getElementById('cardnumber'); const expirationdate = document.getElementById('expirationdate'); const securitycode = document.getElementById('securitycode'); const output = document.getElementById('output'); const ccicon = document.getElementById('ccicon'); const ccsingle = document.getElementById('ccsingle'); const generatecard = document.getElementById('generatecard'); let cctype = null; //Mask the Credit Card Number Input var cardnumber_mask = new IMask(cardnumber, < mask: [< mask: '0000 000000 00000', regex: '^3[47]\\d', cardtype: 'american express' >, < mask: '0000 0000 0000 0000', regex: '^(?:6011|65\\d|644\\d?)\\d', cardtype: 'discover' >, < mask: '0000 000000 0000', regex: '^3(?:0(5|9)|[689]\\d?)\\d', cardtype: 'diners' >, < mask: '0000 0000 0000 0000', regex: '^(51\\d|225\\d|26\\d)\\d', cardtype: 'mastercard' >, // < // mask: '0000-0000-0000-0000', // regex: '^(5019|4175|4571)\\d', // cardtype: 'dankort' // >, // < // mask: '0000-0000-0000-0000', // regex: '^638\\d', // cardtype: 'instapayment' // >, < mask: '0000 000000 00000', regex: '^(?:2131|1800)\\d', cardtype: 'jcb15' >, < mask: '0000 0000 0000 0000', regex: '^(?:35\\d)\\d', cardtype: 'jcb' >, < mask: '0000 0000 0000 0000', regex: '^(?:5[0678]\\d|6304|67\\d)\\d', cardtype: 'maestro' >, // < // mask: '0000-0000-0000-0000', // regex: '^2201\\d', // cardtype: 'mir' // >, < mask: '0000 0000 0000 0000', regex: '^4\\d', cardtype: 'visa' >, < mask: '0000 0000 0000 0000', regex: '^62\\d', cardtype: 'unionpay' >, < mask: '0000 0000 0000 0000', cardtype: 'Unknown' >], dispatch: function (appended, dynamicMasked) < var number = (dynamicMasked.value + appended).replace(/\D/g, ''); for (var i = 0; i < dynamicMasked.compiledMasks.length; i++) < let re = new RegExp(dynamicMasked.compiledMasks[i].regex); if (number.match(re) != null) < return dynamicMasked.compiledMasks[i]; >> > >); //Mask the Expiration Date var expirationdate_mask = new IMask(expirationdate, < mask: 'MMYY', groups: < YY: new IMask.MaskedPattern.Group.Range([0, 99]), MM: new IMask.MaskedPattern.Group.Range([1, 12]), >>); //Mask the security code var securitycode_mask = new IMask(securitycode, < mask: '0000', >); // SVGICONS let amex = ` `; let visa = ` `; let diners = ` `; let discover = ` `; let jcb = ` `; let maestro = ` `; let mastercard = ` `; let unionpay = ` `; let amex_single = ``; let visa_single = ``; let diners_single = ``; let discover_single = ``; let jcb_single = ``; let maestro_single = ` `; let mastercard_single = ` `; let unionpay_single = ` `; //define the color swap function const swapColor = function (basecolor) < document.querySelectorAll('.lightcolor') .forEach(function (input) < input.setAttribute('class', ''); input.setAttribute('class', 'lightcolor ' + basecolor); >); document.querySelectorAll('.darkcolor') .forEach(function (input) < input.setAttribute('class', ''); input.setAttribute('class', 'darkcolor ' + basecolor + 'dark'); >); >; //pop in the appropriate card icon when detected cardnumber_mask.on("accept", function () < console.log(cardnumber_mask.masked.currentMask.cardtype); switch (cardnumber_mask.masked.currentMask.cardtype) < case 'american express': ccicon.innerHTML = amex; ccsingle.innerHTML = amex_single; swapColor('green'); break; case 'visa': ccicon.innerHTML = visa; ccsingle.innerHTML = visa_single; swapColor('lime'); break; case 'diners': ccicon.innerHTML = diners; ccsingle.innerHTML = diners_single; swapColor('orange'); break; case 'discover': ccicon.innerHTML = discover; ccsingle.innerHTML = discover_single; swapColor('purple'); break; case ('jcb' || 'jcb15'): ccicon.innerHTML = jcb; ccsingle.innerHTML = jcb_single; swapColor('red'); break; case 'maestro': ccicon.innerHTML = maestro; ccsingle.innerHTML = maestro_single; swapColor('yellow'); break; case 'mastercard': ccicon.innerHTML = mastercard; ccsingle.innerHTML = mastercard_single; swapColor('lightblue'); break; case 'unionpay': ccicon.innerHTML = unionpay; ccsingle.innerHTML = unionpay_single; swapColor('cyan'); break; default: ccicon.innerHTML = ''; ccsingle.innerHTML = ''; swapColor('grey'); break; >>); //Generate random card number from list of known test numbers const randomCard = function () < let testCards = [ '4000056655665556', '5200828282828210', '371449635398431', '6011000990139424', '30569309025904', '3566002020360505', '6200000000000005', '6759649826438453', ]; let randomNumber = Math.floor(Math.random() * testCards.length); cardnumber_mask.unmaskedValue = testCards[randomNumber]; >generatecard.addEventListener('click', function () < randomCard(); >); // CREDIT CARD IMAGE JS document.querySelector('.preload').classList.remove('preload'); document.querySelector('.creditcard').addEventListener('click', function () < if (this.classList.contains('flipped')) < this.classList.remove('flipped'); >else < this.classList.add('flipped'); >>) //On Input Change Events name.addEventListener('input', function () < if (name.value.length == 0) < document.getElementById('svgname').innerHTML = 'John Doe'; document.getElementById('svgnameback').innerHTML = 'John Doe'; >else < document.getElementById('svgname').innerHTML = this.value; document.getElementById('svgnameback').innerHTML = this.value; >>); cardnumber_mask.on('accept', function () < if (cardnumber_mask.value.length == 0) < document.getElementById('svgnumber').innerHTML = '0123 4567 8910 1112'; >else < document.getElementById('svgnumber').innerHTML = cardnumber_mask.value; >>); expirationdate_mask.on('accept', function () < if (expirationdate_mask.value.length == 0) < document.getElementById('svgexpire').innerHTML = '01/23'; >else < document.getElementById('svgexpire').innerHTML = expirationdate_mask.value; >>); securitycode_mask.on('accept', function () < if (securitycode_mask.value.length == 0) < document.getElementById('svgsecurity').innerHTML = '985'; >else < document.getElementById('svgsecurity').innerHTML = securitycode_mask.value; >>); //On Focus Events name.addEventListener('focus', function () < document.querySelector('.creditcard').classList.remove('flipped'); >); cardnumber.addEventListener('focus', function () < document.querySelector('.creditcard').classList.remove('flipped'); >); expirationdate.addEventListener('focus', function () < document.querySelector('.creditcard').classList.remove('flipped'); >); securitycode.addEventListener('focus', function () < document.querySelector('.creditcard').classList.add('flipped'); >); >; 

Источник

16 CSS Credit Cards

Collection of free HTML and CSS credit card code examples from Codepen, GitHub, and other resources. Update of November 2018 collection. Six new items.

Related Articles

Author

Links

Made with

About a code

Responsive, Glittery Bank Card

This card has a background effect that makes it look like there’s a flecked paint, or glitter effect.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

SVG Debit Card Animation #4

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Virtual Credit Card Design

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Glassmorphism Credit Card With HTML & CSS

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

CSS Credit Card with Flip

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About a code

Credit Card Grid Layout

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

3D Floating Credit Card

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Pure CSS Credit Card

Beautiful HTMML and CSS credit card layout.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Flipping Credit Card

Flipping credit card centered using frexbox and 3d transformation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Credit Card

HTML, CSS and SVG credit card.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Nubank Credit Card

Nubank credit card in pure CSS, using CSS variables (custom properties).

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Credit Card Animation

Credit card animation using CSS and SVG.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Credit Card (CSS+SVG)

This credit card is made with SVG and CSS.

Compatible browsers: Chrome, Edge, Opera, Safari

Author

Links

Made with

About the code

Credit Card Mockup

Credit card mockup with animated hologram in HTML and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Links

Made with

About the code

Credit Card Template

Small and independent module that is easy to extend and/or customize, written in Sass. It uses BEM methodology to organize the code.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Author

Источник

25+ Incredible CSS Credit Cards (Free Code + Demos)

Enjoy this 100% free and open source collection of HTML and CSS credit card code examples. CSS credit cards will make any checkout page look awesome.

1. Credit Card Mockup

dailyui challenge. Doing a credit card validator is boring (not doing that in my downtime) so I made a credit card instead, with a lovely swoosh over the hologram.

2. CSS 3D Floating Credit Card!

3. Credit Card In CSS

4. Credit Card Pure CSS

5. CSS Credit Card

6. FlexBox Flipping Credit Card

Flexbox Exercise #1: center horizontally and vertically Flipping credit card centered using frexbox and 3d transformation

7. CSS Credit Card Animation

8. Nubank CSS Credit Card

9. Credit Card Template

Small and independent module that is easy to extend and/or customize, written in Sass. It uses BEM methodology to organize the code. Have a go and use it!

10. Credit Card (CSS+SVG)

This card is made with svg and css that for inspiration. Credits: OCR A Std font is available at https://www.fontyukle.net/en/DownLoad-OCR+A+Std.ttf Font Generator from http://www.fontsquirrel.com/tools/webfont-generator

11. CSS Credit Card Template

12. Gray CSS Credit Card

13. Credit Card — Pure CSS — Flat Design

14. Pure CSS Responsive Credit Cards Icons

responsive credit card icons made with HTML and CSS. Shrink screen to see the credit cards shrink proportionately Sizing the containing module with REM and all internals with EM. This allows for the re-sizing of just one font-size to control the spacing and sizing of all child elements. .

Источник

24 Best Free HTML CSS Credit Cards 2023

Hey there! If you are looking for the best free HTML CSS credit cards for your project then you are in the right place.

In this article, I have listed the 25 best free HTML CSS credit cards for your web-based project. You can easily download these CSS credit cards with just one click and use them for your websites and applications.

So without wasting any more time let’s get started.

1. Credit Card Pure CSS

Credit Card Pure CSS
Created by Filip Vitas

2. Credit Card Mockup

Credit Card Mockup
Created by James Delaney

3. Credit Card Checkout

Credit Card Checkout
Created by Glenn Martin

4. Responsive Credit Card Animate

Responsive Credit Card Animate
Created by Mazlum Yıldırım

5. CSS Credit Card

CSS Credit Card
Created by Jack Harner

Also, if you are searching for the best CSS download buttons for your website then please check out our list of the best free HTML CSS download buttons.

6. Card Explode

Card Explode
Created by Zach Saucier

7. Credit Card CSS3 Animation

Credit Card CSS3 Animation
Created by Travis Arnold

8. Credit Card Checkout

Credit Card Checkout
Created by Daniela Andersson Waara

9. CSS 3D Floating Credit Card

CSS 3D Floating Credit Card
Created by Kivanfan

10. Nubank Credit Card

Nubank Credit Card
Created by Cassio Cardoso

Moreover, if you are looking for the best CSS close buttons for your next project then please check out our list of the best free HTML CSS close buttons.

11. Credit Card Checkout

Credit Card Checkout
Created by Alecia Vogel

12. Payment Form

Payment Form
Created by Axel Michel

13. Credit Card

Credit Card
Created by Sean Kennedy

14. Credit Card

Credit Card
Created by Ryan McGuinn

15. Flipping Credit Card

Flipping Credit Card
Created by Veronica

Furthermore, if you are searching for the best CSS tables for your project then please check out our list of the best free HTML CSS tables.

16. Credit Card

Credit Card
Created by Mohan Khadka

17. Credit Card Template

Credit Card Template
Created by Nika Zawila

18. Credit Card Checkout

Credit Card Checkout
Created by Fabio Ottaviani

19. Credit Card Checkout

Credit Card Checkout
Created by Maycon Luiz

20. Credit Card Checkout

Credit Card Checkout
Created by Marco Biedermann

In addition, if you are searching for the best CSS sliders for your website then please check out our list of the best free HTML CSS sliders.

21. Credit Card Form

Credit Card Form
Created by Muhammed Erdem

22. Credit Card Checkout

Credit Card Checkout
Created by Kyle Lavery

23. Credit Card Checkout

Credit Card Checkout
Created by Tobias

24. Credit Card Payment Form

Credit Card Payment Form
Created by Adam Quinlan

Also, if you are searching for the best CSS checkout forms then please check out our list of the best free HTML CSS checkout forms.

So that’s all from this blog. Thank you for visiting Templateyou and reading this article. I hope you enjoyed the complete list of the 25 best free HTML CSS credit cards.

Also, if you really like this article then please share it with your friends, relatives, and social media followers.

Источник