<div class="panel panel-primary">
  <div class="panel-heading">
      <h3 class="panel-title">Credit Card Payment</h3>
  </div>
  <form class="panel-body" action="your-form-handling-page" method="POST" id="checkout-form" onsubmit="return do_when_clicking_submit_button()">
    <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="card-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/yyyy)</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="submit" id="submit-button">Pay Now</button>
    
		</form>
  
</div>

<!--BlueSnap Hosted Payment Fields JavaScript file-->
		<script type="text/javascript" src="https://sandbox.bluesnap.com/services/hosted-payment-fields/v1.0/bluesnap.hpf.mini.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: #ff5722;
  font-size: 12px;
  margin-top: 5px;
  height: 12px;
  display: block;
}


/* 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;
}

		//Initiates the Hosted Payment Fields script with your Hosted Payment Fields token and defines event handlers and styles

			var bsObj = {
				hostedPaymentFields: {
					ccn: "ccn", // name cannot contain spaces or special characters 
					cvv: "cvv", // name cannot contain spaces or special characters 
					exp: "exp"  // name cannot contain spaces or special characters 
				},
				onFieldEventHandler: {
					onFocus: function(tagId) { 
						// Handle focus 
            if (tagId == "ccn") {
              $( "#card-number" ).addClass( "hosted-field-focus" );
            } else if (tagId == "exp") {
              $( "#exp-date" ).addClass( "hosted-field-focus" ); 
            } else if (tagId == "cvv") {
              $( "#cvv" ).addClass( "hosted-field-focus" );
            }  
					},
					onBlur: function(tagId) {
						// Handle blur  
            if (tagId == "ccn") {
              $( "#card-number" ).removeClass( "hosted-field-focus" );
            } else if (tagId == "exp") {
              $( "#exp-date" ).removeClass( "hosted-field-focus" ); 
            } else if (tagId == "cvv") {
              $( "#cvv" ).removeClass( "hosted-field-focus" );
            }
					},
					onError: function(tagId, errorCode) { 
						// Handle a change in validation
						/* error codes:
							"001" --> "Please enter a valid credit card number";			
							"002" --> "Please enter the CVV/CVC of your card";			
							"003" --> "Please enter your credit card's expiration date";			
							"004" --> "Session expired please refresh page to continue";			
							"005" --> "Internal server error please try again later";			
						*/

            if (tagId == "ccn" && errorCode == "001") {
              $( "#card-help" ).text('Please enter a valid credit card number');
            } else if (tagId == "exp" && errorCode == "003") {
              $( "#exp-help" ).text('Please enter the expiration date (mm/yyyy)'); 
            } else if (tagId == "cvv" && errorCode == "002" ) {
              $( "#cvv-help" ).text('Please enter the CVV/CVC of your card');
            }
					},
					onEmpty: function(tagId, errorCode) { 
						// Handle a change in validation  
            if (tagId == "ccn" && errorCode == "001") {
              $( "#card-help" ).text('');
              $('#card-logo img').attr("src", "https://files.readme.io/d1a25b4-generic-card.png");
            } else if (tagId == "exp" && errorCode == "003") {
              $( "#exp-help" ).text('');
            } else if (tagId == "cvv" && errorCode == "002" ) {
              $( "#cvv-help" ).text('');
            }
					},
					onType: function(tagId, cardType) {
						// get card type from cardType and display the img accordingly
						
            if (cardType == "AmericanExpress") { $('#card-logo img').attr("src", "https://files.readme.io/97e7acc-Amex.png");
            } else if (cardType == "CarteBleue") { $('#card-logo img').attr("src", "https://files.readme.io/5da1081-cb.png");
            } else if (cardType == "DinersClub") { $('#card-logo img').attr("src", "https://files.readme.io/8c73810-Diners_Club.png");
            } else if (cardType == "Discover") { $('#card-logo img').attr("src", "https://files.readme.io/caea86d-Discover.png");
            } else if (cardType == "JCB") { $('#card-logo img').attr("src", "https://files.readme.io/e076aed-JCB.png");
            } else if (cardType == "MaestroUK") { $('#card-logo img').attr("src", "https://files.readme.io/daeabbd-Maestro.png");
            } else if (cardType == "MasterCard") { $('#card-logo img').attr("src", "https://files.readme.io/5b7b3de-Mastercard.png");
            } else if (cardType == "Solo") { $('#card-logo img').attr("src", "https://sandbox.bluesnap.com/services/hosted-payment-fields/cc-types/solo.png");
            } else if (cardType == "Visa") { $('#card-logo img').attr("src", "https://files.readme.io/9018c4f-Visa.png");
            }
					},
					onValid: function(tagId) {
						// Handle a change in validation
            if (tagId == "ccn") {
              $( "#card-number" ).removeClass( "hosted-field-focus" );
              $( "#card-help" ).text('');
            } else if (tagId == "exp") {
              $( "#exp-date" ).removeClass( "hosted-field-focus" );
              $( "#exp-help" ).text('');
            } else if (tagId == "cvv") {
              $( "#cvv" ).removeClass( "hosted-field-focus" );
              $( "#cvv-help" ).text('');
            }
					}
				},				  					  
				style: {
					// Styling all Hosted Payment Field inputs
					"input": {
						"font-size": "14px",
            "font-family": "RobotoDraft,Roboto,Helvetica Neue,Helvetica,Arial,sans-serif",
            "line-height": "1.42857143",
            "color": "#555"
					},
					
					/*"#ccn": {
						
					},*/
					
					// Styling Hosted Payment Field input state
					":focus": {
						"color": "#555"
					}
				},
        ccnPlaceHolder: "", 
        cvvPlaceHolder: "", 
        expPlaceHolder: ""
			};
			bluesnap.hostedPaymentFieldsCreation ("672d02b47ae64498c30ec3312ce57976bf171d86a1b75c805c212b715352639d_", bsObj);

		
		// Submits the credit card, expiration date and CVV data to BlueSnap, where it will be associated with the Hosted Payment Fields token. On success, a card data object containing the card type and last four digits will be be passed to the function (cardData). You should add a function to do the final submit of the form after the card type and last four digits are received.
		

			
			function do_when_clicking_submit_button(){						   
				bluesnap.submitCredentials( function(cardData){
					console.log('the card type is ' + cardData.ccType + ' and last 4 digits are ' + cardData.last4Digits + ' and exp is ' + cardData.exp + ' after that I can call final submit');
				});
				/* submit the form
				return true; */
				return false; // don't submit the form
			}