From 3e17a0bf01444bc17e8df3a5ea6efc16fe0ec8ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=BCneyt=20=C5=9Eent=C3=BCrk?= <cneytsenturk@gmail.com>
Date: Sat, 28 Dec 2019 14:41:09 +0300
Subject: [PATCH] Portal invoice payment credit card style

---
 public/css/custom.css                         |   5 +
 resources/assets/css/creditcard/style.scss    | 685 ++++++++++++++++++
 .../assets/js/components/CreditCard/Card.vue  | 246 +++++++
 .../js/components/CreditCard/CardForm.vue     | 316 ++++++++
 resources/assets/js/views/common/items.js     |   4 +-
 resources/assets/js/views/portal/invoices.js  |  30 +-
 .../payment_method/hosted/show.blade.php      |   8 +
 .../payment_method/hosted/signed.blade.php    |   8 +
 8 files changed, 1300 insertions(+), 2 deletions(-)
 create mode 100644 resources/assets/css/creditcard/style.scss
 create mode 100644 resources/assets/js/components/CreditCard/Card.vue
 create mode 100644 resources/assets/js/components/CreditCard/CardForm.vue

diff --git a/public/css/custom.css b/public/css/custom.css
index 283989f03..9084540b6 100644
--- a/public/css/custom.css
+++ b/public/css/custom.css
@@ -131,6 +131,11 @@
 }
 /*--------Carousel Arrows Finish--------*/
 
+/*--------Credit Card--------*/
+.card-input__input:hover, .card-input__input:focus {
+    border-color: #55588b !important;
+}
+/*--------Credit Card Finish--------*/
 
 /*--------General Button Focus--------*/
 button:focus
diff --git a/resources/assets/css/creditcard/style.scss b/resources/assets/css/creditcard/style.scss
new file mode 100644
index 000000000..6c84feb21
--- /dev/null
+++ b/resources/assets/css/creditcard/style.scss
@@ -0,0 +1,685 @@
+
+.wrapper {
+  min-height: 100vh;
+  display: flex;
+  padding: 50px 15px;
+  @media screen and (max-width: 700px), (max-height: 500px) {
+    flex-wrap: wrap;
+    flex-direction: column;
+  }
+}
+
+.card-form {
+  max-width: 570px;
+  margin: auto;
+  width: 100%;
+
+  @media screen and (max-width: 576px) {
+    margin: 0 auto;
+  }
+
+  &__inner {
+    background: #fff;
+    // box-shadow: 3px 13px 30px 0px rgba(21, 34, 67, 0.2);
+    box-shadow: 0 30px 60px 0 rgba(90, 116, 148, 0.4);
+    border-radius: 10px;
+    padding: 35px;
+    padding-top: 180px;
+
+    @media screen and (max-width: 480px) {
+      padding: 25px;
+      padding-top: 165px;
+    }
+    @media screen and (max-width: 360px) {
+      padding: 15px;
+      padding-top: 165px;
+    }
+  }
+
+  &__row {
+    display: flex;
+    align-items: flex-start;
+    @media screen and (max-width: 480px) {
+      flex-wrap: wrap;
+    }
+  }
+
+  &__col {
+    flex: auto;
+    margin-right: 35px;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    @media screen and (max-width: 480px) {
+      margin-right: 0;
+      flex: unset;
+      width: 100%;
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &.-cvv {
+      max-width: 150px;
+      @media screen and (max-width: 480px) {
+        max-width: initial;
+      }
+    }
+  }
+
+  &__group {
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+
+    .card-input__input {
+      flex: 1;
+      margin-right: 15px;
+
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &__button {
+    width: 100%;
+    height: 55px;
+    background: #2364d2;
+    border: none;
+    border-radius: 5px;
+    font-size: 22px;
+    font-weight: 500;
+    font-family: "Source Sans Pro", sans-serif;
+    box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
+    color: #fff;
+    margin-top: 20px;
+    cursor: pointer;
+
+    @media screen and (max-width: 480px) {
+      margin-top: 10px;
+    }
+  }
+}
+
+.card-item {
+  max-width: 430px;
+  height: 270px;
+  margin-left: auto;
+  margin-right: auto;
+  position: relative;
+  z-index: 2;
+  width: 100%;
+
+  @media screen and (max-width: 480px) {
+    max-width: 310px;
+    height: 220px;
+    width: 90%;
+  }
+
+  @media screen and (max-width: 360px) {
+    height: 180px;
+  }
+
+  &.-active {
+    .card-item__side {
+      &.-front {
+        transform: perspective(1000px) rotateY(180deg) rotateX(0deg)
+          rotateZ(0deg);
+      }
+      &.-back {
+        transform: perspective(1000px) rotateY(0) rotateX(0deg) rotateZ(0deg);
+        // box-shadow: 0 20px 50px 0 rgba(81, 88, 206, 0.65);
+      }
+    }
+  }
+
+  &__focus {
+    position: absolute;
+    z-index: 3;
+    border-radius: 5px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    transition: all 0.35s cubic-bezier(0.71, 0.03, 0.56, 0.85);
+    opacity: 0;
+    pointer-events: none;
+    overflow: hidden;
+    border: 2px solid rgba(255, 255, 255, 0.65);
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      background: rgb(8, 20, 47);
+      height: 100%;
+      border-radius: 5px;
+      filter: blur(25px);
+      opacity: 0.5;
+    }
+
+    &.-active {
+      opacity: 1;
+    }
+  }
+
+  &__side {
+    border-radius: 15px;
+    overflow: hidden;
+    // box-shadow: 3px 13px 30px 0px rgba(11, 19, 41, 0.5);
+    box-shadow: 0 20px 60px 0 rgba(14, 42, 90, 0.55);
+    transform: perspective(2000px) rotateY(0deg) rotateX(0deg) rotate(0deg);
+    transform-style: preserve-3d;
+    transition: all 0.8s cubic-bezier(0.71, 0.03, 0.56, 0.85);
+    backface-visibility: hidden;
+    height: 100%;
+
+    &.-back {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      transform: perspective(2000px) rotateY(-180deg) rotateX(0deg) rotate(0deg);
+      z-index: 2;
+      padding: 0;
+      // background-color: #2364d2;
+      // background-image: linear-gradient(
+      //   43deg,
+      //   #4158d0 0%,
+      //   #8555c7 46%,
+      //   #2364d2 100%
+      // );
+      height: 100%;
+
+      .card-item__cover {
+        transform: rotateY(-180deg)
+      }
+    }
+  }
+  &__bg {
+    max-width: 100%;
+    display: block;
+    max-height: 100%;
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+  &__cover {
+    height: 100%;
+    position: absolute;
+    height: 100%;
+    background-color: #1c1d27;
+    background-image: linear-gradient(147deg, #354fce 0%, #0c296b 74%);
+    left: 0;
+    top: 0;
+    width: 100%;
+    border-radius: 15px;
+    overflow: hidden;
+    &:after {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(6, 2, 29, 0.45);
+    }
+  }
+
+  &__top {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    margin-bottom: 40px;
+    padding: 0 10px;
+
+    @media screen and (max-width: 480px) {
+      margin-bottom: 25px;
+    }
+    @media screen and (max-width: 360px) {
+      margin-bottom: 15px;
+    }
+  }
+
+  &__chip {
+    width: 60px;
+    @media screen and (max-width: 480px) {
+      width: 50px;
+    }
+    @media screen and (max-width: 360px) {
+      width: 40px;
+    }
+  }
+
+  &__type {
+    height: 45px;
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    max-width: 100px;
+    margin-left: auto;
+    width: 100%;
+
+    @media screen and (max-width: 480px) {
+      height: 40px;
+      max-width: 90px;
+    }
+    @media screen and (max-width: 360px) {
+      height: 30px;
+    }
+  }
+
+  &__typeImg {
+    max-width: 100%;
+    object-fit: contain;
+    max-height: 100%;
+    object-position: top right;
+  }
+
+  &__info {
+    color: #fff;
+    width: 100%;
+    max-width: calc(100% - 85px);
+    padding: 10px 15px;
+    font-weight: 500;
+    display: block;
+
+    cursor: pointer;
+
+    @media screen and (max-width: 480px) {
+      padding: 10px;
+    }
+  }
+
+  &__holder {
+    opacity: 0.7;
+    font-size: 13px;
+    margin-bottom: 6px;
+    @media screen and (max-width: 480px) {
+      font-size: 12px;
+      margin-bottom: 5px;
+    }
+  }
+
+  &__wrapper {
+    font-family: "Source Code Pro", monospace;
+    padding: 25px 15px;
+    position: relative;
+    z-index: 4;
+    height: 100%;
+    text-shadow: 7px 6px 10px rgba(14, 42, 90, 0.8);
+    user-select: none;
+    @media screen and (max-width: 480px) {
+      padding: 20px 10px;
+    }
+  }
+
+  &__name {
+    font-size: 18px;
+    line-height: 1;
+    white-space: nowrap;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-transform: uppercase;
+    @media screen and (max-width: 480px) {
+      font-size: 16px;
+    }
+  }
+  &__nameItem {
+    display: inline-block;
+    min-width: 8px;
+    position: relative;
+  }
+
+  &__number {
+    font-weight: 500;
+    line-height: 1;
+    color: #fff;
+    font-size: 27px;
+    margin-bottom: 25px;
+    display: inline-block;
+    padding: 10px 15px;
+    cursor: pointer;
+
+    @media screen and (max-width: 480px) {
+      font-size: 21px;
+      margin-bottom: 15px;
+      padding: 10px 10px;
+    }
+
+    @media screen and (max-width: 360px) {
+      font-size: 19px;
+      margin-bottom: 10px;
+      padding: 10px 10px;
+    }
+  }
+
+  &__numberItem {
+    width: 16px;
+    display: inline-block;
+    &.-active {
+      width: 30px;
+    }
+
+    @media screen and (max-width: 480px) {
+      width: 13px;
+
+      &.-active {
+        width: 16px;
+      }
+    }
+
+    @media screen and (max-width: 360px) {
+      width: 12px;
+
+      &.-active {
+        width: 8px;
+      }
+    }
+  }
+
+  &__content {
+    color: #fff;
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &__date {
+    flex-wrap: wrap;
+    font-size: 18px;
+    margin-left: auto;
+    padding: 10px;
+    display: inline-flex;
+    width: 80px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    cursor: pointer;
+
+    @media screen and (max-width: 480px) {
+      font-size: 16px;
+    }
+  }
+
+  &__dateItem {
+    position: relative;
+    span {
+      width: 22px;
+      display: inline-block;
+    }
+  }
+
+  &__dateTitle {
+    opacity: 0.7;
+    font-size: 13px;
+    padding-bottom: 6px;
+    width: 100%;
+
+    @media screen and (max-width: 480px) {
+      font-size: 12px;
+      padding-bottom: 5px;
+    }
+  }
+  &__band {
+    background: rgba(0, 0, 19, 0.8);
+    width: 100%;
+    height: 50px;
+    margin-top: 30px;
+    position: relative;
+    z-index: 2;
+    @media screen and (max-width: 480px) {
+      margin-top: 20px;
+    }
+    @media screen and (max-width: 360px) {
+      height: 40px;
+      margin-top: 10px;
+    }
+  }
+
+  &__cvv {
+    text-align: right;
+    position: relative;
+    z-index: 2;
+    padding: 15px;
+    .card-item__type {
+      opacity: 0.7;
+    }
+
+    @media screen and (max-width: 360px) {
+      padding: 10px 15px;
+    }
+  }
+  &__cvvTitle {
+    padding-right: 10px;
+    font-size: 15px;
+    font-weight: 500;
+    color: #fff;
+    margin-bottom: 5px;
+  }
+  &__cvvBand {
+    height: 45px;
+    background: #fff;
+    margin-bottom: 30px;
+    text-align: right;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding-right: 10px;
+    color: #1a3b5d;
+    font-size: 18px;
+    border-radius: 4px;
+    box-shadow: 0px 10px 20px -7px rgba(32, 56, 117, 0.35);
+
+    @media screen and (max-width: 480px) {
+      height: 40px;
+      margin-bottom: 20px;
+    }
+
+    @media screen and (max-width: 360px) {
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.card-list {
+  margin-bottom: -130px;
+
+  @media screen and (max-width: 480px) {
+    margin-bottom: -120px;
+  }
+}
+
+.card-input {
+  margin-bottom: 20px;
+  position: relative;
+  &__label {
+    font-size: 14px;
+    margin-bottom: 5px;
+    font-weight: 500;
+    color: #1a3b5d;
+    width: 100%;
+    display: block;
+    user-select: none;
+  }
+  &__input {
+    width: 100%;
+    height: 50px;
+    border-radius: 5px;
+    box-shadow: none;
+    border: 1px solid #ced6e0;
+    transition: all 0.3s ease-in-out;
+    font-size: 18px;
+    padding: 5px 15px;
+    background: none;
+    color: #1a3b5d;
+    font-family: "Source Sans Pro", sans-serif;
+
+    &:hover,
+    &:focus {
+      border-color: #3d9cff;
+    }
+
+    &:focus {
+      box-shadow: 0px 10px 20px -13px rgba(32, 56, 117, 0.35);
+    }
+    &.-select {
+      -webkit-appearance: none;
+      background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAUxJREFUeNrM1sEJwkAQBdCsngXPHsQO9O5FS7AAMVYgdqAd2IGCDWgFnryLFQiCZ8EGnJUNimiyM/tnk4HNEAg/8y6ZmMRVqz9eUJvRaSbvutCZ347bXVJy/ZnvTmdJ862Me+hAbZCTs6GHpyUi1tTSvPnqTpoWZPUa7W7ncT3vK4h4zVejy8QzM3WhVUO8ykI6jOxoGA4ig3BLHcNFSCGqGAkig2yqgpEiMsjSfY9LxYQg7L6r0X6wS29YJiYQYecemY+wHrXD1+bklGhpAhBDeu/JfIVGxaAQ9sb8CI+CQSJ+QmJg0Ii/EE2MBiIXooHRQhRCkBhNhBcEhLkwf05ZCG8ICCOpk0MULmvDSY2M8UawIRExLIQIEgHDRoghihgRIgiigBEjgiFATBACAgFgghEwSAAGgoBCBBgYAg5hYKAIFYgHBo6w9RRgAFfy160QuV8NAAAAAElFTkSuQmCC');
+      background-size: 12px;
+      background-position: 90% center;
+      background-repeat: no-repeat;
+      padding-right: 30px;
+    }
+  }
+  &__eye {
+    display: inline-flex;
+    position: absolute;
+    width: 1em;
+    height: 1em;
+    font-size: 24px;
+    border-radius: 50%;
+    top: 35px;
+    right: 10px;
+    opacity: .75;
+    color: #8c9cae;
+    cursor: pointer;
+    padding: 0;
+    background: none;
+    display: inline-flex;
+    border: 2px solid currentColor;
+    box-shadow: none;
+    transition: all .3s ease-in-out;
+
+    &:before {
+      content: '';
+      position: absolute;
+      background: white;
+      width: 0.35em;
+      height: 0.35em;
+      top: 6px;
+      left: 6px;
+      z-index: 2;
+      border-radius: 50%;
+      transform: scale(.1);
+      opacity: 0;
+      transition: all .3s ease-in-out;
+      transition-delay: .1s;
+    }
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      background: currentColor;
+      width: 0.6em;
+      height: 0.6em;
+      border-radius: 50%;
+      transform: scale(.1);
+      opacity: 0;
+      transition: all .3s ease-in-out;
+    }
+
+    &:hover:not(:disabled), &.-active:not(:disabled) {
+      color: #2364d2;
+      opacity: 1;
+    }
+
+    &.-active {
+      &::before, &::after {
+        transform: scale(1);
+        opacity: 1;
+      }
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+      opacity: .4;
+    }
+  }
+}
+
+.slide-fade-up-enter-active {
+  transition: all 0.25s ease-in-out;
+  transition-delay: 0.1s;
+  position: relative;
+}
+.slide-fade-up-leave-active {
+  transition: all 0.25s ease-in-out;
+  position: absolute;
+}
+.slide-fade-up-enter {
+  opacity: 0;
+  transform: translateY(15px);
+  pointer-events: none;
+}
+.slide-fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(-15px);
+  pointer-events: none;
+}
+
+.slide-fade-right-enter-active {
+  transition: all 0.25s ease-in-out;
+  transition-delay: 0.1s;
+  position: relative;
+}
+.slide-fade-right-leave-active {
+  transition: all 0.25s ease-in-out;
+  position: absolute;
+}
+.slide-fade-right-enter {
+  opacity: 0;
+  transform: translateX(10px) rotate(45deg);
+  pointer-events: none;
+}
+.slide-fade-right-leave-to {
+  opacity: 0;
+  transform: translateX(-10px) rotate(45deg);
+  pointer-events: none;
+}
+
+
+
+.github-btn {
+  position: absolute;
+  right: 40px;
+  bottom: 50px;
+  text-decoration: none;
+  padding: 15px 25px;
+  border-radius: 4px;
+  box-shadow: 0px 4px 30px -6px rgba(36, 52, 70, 0.65);
+  background: #24292e;
+  color: #fff;
+  font-weight: bold;
+  letter-spacing: 1px;
+  font-size: 16px;
+  text-align: center;
+  transition: all .3s ease-in-out;
+
+  @media screen and (min-width: 500px) {
+    &:hover {
+      transform: scale(1.1);
+      box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);
+    }
+  }
+
+  @media screen and (max-width: 700px) {
+    position: relative;
+    bottom: auto;
+    right: auto;
+    margin-top: 20px;
+
+    &:active {
+      transform: scale(1.1);
+      box-shadow: 0px 17px 20px -6px rgba(36, 52, 70, 0.36);
+    }
+  }
+}
diff --git a/resources/assets/js/components/CreditCard/Card.vue b/resources/assets/js/components/CreditCard/Card.vue
new file mode 100644
index 000000000..04d416b3b
--- /dev/null
+++ b/resources/assets/js/components/CreditCard/Card.vue
@@ -0,0 +1,246 @@
+<template>
+  <div class="card-item" :class="{ '-active' : isCardFlipped }">
+    <div class="card-item__side -front">
+      <div
+        class="card-item__focus"
+        :class="{'-active' : focusElementStyle }"
+        :style="focusElementStyle"
+        ref="focusElement"
+      ></div>
+      <div class="card-item__cover">
+        <img
+          v-if="currentCardBackground"
+          :src="currentCardBackground"
+          class="card-item__bg"
+        />
+      </div>
+      <div class="card-item__wrapper">
+        <div class="card-item__top">
+          <img
+            src="https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/chip.png"
+            class="card-item__chip"
+          />
+          <div class="card-item__type">
+            <transition name="slide-fade-up">
+              <img
+                :src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + cardType + '.png'"
+                v-if="cardType"
+                :key="cardType"
+                alt
+                class="card-item__typeImg"
+              />
+            </transition>
+          </div>
+        </div>
+        <label :for="fields.cardNumber" class="card-item__number" :ref="fields.cardNumber">
+          <template>
+            <span v-for="(n, $index) in currentPlaceholder" :key="$index">
+              <transition name="slide-fade-up">
+                <div class="card-item__numberItem" v-if="getIsNumberMasked($index, n)">*</div>
+                <div
+                  class="card-item__numberItem"
+                  :class="{ '-active' : n.trim() === '' }"
+                  :key="currentPlaceholder"
+                  v-else-if="labels.cardNumber.length > $index"
+                >{{labels.cardNumber[$index]}}</div>
+                <div
+                  class="card-item__numberItem"
+                  :class="{ '-active' : n.trim() === '' }"
+                  v-else
+                  :key="currentPlaceholder + 1"
+                >{{n}}</div>
+              </transition>
+            </span>
+          </template>
+        </label>
+        <div class="card-item__content">
+          <label :for="fields.cardName" class="card-item__info" :ref="fields.cardName">
+            <div class="card-item__holder">Card Holder</div>
+            <transition name="slide-fade-up">
+              <div class="card-item__name" v-if="labels.cardName.length" key="1">
+                <transition-group name="slide-fade-right">
+                  <span
+                    class="card-item__nameItem"
+                    v-for="(n, $index) in labels.cardName.replace(/\s\s+/g, ' ')"
+                    :key="$index + 1"
+                  >{{n}}</span>
+                </transition-group>
+              </div>
+              <div class="card-item__name" v-else key="2">Full Name</div>
+            </transition>
+          </label>
+          <div class="card-item__date" ref="cardDate">
+            <label :for="fields.cardMonth" class="card-item__dateTitle">Expires</label>
+            <label :for="fields.cardMonth" class="card-item__dateItem">
+              <transition name="slide-fade-up">
+                <span v-if="labels.cardMonth" :key="labels.cardMonth">{{labels.cardMonth}}</span>
+                <span v-else key="2">MM</span>
+              </transition>
+            </label>
+            /
+            <label for="cardYear" class="card-item__dateItem">
+              <transition name="slide-fade-up">
+                <span v-if="labels.cardYear" :key="labels.cardYear">{{String(labels.cardYear).slice(2,4)}}</span>
+                <span v-else key="2">YY</span>
+              </transition>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card-item__side -back">
+      <div class="card-item__cover">
+        <img
+          v-if="currentCardBackground"
+          :src="currentCardBackground"
+          class="card-item__bg"
+        />
+      </div>
+      <div class="card-item__band"></div>
+      <div class="card-item__cvv">
+        <div class="card-item__cvvTitle">CVV</div>
+        <div class="card-item__cvvBand">
+          <span v-for="(n, $index) in labels.cardCvv" :key="$index">*</span>
+        </div>
+        <div class="card-item__type">
+          <img
+            :src="'https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/' + cardType + '.png'"
+            v-if="cardType"
+            class="card-item__typeImg"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Card',
+  props: {
+    labels: Object,
+    fields: Object,
+    isCardNumberMasked: Boolean,
+    randomBackgrounds: {
+      type: Boolean,
+      default: true
+    },
+    backgroundImage: [String, Object]
+  },
+  data () {
+    return {
+      focusElementStyle: null,
+      currentFocus: null,
+      isFocused: false,
+      isCardFlipped: false,
+      amexCardPlaceholder: '#### ###### #####',
+      dinersCardPlaceholder: '#### ###### ####',
+      defaultCardPlaceholder: '#### #### #### ####',
+      currentPlaceholder: ''
+    }
+  },
+  watch: {
+    currentFocus () {
+      if (this.currentFocus) {
+        this.changeFocus()
+      } else {
+        this.focusElementStyle = null
+      }
+    },
+    cardType () {
+      this.changePlaceholder()
+    }
+  },
+  mounted () {
+    this.changePlaceholder()
+
+    let self = this
+    let fields = document.querySelectorAll('[data-card-field]')
+    fields.forEach(element => {
+      element.addEventListener('focus', () => {
+        this.isFocused = true
+        if (element.id === this.fields.cardYear || element.id === this.fields.cardMonth) {
+          this.currentFocus = 'cardDate'
+        } else {
+          this.currentFocus = element.id
+        }
+        this.isCardFlipped = element.id === this.fields.cardCvv
+      })
+      element.addEventListener('blur', () => {
+        this.isCardFlipped = !element.id === this.fields.cardCvv
+        setTimeout(() => {
+          if (!self.isFocused) {
+            self.currentFocus = null
+          }
+        }, 300)
+        self.isFocused = false
+      })
+    })
+  },
+  computed: {
+    cardType () {
+      let number = this.labels.cardNumber
+      let re = new RegExp('^4')
+      if (number.match(re) != null) return 'visa'
+
+      re = new RegExp('^(34|37)')
+      if (number.match(re) != null) return 'amex'
+
+      re = new RegExp('^5[1-5]')
+      if (number.match(re) != null) return 'mastercard'
+
+      re = new RegExp('^6011')
+      if (number.match(re) != null) return 'discover'
+
+      re = new RegExp('^62')
+      if (number.match(re) != null) return 'unionpay'
+
+      re = new RegExp('^9792')
+      if (number.match(re) != null) return 'troy'
+
+      re = new RegExp('^3(?:0([0-5]|9)|[689]\\d?)\\d{0,11}')
+      if (number.match(re) != null) return 'dinersclub'
+
+      re = new RegExp('^35(2[89]|[3-8])')
+      if (number.match(re) != null) return 'jcb'
+
+      return '' // default type
+    },
+    currentCardBackground () {
+      if (this.randomBackgrounds && !this.backgroundImage) { // TODO will be optimized
+        let random = Math.floor(Math.random() * 25 + 1)
+        return `https://raw.githubusercontent.com/muhammederdem/credit-card-form/master/src/assets/images/${random}.jpeg`
+      } else if (this.backgroundImage) {
+        return this.backgroundImage
+      } else {
+        return null
+      }
+    }
+  },
+  methods: {
+    changeFocus () {
+      let target = this.$refs[this.currentFocus]
+      this.focusElementStyle = target ? {
+        width: `${target.offsetWidth}px`,
+        height: `${target.offsetHeight}px`,
+        transform: `translateX(${target.offsetLeft}px) translateY(${target.offsetTop}px)`
+      } : null
+    },
+    getIsNumberMasked (index, n) {
+      return index > 4 && index < 14 && this.labels.cardNumber.length > index && n.trim() !== '' && this.isCardNumberMasked
+    },
+    changePlaceholder () {
+      if (this.cardType === 'amex') {
+        this.currentPlaceholder = this.amexCardPlaceholder
+      } else if (this.cardType === 'dinersclub') {
+        this.currentPlaceholder = this.dinersCardPlaceholder
+      } else {
+        this.currentPlaceholder = this.defaultCardPlaceholder
+      }
+      this.$nextTick(() => {
+        this.changeFocus()
+      })
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/components/CreditCard/CardForm.vue b/resources/assets/js/components/CreditCard/CardForm.vue
new file mode 100644
index 000000000..5d97ad9ca
--- /dev/null
+++ b/resources/assets/js/components/CreditCard/CardForm.vue
@@ -0,0 +1,316 @@
+<template>
+    <div class="card">
+        <div class="row align-items-center">
+            <div class="col-md-6 p-5">
+
+                <div class="form-group">
+                    <label for="cardNumber" class="form-control-label">Card Number</label>
+                    <div class="input-group input-group-merge">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text">
+                                <i class="fas fa-credit-card"></i>
+                            </span>
+                        </div>
+                        <input
+                        type="tel"
+                        :id="fields.cardNumber"
+                        @input="changeNumber"
+                        @focus="focusCardNumber"
+                        @blur="blurCardNumber"
+                        class="form-control"
+                        placeholder="Enter Number"
+                        :value="formData.cardNumber"
+                        :maxlength="cardNumberMaxLength"
+                        data-card-field
+                        autocomplete="off"
+                        />
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label for="cardName" class="form-control-label">Card Name</label>
+                    <div class="input-group input-group-merge">
+                        <div class="input-group-prepend">
+                            <span class="input-group-text">
+                                <i class="fas fa-font"></i>
+                            </span>
+                        </div>
+                        <input
+                        type="text"
+                        :id="fields.cardName"
+                        v-letter-only
+                        @input="changeName"
+                        class="form-control"
+                        placeholder="Enter Name"
+                        :value="formData.cardName"
+                        data-card-field
+                        autocomplete="off"
+                        />
+                    </div>
+                </div>
+
+
+                <div class="row">
+                    <div class="col-md-7">
+                        <label for="cardMonth" class="form-control-label">Expiration Date</label>
+                        <div class="card-form__group">
+                            <select
+                            class="card-input__input -select"
+                            :id="fields.cardMonth"
+                            v-model="formData.cardMonth"
+                            @change="changeMonth"
+                            data-card-field
+                            >
+                            <option value disabled selected>Month</option>
+                            <option
+                                v-bind:value="n < 10 ? '0' + n : n"
+                                v-for="n in 12"
+                                v-bind:disabled="n < minCardMonth"
+                                v-bind:key="n"
+                            >{{generateMonthValue(n)}}</option>
+                            </select>
+
+                            <select
+                                class="card-input__input -select"
+                                :id="fields.cardYear"
+                                v-model="formData.cardYear"
+                                @change="changeYear"
+                                data-card-field
+                                >
+                                <option value disabled selected>Year</option>
+                                <option
+                                    v-bind:value="$index + minCardYear"
+                                    v-for="(n, $index) in 12"
+                                    v-bind:key="n"
+                                >{{$index + minCardYear}}</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div class="col-md-5">
+                        <div class="form-group">
+                            <label for="cardCvv" class="form-control-label">CVV</label>
+                            <div class="input-group input-group-merge">
+                                <div class="input-group-prepend">
+                                    <span class="input-group-text">
+                                        <i class="fas fa-key"></i>
+                                    </span>
+                                </div>
+                                <input
+                                type="tel"
+                                class="form-control"
+                                placeholder="Enter Cvv"
+                                v-number-only
+                                :id="fields.cardCvv"
+                                maxlength="4"
+                                :value="formData.cardCvv"
+                                @input="changeCvv"
+                                data-card-field
+                                autocomplete="off"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <button class="btn btn-icon btn-success" v-on:click="invaildCard">
+                    <span class="btn-inner--icon"><i class="fas fa-check"></i></span>
+                    <span class="btn-inner--text">Submit</span>
+                </button>
+            </div>
+
+            <div class="col-md-6 mt--3">
+                <Card
+                    :fields="fields"
+                    :labels="formData"
+                    :isCardNumberMasked="isCardNumberMasked"
+                    :randomBackgrounds="randomBackgrounds"
+                    :backgroundImage="backgroundImage"
+                />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import Card from './Card';
+import './../../../css/creditcard/style.scss';
+
+export default {
+  name: 'CardForm',
+  directives: {
+    'number-only': {
+      bind (el) {
+        function checkValue (event) {
+          event.target.value = event.target.value.replace(/[^0-9]/g, '')
+          if (event.charCode >= 48 && event.charCode <= 57) {
+            return true
+          }
+          event.preventDefault()
+        }
+        el.addEventListener('keypress', checkValue)
+      }
+    },
+    'letter-only': {
+      bind (el) {
+        function checkValue (event) {
+          if (event.charCode >= 48 && event.charCode <= 57) {
+            event.preventDefault()
+          }
+          return true
+        }
+        el.addEventListener('keypress', checkValue)
+      }
+    }
+  },
+  props: {
+    formData: {
+      type: Object,
+      default: () => {
+        return {
+          cardName: '',
+          cardNumber: '',
+          cardMonth: '',
+          cardYear: '',
+          cardCvv: ''
+        }
+      }
+    },
+    backgroundImage: [String, Object],
+    randomBackgrounds: {
+      type: Boolean,
+      default: true
+    }
+  },
+  components: {
+    Card
+  },
+  data () {
+    return {
+      fields: {
+        cardNumber: 'v-card-number',
+        cardName: 'v-card-name',
+        cardMonth: 'v-card-month',
+        cardYear: 'v-card-year',
+        cardCvv: 'v-card-cvv'
+      },
+      minCardYear: new Date().getFullYear(),
+      isCardNumberMasked: true,
+      mainCardNumber: this.cardNumber,
+      cardNumberMaxLength: 19
+    }
+  },
+  computed: {
+    minCardMonth () {
+      if (this.formData.cardYear === this.minCardYear) return new Date().getMonth() + 1
+      return 1
+    }
+  },
+  watch: {
+    cardYear () {
+      if (this.formData.cardMonth < this.minCardMonth) {
+        this.formData.cardMonth = ''
+      }
+    }
+  },
+  mounted () {
+    this.maskCardNumber()
+  },
+  methods: {
+    generateMonthValue (n) {
+      return n < 10 ? `0${n}` : n
+    },
+
+    changeName (e) {
+      this.formData.cardName = e.target.value
+      this.$emit('input-card-name', this.formData.cardName)
+    },
+
+    changeNumber (e) {
+      this.formData.cardNumber = e.target.value
+      let value = this.formData.cardNumber.replace(/\D/g, '')
+      // american express, 15 digits
+      if ((/^3[47]\d{0,13}$/).test(value)) {
+        this.formData.cardNumber = value.replace(/(\d{4})/, '$1 ').replace(/(\d{4}) (\d{6})/, '$1 $2 ')
+        this.cardNumberMaxLength = 17
+      } else if ((/^3(?:0[0-5]|[68]\d)\d{0,11}$/).test(value)) { // diner's club, 14 digits
+        this.formData.cardNumber = value.replace(/(\d{4})/, '$1 ').replace(/(\d{4}) (\d{6})/, '$1 $2 ')
+        this.cardNumberMaxLength = 16
+      } else if ((/^\d{0,16}$/).test(value)) { // regular cc number, 16 digits
+        this.formData.cardNumber = value.replace(/(\d{4})/, '$1 ').replace(/(\d{4}) (\d{4})/, '$1 $2 ').replace(/(\d{4}) (\d{4}) (\d{4})/, '$1 $2 $3 ')
+        this.cardNumberMaxLength = 19
+      }
+      this.$emit('input-card-number', this.formData.cardNumber)
+    },
+
+    changeMonth () {
+      this.$emit('input-card-month', this.formData.cardMonth)
+    },
+
+    changeYear () {
+      this.$emit('input-card-year', this.formData.cardYear)
+    },
+
+    changeCvv (e) {
+      this.formData.cardCvv = e.target.value
+      this.$emit('input-card-cvv', this.formData.cardCvv)
+    },
+
+    invaildCard () {
+      let number = this.formData.cardNumber
+      let sum = 0
+      let isOdd = true
+      for (let i = number.length - 1; i >= 0; i--) {
+        let num = number.charAt(i)
+        if (isOdd) {
+          sum += num
+        } else {
+          num = num * 2
+          if (num > 9) {
+            num = num.toString().split('').join('+')
+          }
+          sum += num
+        }
+        isOdd = !isOdd
+      }
+      if (sum % 10 !== 0) {
+        alert('invaild card number')
+      }
+    },
+
+    blurCardNumber () {
+      if (this.isCardNumberMasked) {
+        this.maskCardNumber()
+      }
+    },
+
+    maskCardNumber () {
+      this.mainCardNumber = this.formData.cardNumber
+      let arr = this.formData.cardNumber.split('')
+      arr.forEach((element, index) => {
+        if (index > 4 && index < 14 && element.trim() !== '') {
+          arr[index] = '*'
+        }
+      })
+      this.formData.cardNumber = arr.join('')
+    },
+
+    unMaskCardNumber () {
+      this.formData.cardNumber = this.mainCardNumber
+    },
+
+    focusCardNumber () {
+      this.unMaskCardNumber()
+    },
+
+    toggleMask () {
+      this.isCardNumberMasked = !this.isCardNumberMasked
+      if (this.isCardNumberMasked) {
+        this.maskCardNumber()
+      } else {
+        this.unMaskCardNumber()
+      }
+    }
+  }
+}
+</script>
diff --git a/resources/assets/js/views/common/items.js b/resources/assets/js/views/common/items.js
index a95b4a1a9..3ff184403 100644
--- a/resources/assets/js/views/common/items.js
+++ b/resources/assets/js/views/common/items.js
@@ -15,13 +15,15 @@ import BulkAction from './../../plugins/bulk-action';
 
 const app = new Vue({
     el: '#app',
+
     mixins: [
         Global
     ],
+
     data: function () {
         return {
             form: new Form('item'),
-            bulk_action: new BulkAction('items')
+            bulk_action: new BulkAction('items'),
         }
     }
 });
diff --git a/resources/assets/js/views/portal/invoices.js b/resources/assets/js/views/portal/invoices.js
index f6dfbef49..f3f2d9865 100644
--- a/resources/assets/js/views/portal/invoices.js
+++ b/resources/assets/js/views/portal/invoices.js
@@ -13,6 +13,8 @@ import Global from './../../mixins/global';
 
 import Form from './../../plugins/form';
 
+import CardForm from './../../components/CreditCard/CardForm';
+
 const app = new Vue({
     el: '#app',
 
@@ -20,11 +22,22 @@ const app = new Vue({
         Global
     ],
 
+    components: {
+        CardForm
+    },
+
     data: function () {
         return {
             form:  new Form('invoice-payment'),
             redirectForm: new Form('redirect-form'),
-            method_show_html: ''
+            method_show_html: '',
+            formData: {
+                cardName: '',
+                cardNumber: '',
+                cardMonth: '',
+                cardYear: '',
+                cardCvv: ''
+            }
         }
     },
 
@@ -117,6 +130,21 @@ const app = new Vue({
             .catch(error => {
                 this.method_show_html = error.message;
             });
+        },
+
+        updateCardNumber (val) {
+        },
+
+        updateCardName (val) {
+        },
+
+        updateCardMonth (val) {
+        },
+
+        updateCardYear (val) {
+        },
+
+        updateCardCvv (val) {
         }
     }
 });
diff --git a/resources/views/partials/portal/payment_method/hosted/show.blade.php b/resources/views/partials/portal/payment_method/hosted/show.blade.php
index e69de29bb..159a7cb11 100644
--- a/resources/views/partials/portal/payment_method/hosted/show.blade.php
+++ b/resources/views/partials/portal/payment_method/hosted/show.blade.php
@@ -0,0 +1,8 @@
+<card-form
+    :form-data="formData"
+    @input-card-number="updateCardNumber"
+    @input-card-name="updateCardName"
+    @input-card-month="updateCardMonth"
+    @input-card-year="updateCardYear"
+    @input-card-cvv="updateCardCvv"
+/>
diff --git a/resources/views/partials/portal/payment_method/hosted/signed.blade.php b/resources/views/partials/portal/payment_method/hosted/signed.blade.php
index e69de29bb..159a7cb11 100644
--- a/resources/views/partials/portal/payment_method/hosted/signed.blade.php
+++ b/resources/views/partials/portal/payment_method/hosted/signed.blade.php
@@ -0,0 +1,8 @@
+<card-form
+    :form-data="formData"
+    @input-card-number="updateCardNumber"
+    @input-card-name="updateCardName"
+    @input-card-month="updateCardMonth"
+    @input-card-year="updateCardYear"
+    @input-card-cvv="updateCardCvv"
+/>