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:
![](http://nightprogrammer.com/wp-content/uploads/2022/09/credit-card-input-layout-vuejs-example.gif)
You can find a full working version of the above code from my repo links below: