<div class="panel panel-primary">
  <div class="panel-heading">
      <h3 class="panel-title">Credit Card Payment</h3>
  </div>
   <form class="panel-body" id="checkout-form" action="#">
    <div class="row">
      <div class="form-group col-md-12">
          <label for="cardholder-name">Cardholder Name</label>
          <input type="text" class="form-control" id="cardholder-name">
          <span class="helper-text"></span>
       </div>
       <!--Hosted Payment Field for CC number-->
       <div class="form-group col-xs-9">
          <label for="card-number">Card Number</label>
          <div class="input-group">
            <div class="form-control" id="card-number" data-bluesnap="ccn"></div>
            <div id="card-logo" class="input-group-addon"><img src="https://files.readme.io/d1a25b4-generic-card.png" height="20px"></div>
         </div>
         <span class="helper-text" id="ccn-help"></span>
       </div>
	<!--Hosted Payment Field for CC CVV-->
			<div class="form-group col-xs-3">
         <label for="cvv">CVV</label>
         <div class="form-control" id="cvv" data-bluesnap="cvv"></div>
         <span class="helper-text" id="cvv-help"></span>
      </div>
    
    <!--Hosted Payment Field for CC EXP-->
       <div class="form-group col-xs-6">
          <label for="exp-date">Exp. (MM/YY)</label>
          <div class="form-control" id="exp-date" data-bluesnap="exp"></div>
          <span class="helper-text" id="exp-help"></span>
       </div>
		  <div class="form-group col-xs-6">
          <label for="cardholder-name">Postal Code</label>
          <input type="text" class="form-control" id="cardholder-name">
          <span class="helper-text"></span>
       </div>	
    </div>
    
		<button class="btn btn-raised btn-info btn-lg col-md-4" type="button" id="submit-button" onclick="do_when_clicking_submit_button()">Pay Now</button>
    
		</form>
  
</div>

<!--BlueSnap Hosted Payment Fields JavaScript file-->
		<script type="text/javascript" src="https://sandpay.bluesnap.com/web-sdk/5/bluesnap.js"></script>

/* Uses bootstrap-material-design - https://fezvrasta.github.io/bootstrap-material-design */

.panel {
  width: 80%;
  margin: 2em auto;
}

.panel-body {
  width: 90%;
  margin: 2em auto;
}

body {
  font-size: 15px;
}

label {
  font-weight: 400;
}

.helper-text {
  color: #E91E63; 
  font-size: 12px;
  margin-top: 5px;
  height: 12px;
  display: block;
}

.helper-text-green {
  color: green;
}


/* Hosted Payment Fields styles*/
.hosted-field-focus { 
  outline: none;
  background-image: linear-gradient(#009688, #009688), linear-gradient(#d2d2d2, #d2d2d2);
  animation: input-highlight 0.5s forwards;
  box-shadow: none;
  background-size: 0 2px, 100% 1px;
}

/* Defining helper functions/objects */
// changeImpactedElement: function that removes the provided class(es) and adds the provided class(es) to Hosted Payment Fields element
function changeImpactedElement(tagId, removeClass, addClass) {
    removeClass = removeClass || "";
    addClass = addClass || "";
    $("[data-bluesnap=" + tagId + "]")
        .removeClass(removeClass)
        .addClass(addClass);
}
// cardUrl: object that stores card type code (received from BlueSnap) and associated card image URL
var cardUrl = {
  "AMEX": "https://files.readme.io/97e7acc-Amex.png", 
  "DINERS": "https://files.readme.io/8c73810-Diners_Club.png",
  "DISCOVER": "https://files.readme.io/caea86d-Discover.png",
  "JCB": "https://files.readme.io/e076aed-JCB.png",
  "MASTERCARD": "https://files.readme.io/5b7b3de-Mastercard.png",
  "VISA": "https://files.readme.io/9018c4f-Visa.png"
}; 

/* Defining bsObj: object that stores Hosted Payment Fields 
event handlers, styling, placeholder text, etc. */
var bsObj = {
	//insert your Hosted Payment Fields token
	token: "b44b553f82290ad50eaec4a9ab333c810b57eb2e00075eb061282694ce77d74f_", 
  onFieldEventHandler: {
    onFocus: function(tagId) {
      // Handle focus
      changeImpactedElement(tagId, "", "hosted-field-focus"); 
    },
    onBlur: function(tagId) {
      // Handle blur 
      changeImpactedElement(tagId, "hosted-field-focus"); 
    },
    onError: function(tagId, errorCode, errorDescription, eventOrigin) {
      // Handle a change in validation by displaying help text
      $("#" + tagId + "-help").removeClass('helper-text-green').text(errorCode + " - " + errorDescription + " - " + eventOrigin); 
    },
    onType: function(tagId, cardType, cardData) {
      // get card type from cardType and display card image
      $("#card-logo > img").attr("src", cardUrl[cardType]);
      if (null != cardData) {
         $("#" + tagId + "-help").addClass('helper-text-green').text(JSON.stringify(cardData));
      }
    },
    onValid: function(tagId) {
      // Handle a change in validation by removing any help text
      $("#" + tagId + "-help").text(""); 
    }
  },
  style: {
    // Styling all inputs
    "input": {
      "font-size": "14px",
      "font-family":
        "RobotoDraft,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif",
      "line-height": "1.42857143",
      "color": "#555"
    },
    // Styling input state
    ":focus": {
      "color": "#555"
    }
  },
  ccnPlaceHolder: "1234 5678 9012 3456",
  cvvPlaceHolder: "123",
  expPlaceHolder: "MM / YY"
}

/* After DOM is loaded, calling bluesnap.hostedPaymentFieldsCreation: function that takes token and bsObj as inputs and initiates Hosted Payment Fields */
$(document).ready(function() {
  bluesnap.hostedPaymentFieldsCreate(bsObj); 
});

/* Calling bluesnap.submitCredentials: function that submits card data to 
BlueSnap and calls input function with card data object if submission was successful */
function do_when_clicking_submit_button() {
  bluesnap.hostedPaymentFieldsSubmitData( 
    function(callback) {
      if (null != callback.error) {
        var errorArray = callback.error;
            for (i in errorArray) {
        $("#" + errorArray[i].tagId + "-help").text(errorArray[i].errorCode + " - " + errorArray[i].errorDescription); 
            }
      } else {
        var cardData = callback.cardData;
      alert(
        "Card Type: " +
        cardData.ccType +
        " Last 4 Digits: " +
        cardData.last4Digits +
        " Issuing Country: " +
        cardData.issuingCountry +
        " Is Regulated Card: " +
        cardData.isRegulatedCard + 
        " Card Sub Type: " + 
        cardData.cardSubType + 
        " Bin Category: " +
        cardData.binCategory +    
        " Exp: " +
        cardData.exp +
        " after that I can call final submit"
      );
      // This is where you would perform final submission to your server
      }
    }
  );
}