There are multiple ways to create a card layout in Vue.js. If you’re using Stripe or any other similar payment service, then you’re more likely to have a card setup code that mounts the card on the DOM. However, if you want to know how to build a custom card layout in Vue.js, follow ahead.
Here’s the code you’d need to build the card layout UI. We’ll see how it works in a bit.
<template>
<div id="app">
<div class="credit-card-input" :id="getCardTypeId">
<div class="card">
<div class="face front">
<div class="card-number">
<span>{{ ccNumber }}</span>
</div>
<div class="card-holder">JOHN L SMITH</div>
<div class="card-date">09/24</div>
</div>
<div class="face back">
<div class="mag-strip"></div>
<div class="card-block">
<div class="card-signature">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 924.727 249.218"
>
<path
d="M128.27,76.638a1.193,1.193,0,0,1,1.01,1.262.893.893,0,0,1-1.01,1.01,17,17,0,0,0-2.778-.252h-1.767a11.712,11.712,0,0,0-3.283.379,5.532,5.532,0,0,0-2.525,1.894,131.819,131.819,0,0,0-11.363,18.054q-6.06,11.236-11.867,22.094-5.807,10.6-11.615,20.579T71.205,161.225q-4.04,6.565-9.721,14.014a103.762,103.762,0,0,1-10.731,12.246q-5.555,5.3-11.868,10.479a87.2,87.2,0,0,1-13.761,9.216A82.114,82.114,0,0,1,9.09,213.745,67.918,67.918,0,0,1-10.1,216.27q-11.363,0-19.442-3.283a5.622,5.622,0,0,1-1.894-1.136,2.835,2.835,0,0,1-.379-2.4q0-1.767.126-4.924t.379-6.691l1.767-.5A18.149,18.149,0,0,0-23.1,208.569q5.429,4.671,17.549,4.671a51.264,51.264,0,0,0,19.569-3.661q8.964-3.661,18.811-13.509a156.418,156.418,0,0,0,17.8-21.841q8.964-13,18.559-29.164,4.293-7.323,9.09-15.781t9.343-17.044Q92.163,103.655,96.2,95.7t6.817-14.014a3.516,3.516,0,0,0,.253-1.515q0-1.01-1.515-1.01a110.016,110.016,0,0,0-11.363.631,120.714,120.714,0,0,0-12.12,1.894,116.984,116.984,0,0,0-11.615,3.03,59.849,59.849,0,0,0-9.848,4.04,22.487,22.487,0,0,0-7.7,7.07A17.9,17.9,0,0,0,45.7,106.433a11.191,11.191,0,0,0,.505,3.535q.5.758-.505.758a8.89,8.89,0,0,1-2.651-3.03q-1.389-2.272-1.389-7.07,0-4.04,4.04-9.216T60.348,82.7a74.252,74.252,0,0,1,8.837-2.273q5.05-1.01,12.878-1.894t19.064-1.389Q112.362,76.638,128.27,76.638Zm49.995,69.437a51.5,51.5,0,0,1-10.479,10.479,22.657,22.657,0,0,1-14.014,4.671,18.289,18.289,0,0,1-8.459-2.146,16.392,16.392,0,0,1-6.691-6.439q-1.767,4.04-4.545,9.216a88.153,88.153,0,0,1-6.565,10.353,64.752,64.752,0,0,1-8.459,9.469,46.867,46.867,0,0,1-9.974,7.07,19.567,19.567,0,0,1-7.575,2.02q-9.09,0-9.09-8.08a28.778,28.778,0,0,1,1.641-9.342A57.608,57.608,0,0,1,98.223,164a87.5,87.5,0,0,1,5.429-8.585,53.587,53.587,0,0,1,5.429-6.565,52.687,52.687,0,0,1,12.12-9.848,35.01,35.01,0,0,1,14.645-4.8,42,42,0,0,1,1.515-4.671,4.625,4.625,0,0,1,3.535-3.156l2.525-.505a9.013,9.013,0,0,0,2.273-.757,1.422,1.422,0,0,1,1.515-.126q.758.379.253,1.389a21.029,21.029,0,0,0-2.651,7.07,46.353,46.353,0,0,0-.884,9.342q0,7.07,2.651,11.615t9.216,4.545a18.387,18.387,0,0,0,11.867-4.292,46.02,46.02,0,0,0,8.837-9.342q.505-1.263,1.641-.758T178.265,146.075ZM136.6,147.842a40.038,40.038,0,0,1-.758-5.3q-.253-3.03-.253-5.808,0-1.262-1.01-1.262a11,11,0,0,0-5.807,1.894,32.117,32.117,0,0,0-6.06,5.05,77.714,77.714,0,0,0-6.06,7.2,89.571,89.571,0,0,0-5.555,8.333,93.571,93.571,0,0,0-5.934,11.994,28.818,28.818,0,0,0-2.4,12.246,8.449,8.449,0,0,0,.631,3.283q.631,1.515,2.9,1.515,4.293,0,9.343-4.8a75.4,75.4,0,0,0,9.6-11.236,90.814,90.814,0,0,0,7.7-13Q136.1,151.378,136.6,147.842ZM322.19,22.6a35.655,35.655,0,0,1-.379,6.06,11.965,11.965,0,0,1-.757,2.777q-.379.757-.758.379a1.211,1.211,0,0,1-.379-.884,18.28,18.28,0,0,0-.884-4.8A15.217,15.217,0,0,0,315.5,20.2a22.217,22.217,0,0,0-7.449-5.05,30.507,30.507,0,0,0-12.372-2.146A51.24,51.24,0,0,0,282.169,14.9a52.148,52.148,0,0,0-15.024,7.323,108.97,108.97,0,0,0-17.3,15.024,221.614,221.614,0,0,0-20.074,24.871q-10.857,15.276-23.609,37.118t-27.9,51.636q1.767-1.515,5.555-4.545t8.332-6.06a102.177,102.177,0,0,1,8.838-5.3,16.349,16.349,0,0,1,7.322-2.272q2.272,0,2.272,1.767,0,1.515-2.272,4.545-2.02,3.03-5.3,8.332T196.571,158.7a121.911,121.911,0,0,0-5.429,11.868,27.316,27.316,0,0,0-2.273,9.342q0,4.04,2.02,6.06a7.507,7.507,0,0,0,5.555,2.02q5.807,0,16.412-7.575T237.1,154.66a1.455,1.455,0,0,1,1.01-.505q.505,0,.505,1.01A123.283,123.283,0,0,1,227.376,168.8a149.112,149.112,0,0,1-13.13,12.372,72.87,72.87,0,0,1-13.383,8.964,27.327,27.327,0,0,1-12.246,3.409,9.491,9.491,0,0,1-6.817-2.4,8.787,8.787,0,0,1-2.525-6.691q0-4.04,2.778-10.352t6.186-12.751q3.409-6.439,6.186-11.868t2.777-7.7q0-1.262-.757-1.262-2.272,0-8.206,4.292t-14.771,16.16q-3.535,6.312-7.322,13.13t-6.565,12.12q-2.02,4.04-3.788,4.04a11.583,11.583,0,0,1-3.283-.631,2.436,2.436,0,0,1-2.02-2.4,6.285,6.285,0,0,1,.757-2.777q10.605-19.19,20.705-36.234T192.4,114.765q12.12-18.937,25.124-38.632a381.545,381.545,0,0,1,26.639-35.855,160.539,160.539,0,0,1,27.649-26.386Q285.83,3.665,299.97,3.665a32.2,32.2,0,0,1,7.322.884,25.335,25.335,0,0,1,7.2,2.9,15.649,15.649,0,0,1,5.555,5.681A18.554,18.554,0,0,1,322.19,22.6ZM304.01,156.428a137.192,137.192,0,0,1-10.479,12.751,94.973,94.973,0,0,1-12.625,11.489A78.024,78.024,0,0,1,267.271,189a31.5,31.5,0,0,1-13.509,3.283,16.717,16.717,0,0,1-5.555-.884q-2.525-.884-2.525-4.419t2.525-8.964q2.525-5.429,5.934-11.489t7.07-12.372a109.159,109.159,0,0,0,5.934-11.615,2.77,2.77,0,0,0,.126-2.146q-.379-.884-1.641-.126a77.4,77.4,0,0,0-6.565,4.8q-3.787,3.03-7.7,6.439t-7.575,6.944a75.6,75.6,0,0,0-5.934,6.313q-4.04,6.312-6.944,11.615t-7.2,11.867q-1.01,1.515-1.515,1.515-1.262,0-2.146-2.778a16.515,16.515,0,0,1-.884-3.535q0-2.272,3.156-6.186t6.944-8.711q4.04-8.08,8.333-17.044t7.322-16.034a2.48,2.48,0,0,1,2.273-1.263,4.345,4.345,0,0,1,4.04,4.04q0,1.01-3.661,6.944a121.658,121.658,0,0,0-7.2,13.761q4.8-4.292,10.479-9.09t10.858-8.838q5.176-4.04,9.09-6.691t5.429-2.651a2.452,2.452,0,0,1,1.894,1.136,3.567,3.567,0,0,1,.884,2.146,6.717,6.717,0,0,1-1.263,3.03q-2.777,4.04-6.818,10.353t-7.7,13a134.4,134.4,0,0,0-6.186,12.751q-2.525,6.06-2.525,9.595,0,3.03,1.263,4.166a5.94,5.94,0,0,0,4.04,1.136q4.292,0,10.1-3.283a92.55,92.55,0,0,0,11.994-8.206,102.647,102.647,0,0,0,11.741-10.984,84.9,84.9,0,0,0,9.09-11.615,1.145,1.145,0,0,1,1.515-.379Q305.272,154.913,304.01,156.428ZM441.875,78.91a18.554,18.554,0,0,0-3.409-.757,36.216,36.216,0,0,0-4.671-.253q-4.8,0-7.322,3.03t-5.3,6.565q-3.282,4.545-6.818,9.974t-6.312,10.479q-2.525,4.292-5.934,10.226t-7.2,12.625q-3.787,6.691-7.7,13.509t-7.449,12.878a70.869,70.869,0,0,1-12.246,15.781,68.218,68.218,0,0,1-13,9.469q-1.515.758-1.768,1.515t2.02.758q7.07-.758,16.917-1.515T391,181.8l17.044-1.136q7.575-.5,10.605-.5h3.282q2.273,0,4.545.126t4.293.252a18.154,18.154,0,0,1,3.03.379q4.04,1.01,4.04,3.535a21.087,21.087,0,0,1-1.136,4.924,39.308,39.308,0,0,1-2.146,5.681q-.5,0-.5-1.01a8.748,8.748,0,0,0-.379-2.525,2.682,2.682,0,0,0-1.894-1.767,39.848,39.848,0,0,0-8.585-2.273q-4.8-.758-9.848-1.136t-9.848-.505q-4.8-.126-9.09-.126-14.645,0-24.619.505t-16.791,1.262q-6.818.757-11.11,1.641t-7.575,1.894a3.388,3.388,0,0,1-1.767-1.136,2.618,2.618,0,0,1-.758-1.641q0-1.515,2.02-1.515a57.658,57.658,0,0,0,8.08-.5,16.09,16.09,0,0,0,6.06-2.02,32.52,32.52,0,0,0,7.7-6.944A112.57,112.57,0,0,0,364.61,164q5.3-8.837,11.236-19.443t11.867-21.589q5.934-10.984,11.741-21.463t10.6-18.559a3.637,3.637,0,0,1,1.641-1.894,20.965,20.965,0,0,1,2.4-1.136,67.593,67.593,0,0,1,13.256-3.282,91.952,91.952,0,0,1,14.266-1.263,1.6,1.6,0,0,1,1.136,1.768A2.255,2.255,0,0,1,441.875,78.91ZM597.92,86.485q-1.01,2.525-2.4,6.565t-2.146,6.817q-1.01.5-1.767-.757a8.433,8.433,0,0,0,.757-3.787q0-4.545-4.419-8.585T573.932,82.7q-10.1,0-16.412,5.934t-6.312,15.781a29.367,29.367,0,0,0,3.535,14.14,88.019,88.019,0,0,0,7.828,12.12q3.283,4.292,5.429,7.2a42.087,42.087,0,0,1,3.409,5.3,19.372,19.372,0,0,1,1.767,4.545,22.912,22.912,0,0,1,.505,5.176,23.882,23.882,0,0,1-2.4,10.352,38.056,38.056,0,0,1-6.312,9.342,57.3,57.3,0,0,1-8.585,7.7,50.581,50.581,0,0,1-9.216,5.429,61.5,61.5,0,0,1-25.25,5.05,65.51,65.51,0,0,1-11.489-1.01,41.208,41.208,0,0,1-10.479-3.283q-1.263-.758-2.272-1.389a2.778,2.778,0,0,1-1.263-1.389q1.01-4.292,2.4-9.721t2.4-8.964q0-.5.757-.5t.758,1.262a14.3,14.3,0,0,0-.758,4.545q0,7.07,5.808,12.5t17.927,5.429a49.5,49.5,0,0,0,9.216-.884,35.572,35.572,0,0,0,8.459-2.651,37.041,37.041,0,0,0,13.256-9.974,22.94,22.94,0,0,0,5.429-15.276,20.84,20.84,0,0,0-2.02-8.711q-2.02-4.419-7.828-11.741a83,83,0,0,1-7.7-11.615,24.621,24.621,0,0,1-2.651-11.615,32.227,32.227,0,0,1,2.9-13.13,47.41,47.41,0,0,1,7.2-11.615,48.1,48.1,0,0,1,4.166-4.166,33.434,33.434,0,0,1,6.313-4.419,45.471,45.471,0,0,1,8.585-3.535,37.262,37.262,0,0,1,10.984-1.515,27.093,27.093,0,0,1,7.828,1.136,15.174,15.174,0,0,1,6.818,4.419A6.056,6.056,0,0,1,597.92,86.485Zm83.325,80.8q-3.535,4.04-8.459,9.09a126.472,126.472,0,0,1-10.479,9.6,64.428,64.428,0,0,1-11.489,7.575,25.212,25.212,0,0,1-11.489,3.03q-5.05,0-7.07-2.02t-2.02-6.312q0-2.778,2.9-9.09t6.439-13.13q3.535-6.817,6.439-13t2.9-8.711q0-1.515-1.263-1.515a48.474,48.474,0,0,0-7.449,5.176q-4.166,3.409-8.206,7.449t-7.449,7.827a70.069,70.069,0,0,0-5.176,6.313,48.236,48.236,0,0,0-3.535,6.06l-3.409,6.818a40.394,40.394,0,0,1-3.282,5.555q-1.641,2.272-2.9,2.272A2.9,2.9,0,0,1,603.98,189a4.043,4.043,0,0,1-1.01-2.525,8.684,8.684,0,0,1,.758-2.651,23,23,0,0,1,2.778-4.671,79.4,79.4,0,0,0,5.934-9.6q2.651-5.05,4.545-9.342t2.9-7.322a21.108,21.108,0,0,0,1.01-3.535q0-2.02-1.01-2.02-1.515,0-5.176,3.156a109.32,109.32,0,0,0-7.954,7.7q-4.293,4.545-8.459,9.6t-6.944,9.09q-3.535,5.3-6.06,9.342t-3.787,4.04a2.149,2.149,0,0,1-2.4-1.768,16.828,16.828,0,0,1-.379-3.535,5.094,5.094,0,0,1,1.01-3.283q6.817-10.857,13.383-22.22t13.13-22.473q1.263-2.272,2.777-2.273A2.836,2.836,0,0,1,611.3,136.1a4.559,4.559,0,0,1,1.01,2.651,74.03,74.03,0,0,1-6.06,12.372q-4.293,7.323-7.575,13.383a185.044,185.044,0,0,1,16.917-17.549q6.817-5.934,11.11-5.934,2.778,0,2.778,3.788,0,2.525-2.273,7.7t-4.04,8.459q-.505,1.01-.126.884a2.487,2.487,0,0,0,.884-.631q3.03-3.535,6.944-7.449a100.987,100.987,0,0,1,8.333-7.449q4.419-3.535,8.838-6.565a58.44,58.44,0,0,1,8.206-4.8q3.787,0,3.787,3.535a4.766,4.766,0,0,1-.253,1.515,13.863,13.863,0,0,1-.757,1.768q-1.263,2.778-4.671,9.09t-6.944,13.509q-3.535,7.2-6.186,13.887t-2.651,10.226q0,5.05,4.8,5.05a18.75,18.75,0,0,0,9.595-3.03,76.187,76.187,0,0,0,10.1-7.322,105.154,105.154,0,0,0,9.342-8.964q4.293-4.671,7.323-8.206,1.01-1.515,2.02-1.262T681.245,167.285ZM721.9,99.615a9.256,9.256,0,0,1-2.651,6.06,7.782,7.782,0,0,1-5.934,3.03,2.678,2.678,0,0,1-3.03-3.03,10.05,10.05,0,0,1,2.4-6.312,7.3,7.3,0,0,1,5.934-3.03Q721.9,96.332,721.9,99.615Zm11.363,56.308a114.82,114.82,0,0,1-13.888,14.9,119.805,119.805,0,0,1-14.393,11.362,45.224,45.224,0,0,1-10.352,5.05,30.659,30.659,0,0,1-9.6,1.768,28.96,28.96,0,0,1-3.535-.253,9.035,9.035,0,0,1-3.661-1.262,9.254,9.254,0,0,1-2.778-2.651,7.639,7.639,0,0,1-1.136-4.419q0-3.282,2.525-8.964t5.934-11.741q3.409-6.06,6.818-11.615t5.429-8.333a9.518,9.518,0,0,1,4.419-3.409,13.991,13.991,0,0,1,4.166-1.389q1.262,0,1.262.758a4.837,4.837,0,0,1-.379,1.515,4.231,4.231,0,0,1-.884,1.515q-3.283,5.05-6.691,11.11T690.335,161.6a91.715,91.715,0,0,0-4.419,10.479,25.116,25.116,0,0,0-1.641,7.575,5.479,5.479,0,0,0,1.641,4.419,6.617,6.617,0,0,0,4.419,1.389q5.05,0,11.11-3.409a86.84,86.84,0,0,0,11.994-8.206,114.88,114.88,0,0,0,10.984-10.1,97.019,97.019,0,0,0,7.828-9.09q1.263-1.263,1.389-.631A3.693,3.693,0,0,1,733.26,155.923ZM892.84,28.663q0,7.828-5.681,18.054T870.494,68.3A230.059,230.059,0,0,1,843.6,91.661a323.037,323.037,0,0,1-36.108,23.356q-7.07,12.877-12.5,23.356t-10.479,22.094q-.505,1.262-.253,1.389t1.01-.631a167.923,167.923,0,0,1,14.9-15.529A66.712,66.712,0,0,1,817.6,133.7a8.014,8.014,0,0,1,2.272-.505,3.561,3.561,0,0,1,3.156,1.768,5.781,5.781,0,0,1,1.136,2.777,18.883,18.883,0,0,1-1.263,4.545q-1.263,3.535-3.283,8.08t-4.419,9.721q-2.4,5.176-4.671,9.721-2.273,4.293-5.3,9.974t-6.312,11.363q-3.283,5.681-6.439,10.857t-5.934,8.964q-10.858,15.15-22.094,24.366a76.238,76.238,0,0,1-23.861,13.509,67.594,67.594,0,0,1-22.22,4.04,57.554,57.554,0,0,1-13.761-1.641,40.686,40.686,0,0,1-12.246-5.176,5.1,5.1,0,0,1-2.146-2.651,24.978,24.978,0,0,1-.631-3.409,23.715,23.715,0,0,0-.253-2.9l-.505-3.788q-.253-1.894-.505-3.661a20.5,20.5,0,0,1-.253-2.525q0-2.272,2.02-1.768a21.712,21.712,0,0,0,1.389,6.818,23.7,23.7,0,0,0,5.05,8.08,29.2,29.2,0,0,0,9.848,6.817q6.186,2.778,15.529,2.778a63.324,63.324,0,0,0,17.927-3.03,50.951,50.951,0,0,0,22.22-13.382,153.464,153.464,0,0,0,18.938-23.482q4.545-6.817,9.09-15.276t8.333-16.539q3.787-8.08,6.439-14.519t3.409-8.964a59.006,59.006,0,0,0,2.273-7.7,23.335,23.335,0,0,0,.505-3.914q0-1.767-1.263-1.768-1.01,0-5.934,3.914a104.327,104.327,0,0,0-10.352,9.6,81.762,81.762,0,0,0-9.721,12.372q-4.292,6.691-4.292,12.5a21.751,21.751,0,0,0,.253,3.535,15.492,15.492,0,0,1,.253,2.02q0,1.263-3.661,2.273a31.223,31.223,0,0,0-7.2,3.03q-1.01,0-1.01-2.02v-4.8a20.486,20.486,0,0,1,.631-4.671,40.235,40.235,0,0,1,2.273-6.439q1.641-3.787,5.176-10.479t9.09-17.17q5.555-10.479,13.887-25.881A214.524,214.524,0,0,1,776.69,128.9a191.748,191.748,0,0,1-25.755,7.575q-2.272,3.787-5.555,9.469t-6.186,11.868a112.771,112.771,0,0,0-4.924,12.246,34.221,34.221,0,0,0-2.02,10.6,14.843,14.843,0,0,0,1.01,6.313q1.01,2.02,4.292,2.02a18.732,18.732,0,0,0,7.2-1.515,91.42,91.42,0,0,0,9.469-4.8.84.84,0,0,1,1.262.126,1.079,1.079,0,0,1,0,1.389q-16.665,10.1-26.765,10.1a9.335,9.335,0,0,1-5.3-1.515q-2.273-1.515-2.273-8.333,0-3.03,2.146-8.459t5.3-11.994q3.156-6.565,6.691-13.509t6.313-13a88.7,88.7,0,0,1-13.13,1.894q-7.827.631-14.14.884-1.01,0-1.01-.758,0-1.515,3.03-1.515,2.777,0,6.818-.126t7.954-.505q3.914-.379,7.323-.884a18.015,18.015,0,0,0,4.419-1.01q2.273-3.535,5.05-7.827t5.555-8.459q2.777-4.166,5.176-7.449a24.921,24.921,0,0,1,3.661-4.293,24.438,24.438,0,0,1,5.934-2.4q3.914-1.136,7.2-2.146,1.263,0,1.01.757a2.433,2.433,0,0,1-1.01,1.263,14.966,14.966,0,0,0-3.914,1.894,12.374,12.374,0,0,0-3.409,3.156q-3.03,3.788-6.944,9.721T752.2,134.207a150.747,150.747,0,0,0,23.1-6.565,195.9,195.9,0,0,0,24.871-11.11q3.535-6.313,7.828-14.393t8.964-16.413q4.671-8.333,9.09-16.16t8.206-13.382a148.086,148.086,0,0,1,11.362-15.15,94.747,94.747,0,0,1,12.5-12.246A64.545,64.545,0,0,1,871,20.583a29.269,29.269,0,0,1,12.5-3.03,13.08,13.08,0,0,1,6.313,1.641q3.03,1.641,3.03,9.216Zm-6.818,2.525a10.3,10.3,0,0,0-1.01-5.05,6.692,6.692,0,0,0-2.651-2.651,10.248,10.248,0,0,0-3.535-1.136,27.709,27.709,0,0,0-3.661-.253,16.04,16.04,0,0,0-5.555,1.262,28.737,28.737,0,0,0-7.827,5.176,102.156,102.156,0,0,0-10.731,11.236,193.057,193.057,0,0,0-14.014,19.442q-2.272,3.788-5.555,9.848t-7.07,13.256q-3.788,7.2-7.828,15.024t-7.828,15.15A259.606,259.606,0,0,0,833.5,97.216a224.445,224.445,0,0,0,25.124-20.074A124.4,124.4,0,0,0,878.2,54.417Q886.022,42.55,886.023,31.188Z"
/>
</svg>
</div>
<div class="card-cvv">
{{ cvvNumber }}
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<input
class="np-input"
placeholder="Enter card number"
type="text"
name="cc"
v-model="ccNumber"
maxlength="16"
/>
</div>
<div>
<input
id="cvv"
class="np-input"
type="text"
name="cvv"
v-model="cvvNumber"
maxlength="3"
placeholder="Enter CVV"
inputmode="numeric"
/>
</div>
</div>
<div class="np-example">
<h4>Examples</h4>
<dl>
<div>
<dt>Visa</dt>
<dd>4111111111111111</dd>
</div>
<div>
<dt>MasterCard</dt>
<dd>5555555555554444</dd>
</div>
<div>
<dt>Discover</dt>
<dd>6011111111111117</dd>
</div>
</dl>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
userInputValue: "",
ccNumber: null,
cvvNumber: null,
};
},
computed: {
getCardTypeId() {
if (this.ccNumber) {
if (this.ccNumber[0] === "4") {
return "visa";
} else if (this.ccNumber[0] === "5") {
return "mastercard";
} else if (this.ccNumber[0] === "6") {
return "discover";
}
}
return "";
},
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding: 24px;
}
body {
background: snow;
height: 100vh;
display: grid;
place-content: center;
box-sizing: border-box;
font-family: "IBM Plex Sans", sans-serif;
}
.np-ib {
display: inline-block;
}
.np-input {
font-size: 14px;
padding: 4px 6px;
margin: 0px 0px 8px 0px;
border: 1px solid rgb(154, 189, 255);
background: rgb(233, 240, 255);
outline: none;
}
.credit-card-input {
--np-card-type: "Credit Card";
--np-card-color: linear-gradient(
45deg,
#000 0%,
#000 11%,
#000 22%,
#000 33%,
#000 44%,
#000 56%,
#000 67%,
#000 78%,
#000 89%,
#000 100%
);
margin-inline: auto;
display: grid;
place-content: center;
}
.credit-card-input .card {
margin-inline: auto;
aspect-ratio: 1.7777777778;
height: 250px;
color: white;
text-shadow: 0px 2px 3px rgba(51, 51, 51, 0.85);
border-radius: 1rem;
background-image: var(--np-card-color);
margin-block-end: 1.5rem;
position: relative;
transition: 0.5s ease;
transform-style: preserve-3d;
box-shadow: 0px 0px 2.7px rgba(22, 16, 16, 0.022),
0px 0px 6.9px rgba(0, 0, 0, 0.031), 0px 0px 14.2px rgba(0, 0, 0, 0.039),
0px 0px 29.2px rgba(0, 0, 0, 0.048), 0px 0px 80px rgba(0, 0, 0, 0.07);
}
.credit-card-input .card .face {
display: flex;
border-radius: 1rem;
backface-visibility: hidden;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
}
.credit-card-input .card .card-number {
position: absolute;
bottom: 90px;
left: 20px;
font-size: 1.75rem;
font-family: "IBM Plex Mono", monospace;
font-variant-numeric: tabular-nums;
}
.credit-card-input .card .card-number span:nth-child(4n) {
margin-inline-end: 1ch;
}
.credit-card-input .card .card-holder {
position: absolute;
left: 20px;
bottom: 30px;
font-size: 1.25rem;
font-family: "IBM Plex Mono", monospace;
font-variant-numeric: tabular-nums;
}
.credit-card-input .card .card-date {
position: absolute;
right: 20px;
bottom: 30px;
font-size: 1.25rem;
font-family: "IBM Plex Mono", monospace;
font-variant-numeric: tabular-nums;
}
.credit-card-input .card .back {
background: var(--np-card-color);
transform: rotateY(180deg);
}
.credit-card-input .card .card-block {
position: absolute;
bottom: 80px;
right: 20px;
display: flex;
align-items: center;
height: 40px;
background: white;
}
.credit-card-input .card .card-signature {
padding-inline: 1ch;
height: 100%;
width: 150px;
background: #f2fcff;
overflow: hidden;
}
.credit-card-input .card .card-signature svg {
fill: #000;
filter: blur(3px);
}
.credit-card-input .card .card-cvv {
color: black;
text-shadow: none;
font-size: 1.25rem;
width: 3ch;
padding-inline: 1ch;
font-family: "IBM Plex Mono", monospace;
font-variant-numeric: tabular-nums;
font-style: oblique;
}
.credit-card-input .card .mag-strip {
position: absolute;
top: 40px;
background: rgba(51, 51, 51, 0.5);
height: 40px;
width: 100%;
}
.credit-card-input .card:before {
content: var(--np-card-type);
font-size: 1.25rem;
color: white;
text-shadow: none;
font-weight: bold;
position: absolute;
top: 20px;
right: 20px;
}
.credit-card-input form {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1rem;
}
.credit-card-input form .form-group {
display: flex;
flex-flow: column;
}
.credit-card-input form input {
font-size: 1.2rem;
padding: 1ch;
border: 1px solid #333;
border-radius: 0.25rem;
}
.credit-card-input .np-example {
font-size: 12px;
background: rgb(229, 238, 255);
padding: 2px 10px;
}
.credit-card-input .np-example dt {
padding-bottom: 4px;
}
.credit-card-input dl {
display: flex;
gap: 1rem;
}
.credit-card-input dl dt {
font-weight: bold;
}
.credit-card-input dl dd {
margin: 0;
font-family: "IBM Plex Mono", monospace;
font-variant-numeric: tabular-nums;
}
#visa {
--np-card-type: "VISA";
--np-card-color: linear-gradient(
45deg,
hsl(234deg 58% 23%) 0%,
hsl(234deg 57% 26%) 11%,
hsl(234deg 56% 30%) 22%,
hsl(234deg 56% 34%) 33%,
hsl(234deg 55% 38%) 44%,
hsl(234deg 54% 43%) 56%,
hsl(234deg 54% 47%) 67%,
hsl(234deg 56% 51%) 78%,
hsl(234deg 67% 56%) 89%,
hsl(234deg 79% 60%) 100%
);
}
#mastercard {
--np-card-type: "MasterCard";
--np-card-color: linear-gradient(
45deg,
hsl(357deg 79% 48%) 0%,
hsl(359deg 71% 50%) 11%,
hsl(359deg 70% 53%) 22%,
hsl(359deg 69% 55%) 33%,
hsl(359deg 68% 56%) 44%,
hsl(359deg 67% 58%) 56%,
hsl(359deg 66% 59%) 67%,
hsl(358deg 64% 61%) 78%,
hsl(358deg 62% 62%) 89%,
hsl(357deg 60% 63%) 100%
);
}
#discover {
--np-card-type: "Discover";
--np-card-color: linear-gradient(
45deg,
hsl(19deg 76% 48%) 0%,
hsl(18deg 73% 51%) 11%,
hsl(18deg 75% 53%) 22%,
hsl(18deg 77% 55%) 33%,
hsl(18deg 79% 58%) 44%,
hsl(19deg 81% 60%) 56%,
hsl(19deg 83% 62%) 67%,
hsl(19deg 86% 64%) 78%,
hsl(19deg 89% 66%) 89%,
hsl(19deg 93% 69%) 100%
);
}
.credit-card-input:has(input[name="cvv"]:focus) .card {
transform: rotateY(180deg);
}
</style>
Code language: HTML, XML (xml)In the above code, we’ve created an element with the class credit-card-input on line 3. This class has some default variable values as mentioned in lines 133-146. –np-card-type: ‘Credit Card’ and –np-card-color with a black gradient value. This is the default fallback when no input is made for the card.
On line 39, we have a reactive state named ccNumber. This is for the credit card number. We’ve also created a computed property named getCreditCardId on line 89, and attached it to the DOM id on line 3. This will return a string among visa, mastercard, and discover cards based on the first input value the user makes.
Based on the id attached to the credit-card-input, any one of the id styles is selected. These styles are defined though lines 290-338.
The styling of the card has been inspired by Ryan Trimble’s codepen.
This is what the working version would look like:
You can find a full working version of the above code from my repo links below:
