<div class="panel panel-default bootstrap-basic">
<form class="panel-body" id="checkout-form" action="#">
<div class="row">
<div class="form-group col-md-12">
<label for="cardholder-name">Name on Card</label>
<input type="text" class="form-control" id="cardholder-name" placeholder="Full Name">
<span class="helper-text"></span>
</div>
<!--Hosted Field for CC number-->
<div class="form-group col-md-12">
<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 Field for CC EXP-->
<div class="form-group col-xs-7">
<label for="exp-date">Exp. Date</label>
<div class="form-control" id="exp-date" data-bluesnap="exp"></div>
<span class="helper-text" id="exp-help"></span>
</div>
<!--Hosted Field for CC CVV-->
<div class="form-group col-xs-5">
<label for="cvv">Security Code</label>
<div class="form-control" id="cvv" data-bluesnap="cvv"></div>
<span class="helper-text" id='cvv-help'></span>
</div>
</div>
<button class="btn btn-success btn-lg col-xs-6 col-xs-offset-3" 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://sandbox.bluesnap.com/web-sdk/4/bluesnap.js"></script>
/* Bootstrap styles*/
.panel {
width: 70%;
margin: 2em auto;
}
.panel-body {
width: 90%;
margin: 2em auto;
}
.helper-text {
color: #e93143;
font-size: 12px;
margin-top: 5px;
height: 12px;
display: block;
}
.helper-text-green {
color: green;
}
/* Hosted Payment Fields styles*/
.hosted-field-focus {
border: 1px solid #66afe9;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.hosted-field-invalid {
border: 1px solid #e93143;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(233,49,67, 0.8);
}
.hosted-field-valid {
border: 1px solid #14ba57 ;
}
/* 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-valid hosted-field-invalid", "hosted-field-focus");
},
onBlur: function(tagId) {
// Handle blur
changeImpactedElement(tagId, "hosted-field-focus");
},
onError: function(tagId, errorCode, errorDescription) {
// Handle a change in validation
changeImpactedElement(tagId, "hosted-field-valid hosted-field-focus", "hosted-field-invalid");
$("#" + tagId + "-help").removeClass('helper-text-green').text(errorCode + " - " + errorDescription);
},
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
changeImpactedElement(tagId, "hosted-field-focus hosted-field-invalid", "hosted-field-valid");
$("#" + tagId + "-help").text("");
}
},
//styling is optional
style: {
// Styling all inputs
"input": {
"font-size": "14px",
"font-family": "Helvetica Neue,Helvetica,Arial,sans-serif",
"line-height": "1.42857143",
"color": "#555"
},
// Styling a specific field
/*"#ccn": {
},*/
// Styling Hosted Payment Field input state
":focus": {
"color": "#555"
}
},
ccnPlaceHolder: "4111222233334444",
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
}
}
);
}
