<script type="text/javascript">
var bbr_mls_cc_err_number = "Please enter valid credit card number.";
var bbr_mls_cc_err_exp = "Please enter valid credit card expiration date.";
var bbr_mls_cc_err_cvc = "Please enter valid card verification code.";
var bbr_mls_cc_err_postal_code = "Please enter valid postal code.";
</script>
<script type="text/javascript">
var sqTranslations = {
"Credit card number is not valid" : bbr_mls_cc_err_number,
"CVV is not valid": bbr_mls_cc_err_cvc,
"Expiration date is not valid" : bbr_mls_cc_err_exp,
"Postal code is not valid" : bbr_mls_cc_err_postal_code
}
var sqPaymentForm = new SqPaymentForm({
// Replace this value with your application's ID (available from the merchant dashboard).
// If you're just testing things out, replace this with your _Sandbox_ application ID,
// which is also available there.
applicationId: 'sandbox-sq0idp-LM7Elz6g-4BoZS64z3ae4Q',
inputClass: 'sq-input',
cardNumber: {
elementId: 'sq-card-number',
placeholder: "0000 0000 0000 0000"
},
cvv: {
elementId: 'sq-cvv',
placeholder: 'CVC'
},
expirationDate: {
elementId: 'sq-expiration-date',
placeholder: 'MM / YY'
},
postalCode: {
elementId: 'sq-postal-code',
placeholder: 'Postal Code'
},
inputStyles: [
// Because this object provides no value for mediaMaxWidth or mediaMinWidth,
// these styles apply for screens of all sizes, unless overridden by another
// input style below.
{
fontSize: '14px',
padding: '3px'
},
// These styles are applied to inputs ONLY when the screen width is 400px
// or smaller. Note that because it doesn't specify a value for padding,
// the padding value in the previous object is preserved.
{
mediaMaxWidth: '400px',
fontSize: '18px',
}
],
callbacks: {
cardNonceResponseReceived: function(errors, nonce, cardData) {
if (errors) {
$("#loading-div-background").hide();
// var errorDiv = document.getElementById('errors');
// errorDiv.innerHTML = "";
var msg = '', sep = '';
errors.forEach(function(error) {
if (sqTranslations.hasOwnProperty(error.message)){
error.message = sqTranslations[error.message];
}
msg += sep + error.message;
sep = "<br>\n";
});
Lobibox.alert('error', {
"msg": msg
});
} else {
// This alert is for debugging purposes only.
// alert('Nonce received! ' + nonce + ' ' + JSON.stringify(cardData));
// Assign the value of the nonce to a hidden form element
var nonceField = document.getElementById('card-nonce');
nonceField.value = nonce;
// Submit the form
// document.getElementById('form').submit();
$('#btn_submit_form').trigger('click');
}
},
unsupportedBrowserDetected: function() {
// Alert the buyer that their browser is not supported
}
}
});
function submitButtonClick(event) {
$("#loading-div-background").show();
event.preventDefault();
sqPaymentForm.requestCardNonce();
}
</script>
