Credit Card animation using Paystack

Open In Editor Video Publish Your Code

<body>
        <main>
            <section id="card" class="card">
                <div id="highlight"></div>
                <section class="card__front">
                    <div class="card__header">
                        <div>CreditCard</div>
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            height="40"
                            width="60"
                            id="svg895"
                            version="1.1"
                            viewBox="-96 -98.908 832 593.448"
                        >
                            <defs id="defs879">
                                <style id="style877" type="text/css">
                                    .e {
                                        fill: #f79e1b;
                                    }
                                </style>
                            </defs>
                            <path
                                id="rect887"
                                display="inline"
                                fill="#ff5f00"
                                stroke-width="5.494"
                                d="M224.833 42.298h190.416v311.005H224.833z"
                            />
                            <path
                                id="path889"
                                d="M244.446 197.828a197.448 197.448 0 0175.54-155.475 197.777 197.777 0 100 311.004 197.448 197.448 0 01-75.54-155.53z"
                                fill="#eb001b"
                                stroke-width="5.494"
                            />
                            <path
                                id="path891"
                                d="M621.101 320.394v-6.372h2.747v-1.319h-6.537v1.319h2.582v6.373zm12.691 0v-7.69h-1.978l-2.307 5.493-2.308-5.494h-1.977v7.691h1.428v-5.823l2.143 5h1.483l2.143-5v5.823z"
                                class="e"
                                fill="#f79e1b"
                                stroke-width="5.494"
                            />
                            <path
                                id="path893"
                                d="M640 197.828a197.777 197.777 0 01-320.015 155.474 197.777 197.777 0 000-311.004A197.777 197.777 0 01640 197.773z"
                                class="e"
                                fill="#f79e1b"
                                stroke-width="5.494"
                            />
                        </svg>
                    </div>
                    <div id="card_number" class="card__number">
                        <span>#<br /></span>
                        <span>#<br /></span>
                        <span>#<br /></span>
                        <span>#<br /></span>

<span>#<br /></span>
                        <span>#<br /></span>
                        <span>#<br /></span>
                        <span>#<br /></span>
                    </div>
                    <div class="card__footer">
                        <div class="card__holder">
                            <div class="card__section__title">Card Holder</div>
                            <div id="card_holder">Name on card</div>
                        </div>
                        <div class="card__expires">
                            <div class="card__section__title">Expires</div>
                            <span id="card_expires_month">MM</span>/<span
                                id="card_expires_year"
                                >YY</span
                            >
                        </div>
                    </div>
                </section>
                <section class="card__back">
                    <div class="card__hide_line"></div>

<form class="form">
                <div>
                    <label for="number">Card Number</label>
                    <input id="number" type="number" />
                </div>
                <div>
                    <label for="holder">Card Holder</label>
                    <input id="holder" type="text" />
                </div>
                <div class="filed__group">
                    <div>
                        <label for="expiration_month">Expiration Date</label>
                        <div class="filed__date">
                            <select id="expiration_month">
                                <option selected disabled>Month</option>
                                <option>01</option>
                                <option>02</option>
                                <option>03</option>
                                <option>04</option>
                                <option>05</option>
                                <option>06</option>
                                <option>07</option>
                                <option>08</option>
                                <option>09</option>
                                <option>10</option>
                                <option>11</option>
                                <option>12</option>
                            </select>
                            <select id="expiration_year">
                                <option selected disabled>Year</option>
                                <option>2023</option>
                                <option>2024</option>
                                <option>2025</option>
                                <option>2026</option>
                                <option>2027</option>
                                <option>2028</option>
                                <option>2029</option>
                                <option>2030</option>
                                <option>2031</option>
                                <option>2032</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label for="cvv">CVV</label>
                        <input id="cvv" type="number" />
                    </div>
                </div>
            </form>
          <div style="text-align:center; margin-top:10px;">
      <button class="amount-btn" data-amount="20">GHS 20</button>
      <button class="amount-btn" data-amount="50">GHS 50</button>
      <button class="amount-btn" data-amount="100">GHS 100</button>
    </div>
  </main>

</main>
        
<script src="https://js.paystack.co/v1/inline.js"></script>

</body>
</html>

CSS

:root {font-family: 'Poppins', sans-serif;
  line-height: 1.5;
  font-weight: 400;

color-scheme: #000;
  background-color: #242424;

font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

* {
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  width: 100vw;
  height: 100vh;
  background: #fbfcff;
  padding: 24px;
  margin: 0;
  display: flex;
  align-items:center;
  justify-content: center;
}

#highlight {
  position: absolute;
  border: 1px solid #fff;
  border-radius: 12px;
  z-index: 1;
  width: 0;
  height: 0;
  top: 0;
  left: 0;
  box-shadow: 0 0 5px #fff;
  transition: .3s;
}

#highlight.highlight__number {
  width: 346px;
  height: 40px;
  top: 92px;
  left: 18px;
}

#highlight.highlight__holder {
  width: 264px;
  height: 56px;
  top: 156px;
  left: 18px;
}

#highlight.highlight__expire {
  width: 86px;
  height: 56px;
  top: 156px;
  left: 323px;
}

#highlight.highlight__cvv {
  width: 381px;
  height: 91px;
  top: 83px;
  left: 18px;
}

#highlight.hidden {
  display: none;
}

.card { 
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  transform-style: preserve-3d;
  transition: 1s;
}

.card:hover,
.card.flip {
  transform: rotateY(180deg);
}

.card:hover #highlight {
  display: none;
}

.card__front,
.card__back {
  width: 100%;
  max-width: 420px;
  height: 233px;
  border-radius: 20px;
  padding: 24px 30px 30px;
  background: linear-gradient(to right bottom, #323941, #061018);
  box-shadow: 0 33px 50px -15px rgba(50,55,63,.66);
  color: #fff;
  overflow: hidden;
  margin: 0 auto;
  backface-visibility: hidden;
}

@media (max-width: 450px) {
  .card__front,
  .card__back{
    padding: 8px 12px 16px;
    height: 206px;
  }
}

.card__back {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(180deg);
  padding: 24px 0 0;
}

.card__front {
  position: relative;
}

.card__front:before,
.card__back:before {
  content: "";
  position: absolute;
  border: 16px solid #ff6be7;
  border-radius: 100%;
  left: -17%;
  top: -45px;
  height: 300px;
  width: 300px;
  filter: blur(13px);
}

.card__front:after,
.card__back:after {
  content: "";
  position: absolute;
  border: 16px solid #7288ff;
  border-radius: 100%;
  width: 300px;
  top: 55%;
  left: -200px;
  height: 300px;
  filter: blur(13px);
}

.card__hide_line {
  height: 40px;
  width: 100%;
  background-color: #6b7280;
  position: relative;
  z-index: 1;
}

.card_cvv {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  padding: 0 32px;
  display: flex;
  flex-direction: column;
  align-items: end;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.card_cvv_field {
  margin-top: 6px;
  background-color: #fff;
  border-radius: 12px;
  height: 44px;
  width: 100%;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: end;
  padding: 0 12px;
  font-size: 25px;
  line-height: 21px;
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
}

.card__number {
  /* word-spacing: 10px; */
  font-size: 22px;
  margin-bottom: 32px;
  position: relative;
  z-index: 1;
  display: flex;
  height: 33px;
  overflow: hidden;
}

.card__number span {
  display: flex;
  flex-direction: column;
  transition: .2s;
}

.card__number span.filed { 
  transform: translateY(-33px);
}

.card__number span:nth-child(4n) {
  margin-right: 10px;
}

.card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.card__holder {
  text-transform: uppercase;
}

.card__section__title {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.form {
  border-radius: 12px;
  background: #fff;
  max-width: 600px;
  margin: -170px auto 0;
  padding: 160px 25px 32px;
  border: 1px solid #fa0505;
  box-shadow: 0 0 40px rgba(50,55,63,.16);
  display: grid;
  gap: 12px;
}

label {
  display: block;
  margin: 14px 0 4px;
  color: #0d0c22;
  font-weight: 500;
}

input, select {
  height: 30px;
  display: block;
  width: 100%;
  border: 1px solid #02143a;
  padding: 18px 20px;
  transition: outline 200ms ease, box-shadow 200ms ease;
  border-radius: 12px;
  outline: none;
  background-color: #fff;
  color: #0d0c22;
  font-size: 16px;
}

input:focus,
select:focus {
  border: 1px solid #000;   
  outline: 4px solid rgba(0,0,0,.1);
}

select {
  padding: 0 20px;
}

.filed__group {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
}

.filed__date {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

JS

document.getElementById("number").addEventListener("focus", (e) => {
    document.getElementById("card").classList.remove('flip')
    document.getElementById("highlight").className = 'highlight__number'
})

document.getElementById("holder").addEventListener("focus", (e) => {
    document.getElementById("card").classList.remove('flip')
    document.getElementById("highlight").className = 'highlight__holder'
})

document.getElementById("expiration_month").addEventListener("focus", (e) => {
    document.getElementById("card").classList.remove('flip')
    document.getElementById("highlight").className = 'highlight__expire'
})

document.getElementById("expiration_year").addEventListener("focus", (e) => {
    document.getElementById("card").classList.remove('flip')
    document.getElementById("highlight").className = 'highlight__expire'
})

document.getElementById("cvv").addEventListener("focus", (e) => {
    document.getElementById("card").classList.add('flip')
    document.getElementById("highlight").className = 'highlight__cvv'
})

document.getElementById("cvv").addEventListener("focusout", (e) => {
    document.getElementById("card").classList.remove('flip')
    document.getElementById("highlight").className = 'hidden'
})

let enteredCardNumbers = 0

document.getElementById("number").addEventListener("input", (e) => {
    const value = e.target.value

if(enteredCardNumbers > value.length) {
        document.getElementById('card_number').children[15 - (15 - value.length)].classList.remove('filed')
        document.getElementById('card_number').children[value.length].innerHTML = "#<br>"
    }
    else {
        if(value.length > 4 && value.length < 13) {
            document.getElementById('card_number').children[value.length - 1].innerText += "*"
        }else {
            document.getElementById('card_number').children[value.length - 1].innerText += value.slice(-1)
        }

document.getElementById('card_number').children[value.length - 1].classList.add('filed')
    }

enteredCardNumbers = value.length

})

document.getElementById("holder").addEventListener("input", (e) => {
    document.getElementById('card_holder').innerText = e.target.value
})

document.getElementById("cvv").addEventListener("input", (e) => {
    document.getElementById('card_cvv_field').innerText = Array(e.target.value.length+1).join("*")
})

document.getElementById("expiration_month").addEventListener("change", (e) => {
    document.getElementById('card_expires_month').innerText = e.target.value
})

document.getElementById("expiration_year").addEventListener("change", (e) => {
    document.getElementById('card_expires_year').innerText = e.target.value.slice(-2)
})</script>
<script>
 // Function to trigger Paystack payment
    function payWithPaystack(amount) {
      let cardHolder = document.getElementById('holder').value;
      if (!cardHolder) {
        alert('Please enter card holder name before proceeding.');
        return;
      }

// Attach listeners to all amount buttons
    document.querySelectorAll('.amount-btn').forEach(btn => {
      btn.style.cssText = "margin: 5px; padding:15px 25px; border:none; border-radius:10px; background:#000; color:#fff; font-size:16px; cursor:pointer;";
      btn.addEventListener('click', function() {
        const amount = this.getAttribute('data-amount');
        payWithPaystack(amount);
      });
    });

Credit Card animation using Paystack

Recommended

Gradient Text CSS Animation

3D Flips Card Effect

CSS Card Layout with Gradient Background

HTML

CSS

JS

Recommended

Gradient Text CSS Animation

3D Flips Card Effect

CSS Card Layout with Gradient Background

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS