forked from uncloud/uncloud
80 lines
2.9 KiB
JavaScript
80 lines
2.9 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);
|
|
};
|
|
|
|
function loadStripe(stripe) {
|
|
var cardNumberElement;
|
|
if (stripe) {
|
|
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;
|
|
}
|
|
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);
|
|
}
|
|
});
|
|
}
|
|
return cardNumberElement;
|
|
};
|
|
|