SaferpayFields: Sample #1 Placeholder

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" id="main">
  <div class="row">
    <input class="col-12" id="fields-holder-name" readonly>
  </div>
  <div class="row">
    <input class="col-12" id="fields-card-number" readonly>
  </div>
  <div class="row">
    <input class="col-md-4" id="fields-expiration" readonly>
    <input class="col-md-3" id="fields-cvc" readonly>
  </div>
  <div class="row">
    <button class="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">
    <input class="form-control" id="token" readonly="" type="text" />
  </div>
</div>

CSS

#main {
  background-color: #fff;
  padding: 36px 42px;
  border-radius: 36px;
  box-shadow: 14px 14px #b3b3b3;
  width: 450px;
  margin-top: 30px;
}

body {
  background-color: #f5f5f5 !important;
}

input {
  height: 32px;
}

.btn-primary {
  margin-top: 10px;
}

JavaScript

SaferpayFields.init({
  accessToken: '08f15ac2-c84e-4b04-98b9-c338cbb3d572',
  url: 'https://test.saferpay.com/Fields/777001',
  placeholders: {
    holdername: 'Karteninhaber',
    cardnumber: '0000 0000 0000 0000',
    expiration: 'MM/JJJJ',
    cvc: '000'
  },
  style: {
    '.form-control': 'border-left: none; border-top: none; border-right: none; border-radius: unset;'
  },
  onSuccess: function() {
    var element = document.getElementById('submit');
    element.removeAttribute('disabled');
  },
  onError: function(evt) {
    console.log('Error in init: ' + evt.message);
  }
});

document.getElementById('submit').onclick = function() {
  SaferpayFields.submit({
    onSuccess: function(evt) {
      document.getElementById('token').value = evt.token;
    },
    onError: function(evt) {
      console.log('Error in submit: ' + evt.message);
    }
  });
};