SaferpayFields: Sample #3 Events

by saferpay

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://test.saferpay.com/Fields/lib/1/saferpay-fields.js"></script>
<div class="container my-3 p-3" id="main">
  <div class="row">
    <div class="col-6">
      <div class="row p-2" id="wrapper">
        <div class="col-7 px-0">
          <div id="fields-card-number">&nbsp;</div>
        </div>
        <div class="col-3 px-0">
          <div id="fields-expiration">&nbsp;</div>
        </div>
        <div class="col-2 px-0">
          <div id="fields-cvc">&nbsp;</div>
        </div>
      </div>
      <div class="row mt-1">
        <button class="col-12 btn btn-primary" id="submit" disabled="disabled">Pay $25</button>
      </div>

      <div class="row mt-3">
        <div class="col-12">
          <div id="picture">
            <div class="card">

              <div class="card__side card__side--front card__side--front">
                <div class="card__description">
                  <img src="https://www.publicdomainpictures.net/pictures/160000/velka/credit-card-front.jpg" alt="credit card front" />
                </div>
              </div>
              <div class="card__side card__side--back card__side--back">
                <div class="card__description">
                  <img src="https://www.publicdomainpictures.net/pictures/160000/velka/credit-card-back.jpg" alt="credit card back" />
                </div>
              </div>

              <div id="marker"></div>
            </div>

          </div>
        </div>
      </div>
    </div>
    <div class="col-6">
      <textarea id="console">Welcome to SaferpayFields! :)</textarea>
    </div>

  </div>
</div>

SCSS

body {
  background-color: #fff;
}

#wrapper {
  border: 1px solid #007bff;
  border-radius: 5px;
}

#console {
  width: 100%;
  background: black;
  color: white;
  height: 80vh;
  font-family: monospace;
  font-size: 12px;
  display: block;
  margin: 0 auto;
}

#submit {
  font-weight: 500;
}

#picture {
  display: flex;
  justify-content: space-evenly;
}

.card {
  width: 25em;
  position: relative;
  height: 15em;
  perspective: 150em;
  border: 0;
  box-shadow: none;

  &__side {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transition: all .6s ease;

    &--back {
      transform: rotateY(180deg);
    }
  }

  &.show-back &__side--front {
    transform: rotateY(-180deg);
  }

  &.show-back &__side--back {
    transform: rotate(0);
  }

  &__description {
    img {
      width: 100%;
    }
  }
  
  &.cvc #marker, &.cardnumber #marker, &.expiration #marker {
    border: 3px solid red;
    position: absolute;
    
  }
}

.card {
  
@media (min-width: 992px)
{ 
  
  &.cardnumber #marker {
    top: 136px;
    left: 32px;
    width: 329px;
    height: 33px;
  }
  
  &.expiration #marker {
    top: 175px;
    left: 162px;
    width: 80px;
    height: 33px;
  }
  
  &.cvc #marker {
        top: 95px;
    left: 343px;
    width: 33px;
    height: 25px;
  }
}
  
@media (min-width: 768px) and (max-width:991px)
{ 
  
  &.cardnumber #marker {
    top: 111px;
    left: 32px;
    width: 262px;
    height: 33px;
  }
  
  &.expiration #marker {
    top: 137px;
    left: 135px;
    width: 66px;
    height: 33px;
  }
  
  &.cvc #marker {
    top: 76px;
    left: 280px;
    width: 33px;
    height: 25px;
  }
}
}

  
@media (max-width:767px)
{ 
  
  &.cardnumber #marker {
    top: 76px;
    left: 19px;
    width: 196px;
    height: 33px;
  }
  
  &.expiration #marker {
    top: 96px;
    left: 99px;
    width: 48px;
    height: 33px;
  }
  
  &.cvc #marker {
    top: 50px;
    left: 199px;
    width:...

JavaScript

SaferpayFields.init({
  accessToken: '08f15ac2-c84e-4b04-98b9-c338cbb3d572',
  url: 'https://test.saferpay.com/Fields/777001',
  placeholders: {
    cardnumber: '0000 0000 0000 0000',
    expiration: 'MM/YY',
    cvc: '000'
  },
  style: {
    ".form-control": "background: transparent; border: none; border-radius: unset; padding-left: 0; padding-right: 0; font-weight: 500; outline: none",
    ".input-expiry": "text-align: center",
    ".input-verificationcode": "text-align: right",
    "::placeholder": "color: #999"
  },
  onSuccess: function() {
    var element = document.getElementById("submit");
    element.removeAttribute("disabled");
  },
  onFocus: function(e) {
    logToConsole("Focus in " + e.fieldType + " field...");

    var pictureCard = document.querySelector("#picture .card");
    if (e.fieldType === 'cvc') {
      pictureCard.classList.add('show-back');
      pictureCard.classList.remove('cardnumber');
      pictureCard.classList.remove('expiration');
      pictureCard.classList.add('cvc');
    } else if (e.fieldType === 'cardnumber') {
      pictureCard.classList.remove('show-back');
      pictureCard.classList.add('cardnumber');
      pictureCard.classList.remove('expiration');
      pictureCard.classList.remove('cvc');
    } else if (e.fieldType === 'expiration') {
      pictureCard.classList.remove('show-back');
      pictureCard.classList.remove('cardnumber');
      pictureCard.classList.add('expiration');
      pictureCard.classList.remove('cvc');
    }
  },
  onBlur: function(e) {
    logToConsole("Blur in " + e.fieldType + " field...");
  },
  onValidated: function(e) {
    logToConsole(
      "The value in field " +
      e.fieldType +
      " is " +
      (e.isValid ? "valid." : "invalid.")
    );
  }
});

document.getElementById("submit").onclick = function() {
  SaferpayFields.submit({
    onSuccess: function(e) {
      logToConsole("Success: Payment token = '" + e.token + "'");
    }
  });
};

function logToConsole(message) {
  var...