forked from uncloud/uncloud
180 lines
6.3 KiB
JavaScript
180 lines
6.3 KiB
JavaScript
function setBrandIcon(brand) {
|
|
var brandIconElement = document.getElementById('brand-icon');
|
|
var pfClass = 'fa-cc-' + brand;
|
|
for (var i = brandIconElement.classList.length - 1; i >= 0; i--) {
|
|
brandIconElement.classList.remove(brandIconElement.classList[i]);
|
|
}
|
|
brandIconElement.classList.add('fab');
|
|
brandIconElement.classList.add(pfClass);
|
|
}
|
|
|
|
$(document).ready(function () {
|
|
var hasCreditcard = window.hasCreditcard || false;
|
|
if (hasCreditcard && window.stripeKey) {
|
|
var stripe = Stripe(window.stripeKey);
|
|
if (window.pm_id == undefined) {
|
|
var element_style = {
|
|
fonts: [{
|
|
family: 'lato-light',
|
|
src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Light.woff) format("woff2")'
|
|
}, {
|
|
family: 'lato-regular',
|
|
src: 'url(https://cdn.jsdelivr.net/font-lato/2.0/Lato/Lato-Regular.woff) format("woff2")'
|
|
}
|
|
],
|
|
locale: window.current_lan
|
|
};
|
|
var elements = stripe.elements(element_style);
|
|
var credit_card_text_style = {
|
|
base: {
|
|
iconColor: '#666EE8',
|
|
color: '#31325F',
|
|
lineHeight: '25px',
|
|
fontWeight: 300,
|
|
fontFamily: "'lato-light', sans-serif",
|
|
fontSize: '14px',
|
|
'::placeholder': {
|
|
color: '#777'
|
|
}
|
|
},
|
|
invalid: {
|
|
iconColor: '#eb4d5c',
|
|
color: '#eb4d5c',
|
|
lineHeight: '25px',
|
|
fontWeight: 300,
|
|
fontFamily: "'lato-regular', sans-serif",
|
|
fontSize: '14px',
|
|
'::placeholder': {
|
|
color: '#eb4d5c',
|
|
fontWeight: 400
|
|
}
|
|
}
|
|
};
|
|
|
|
var enter_ccard_text = "Enter your credit card number";
|
|
if (typeof window.enter_your_card_text !== 'undefined') {
|
|
enter_ccard_text = window.enter_your_card_text;
|
|
}
|
|
var cardNumberElement = elements.create('cardNumber', {
|
|
style: credit_card_text_style,
|
|
placeholder: enter_ccard_text
|
|
});
|
|
cardNumberElement.mount('#card-number-element');
|
|
|
|
var cardExpiryElement = elements.create('cardExpiry', {
|
|
style: credit_card_text_style
|
|
});
|
|
cardExpiryElement.mount('#card-expiry-element');
|
|
|
|
var cardCvcElement = elements.create('cardCvc', {
|
|
style: credit_card_text_style
|
|
});
|
|
cardCvcElement.mount('#card-cvc-element');
|
|
cardNumberElement.on('change', function (event) {
|
|
if (event.brand) {
|
|
setBrandIcon(event.brand);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function submitBillingForm(pmId) {
|
|
var order_form = $('#order_form');
|
|
order_form.append('<input type="hidden" name="id_payment_method" value="' + pmId + '" />');
|
|
order_form.submit();
|
|
}
|
|
|
|
var $form_new = $('#payment-form-new');
|
|
$form_new.submit(payWithPaymentIntent);
|
|
window.result = "";
|
|
window.card = "";
|
|
function payWithPaymentIntent(e) {
|
|
e.preventDefault();
|
|
function stripePMHandler(paymentMethod) {
|
|
// Insert the token ID into the form so it gets submitted to the server
|
|
$('#id_payment_method').val(paymentMethod.id);
|
|
submitBillingForm(paymentMethod.id);
|
|
}
|
|
stripe.createPaymentMethod({
|
|
type: 'card',
|
|
card: cardNumberElement,
|
|
})
|
|
.then(function(result) {
|
|
// Handle result.error or result.paymentMethod
|
|
window.result = result;
|
|
if(result.error) {
|
|
var errorElement = document.getElementById('card-errors');
|
|
errorElement.textContent = result.error.message;
|
|
} else {
|
|
console.log("created paymentMethod " + result.paymentMethod.id);
|
|
stripePMHandler(result.paymentMethod);
|
|
}
|
|
});
|
|
window.card = cardNumberElement;
|
|
}
|
|
|
|
/* Form validation */
|
|
$.validator.addMethod("month", function (value, element) {
|
|
return this.optional(element) || /^(01|02|03|04|05|06|07|08|09|10|11|12)$/.test(value);
|
|
}, "Please specify a valid 2-digit month.");
|
|
|
|
$.validator.addMethod("year", function (value, element) {
|
|
return this.optional(element) || /^[0-9]{2}$/.test(value);
|
|
}, "Please specify a valid 2-digit year.");
|
|
|
|
validator = $form_new.validate({
|
|
rules: {
|
|
cardNumber: {
|
|
required: true,
|
|
creditcard: true,
|
|
digits: true
|
|
},
|
|
expMonth: {
|
|
required: true,
|
|
month: true
|
|
},
|
|
expYear: {
|
|
required: true,
|
|
year: true
|
|
},
|
|
cvCode: {
|
|
required: true,
|
|
digits: true
|
|
}
|
|
},
|
|
highlight: function (element) {
|
|
$(element).closest('.form-control').removeClass('success').addClass('error');
|
|
},
|
|
unhighlight: function (element) {
|
|
$(element).closest('.form-control').removeClass('error').addClass('success');
|
|
},
|
|
errorPlacement: function (error, element) {
|
|
$(element).closest('.form-group').append(error);
|
|
}
|
|
});
|
|
|
|
$('#checkout-btn').click(function () {
|
|
if($('input[name="payment_card"]:checked').size() == 1) {
|
|
var id = $('input[name="payment_card"]:checked').val();
|
|
if (id != 'new') {
|
|
$('#id_card').val(id);
|
|
submitBillingForm(id);
|
|
}
|
|
}
|
|
});
|
|
$('#continue-btn').click(function () {
|
|
submitBillingForm();
|
|
});
|
|
|
|
|
|
$('input[name="payment_card"]').change(function(e) {
|
|
if($('input[name="payment_card"]:checked').val() == 'new') {
|
|
$('#checkout-btn').hide();
|
|
$('#newcard').show();
|
|
} else {
|
|
$('#newcard').hide();
|
|
$('#checkout-btn').show();
|
|
}
|
|
});
|
|
|
|
});
|