SaferpayFields: Sample #2 Validation

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">
  <h2>
    Credit card
  </h2>
  <form id="mainForm">
    <div class="form-group row">
      <label for="fields-holder-name" class="col-sm-4 col-form-label">Full Name</label>
      <div class="col-sm-8">
        <input type="input" class="form-control" id="fields-holder-name" placeholder="Full Name" readonly>
      </div>
    </div>
    <div class="form-group row">
      <label for="fields-card-number" class="col-sm-4 col-form-label">Cardnumber</label>
      <div class="col-sm-8">
        <input class="form-control" id="fields-card-number" placeholder="Cardnumber" readonly>
      </div>
    </div>
    <div class="form-group row">
      <label for="fields-expiration" class="col-sm-4 col-form-label">Expiration</label>
      <div class="col-sm-8">
        <input class="form-control" id="fields-expiration" placeholder="Expiration" readonly>
      </div>
    </div>
    <div class="form-group row">
      <label for="fields-cvc" class="col-sm-4 col-form-label">Cvc</label>
      <div class="col-sm-8">
        <input type="input" class="form-control" id="fields-cvc" placeholder="Cvc" readonly>
      </div>
    </div>
    <div class="row">
      <button class="offset-md-8 col-md-4 btn btn-primary" id="submit" disabled="disabled">Pay</button>
    </div>
    <br />
    <div class="row">
      <span>SaferpayFields token for follow up actions:</span>
    </div>
    <div class="row">
      <div class="input-group">
        <input class="form-control" id="token" readonly="" type="text" />
        <span class="input-group-append">
          <button class="btn btn-outline-secondary" id="copyToClipboard">Copy token</button>
        </span>
      </div>
    </div>
  </form>
</div>

CSS

body {
  background-color: #F6F8FA;
}

.container {
  background-color: #fff;
  padding: 36px 42px;
  border-radius: 36px;
  box-shadow: 14px 14px #b3b3b3;
  margin-top: 30px;
  margin-bottom: 30px;
}

.form-group.row {
  background-color: #E5E5E5;
  border-radius: 8px;
}

.col-form-label {
  line-height: 2;
  text-align: right;
  padding-right: 0px;
}

input.form-control {
  border-color: #CFCFCF;
  border-radius: 8px;
  height: 46px;
  padding-right: 0px;
}

.col-sm-8 {
  padding-right: 0px;
}

.is-invalid {
  color: red;
}

.is-valid {
  color: green;
}

JavaScript

SaferpayFields.init({
  accessToken: '08f15ac2-c84e-4b04-98b9-c338cbb3d572',
  url: 'https://test.saferpay.com/Fields/777001',
  placeholders: {
    holdername: 'holder name',
    cardnumber: '0000 0000 0000 0000',
    expiration: 'MM/YYYY',
    cvc: '000'
  },
  style: {
    'body': 'background-color: transparent',
    '.logo': 'right: 2em;',
    'input.form-control': ' border-color:#CFCFCF;border-radius:8px;height:46px;padding-right:0px;outline: none',
    '.form-control.is-valid.is-touched, .form-control.is-touched:valid': 'border-color: #28a745;padding-right: calc(1.5em + .75rem); background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA4IDgnPjxwYXRoIGZpbGw9JyMyOGE3NDUnIGQ9J00yLjMgNi43M0wuNiA0LjUzYy0uNC0xLjA0LjQ2LTEuNCAxLjEtLjhsMS4xIDEuNCAzLjQtMy44Yy42LS42MyAxLjYtLjI3IDEuMi43bC00IDQuNmMtLjQzLjUtLjguNC0xLjEuMXonLz48L3N2Zz4=);background-repeat: no-repeat; background-position: 98% 50%; background-size: calc(.75em + .375rem) calc(.75em + .375rem);',
    '.form-control.is-invalid.is-touched, .form-control.is-touched:invalid': '  border-color: #dc3545;    padding-right: calc(1.5em + .75rem);background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZpbGw9JyNkYzM1NDUnIHZpZXdCb3g9Jy0yIC0yIDcgNyc+PHBhdGggc3Ryb2tlPScjZGMzNTQ1JyBkPSdNMCAwbDMgM20wLTNMMCAzJy8+PGNpcmNsZSByPScuNScvPjxjaXJjbGUgY3g9JzMnIHI9Jy41Jy8+PGNpcmNsZSBjeT0nMycgcj0nLjUnLz48Y2lyY2xlIGN4PSczJyBjeT0nMycgcj0nLjUnLz48L3N2Zz4=);background-repeat: no-repeat;background-position: 98% 50%;    background-size: calc(.75em + .375rem) calc(.75em + .375rem);'
  },
  onSuccess: function() {
    var element = document.getElementById('submit');
    element.removeAttribute('disabled');
  },
  onValidated: function(evt) {
    $('label[for=' + evt.id + ']')
      .removeClass('is-invalid')
      .removeClass('is-valid')
      .addClass(evt.isValid ? 'is-valid' : 'is-invalid');
  }
});

function copyToClipboard() {
  var...