Get Card BIN

by VeryGoodFiddle

HTML

<script src="https://js.verygoodvault.com/vgs-collect/1/vgs-collect-examples.js"></script>
<div id="app">
  <form id="cc-form">
    <div id="cc-name" class="form-group">
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <div id="cc-number" class="form-group">
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <div id="cc-cvc" class="form-group">
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <div id="cc-expiration-date" class="form-group">
      <div class="form-control-static">
        <span class="fake-input"></span>
      </div>
    </div>
    <button type="submit" class="btn btn-sm btn-primary">Submit    
    </button>
  </form>
  <pre><code id="card-preview">Response will be here...</code></pre>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.fake-input iframe {
  height: 32px;
  max-width: 100%;
  border: solid 1px #ccc;
  border-radius: 4px;
  padding-left: 4px;
}

form {
 margin-bottom: 10px;
}

JavaScript

var card_bin_number = null;

var f = VGSCollect.create('tntq4dwvhri', function(state) {
  console.log(state);
	if(state.card_number.bin !== undefined) {
  	card_bin_number = state.card_number.bin;
  }
});
  
f.field('#cc-name .fake-input', {
  type: 'text',
  name: 'card_name',
  placeholder: 'Joe Business',
  validations: ['required'],
});

f.field('#cc-number .fake-input', {
  type: 'card-number',
  name: 'card_number',
  successColor: '#4F8A10',
  errorColor: '#D8000C',
  placeholder: '4111 1111 1111 1111',
  validations: ['required', 'validCardNumber'],
});

f.field('#cc-cvc .fake-input', {
  type: 'card-security-code',
  name: 'card_cvc',
  placeholder: '344',
  validations: ['required', 'validCardSecurityCode'],
});

f.field('#cc-expiration-date .fake-input', {
  type: 'card-expiration-date',
  name: 'card_expirationDate',
  placeholder: '01 / 2016',
  validations: ['required', 'validCardExpirationDate']
});

document.getElementById('cc-form')
  .addEventListener('submit', function(e) {
    e.preventDefault();
    
   fetch(`https://binlisting.com/api/bin/${card_bin_number}`)
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });
    
    f.submit('/post', {}, function(status, data) {
    document.getElementById('card-preview').innerText = JSON.stringify(data.json, null, ' ');
    }, function (errors) {
    });
  }, false);