Implementing new credit card js code

This commit is contained in:
PCoder 2017-07-16 03:37:19 +05:30
parent 623c7e0d99
commit 481dadcfe5

View file

@ -1,3 +1,28 @@
var cardBrandToPfClass = {
'visa': 'pf-visa',
'mastercard': 'pf-mastercard',
'amex': 'pf-american-express',
'discover': 'pf-discover',
'diners': 'pf-diners',
'jcb': 'pf-jcb',
'unknown': 'pf-credit-card',
}
function setBrandIcon(brand) {
var brandIconElement = document.getElementById('brand-icon');
var pfClass = 'pf-credit-card';
if (brand in cardBrandToPfClass) {
pfClass = cardBrandToPfClass[brand];
}
for (var i = brandIconElement.classList.length - 1; i >= 0; i--) {
brandIconElement.classList.remove(brandIconElement.classList[i]);
}
brandIconElement.classList.add('pf');
brandIconElement.classList.add(pfClass);
}
$( document ).ready(function() { $( document ).ready(function() {
@ -32,8 +57,91 @@ $( document ).ready(function() {
if (!hasCreditcard){ if (!hasCreditcard){
var stripe = Stripe(window.stripeKey); var stripe = Stripe(window.stripeKey);
var elements = stripe.elements({locale: window.current_lan}); var elements = stripe.elements({locale: window.current_lan});
var card = elements.create('card', options={hidePostalCode: true}); //var card = elements.create('card', options={hidePostalCode: true});
card.mount('#card-element'); //card.mount('#card-element');
/* new card */
var server_url = "https://datacenterlight.ch";
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")',
},
]
}
var elements = stripe.elements(element_style);
var style = {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: "'Lato', sans-serif",
fontSize: '14px',
'::placeholder': {
color: '#333',
},
},
};
var credit_card_text_style = {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: "'lato-light', sans-serif",
fontSize: '14px',
'::placeholder': {
color: '#777',
},
},
};
var credit_card_cvv_style = {
base: {
iconColor: '#666EE8',
color: '#31325F',
lineHeight: '40px',
fontWeight: 300,
fontFamily: "'lato-regular', sans-serif",
fontSize: '14px',
'::placeholder': {
color: '#555',
},
},
};
var cardNumberElement = elements.create('cardNumber', {
style: credit_card_text_style,
placeholder : "____ ____ ____ ____",
});
cardNumberElement.mount('#card-number-element');
var cardExpiryElement = elements.create('cardExpiry', {
style: credit_card_cvv_style
});
cardExpiryElement.mount('#card-expiry-element');
var cardCvcElement = elements.create('cardCvc', {
style: credit_card_cvv_style
});
cardCvcElement.mount('#card-cvc-element');
cardNumberElement.on('change', function(event) {
// Switch brand logo
if (event.brand) {
setBrandIcon(event.brand);
}
setOutcome(event);
});
$('#payment-form').submit(function(e) {
e.preventDefault();
stripe.createToken(cardNumberElement).then(setOutcome);
});
/* new card end */
} }
console.log("has creditcard", hasCreditcard); console.log("has creditcard", hasCreditcard);
// hasCreditcard= true; // hasCreditcard= true;
@ -53,8 +161,8 @@ $( document ).ready(function() {
var $form = $('#payment-form'); //var $form = $('#payment-form');
$form.submit(payWithStripe); //$form.submit(payWithStripe);
/* If you're using Stripe for payments */ /* If you're using Stripe for payments */
function payWithStripe(e) { function payWithStripe(e) {
@ -120,7 +228,7 @@ $( document ).ready(function() {
return this.optional(element) || /^[0-9]{2}$/.test(value); return this.optional(element) || /^[0-9]{2}$/.test(value);
}, "Please specify a valid 2-digit year."); }, "Please specify a valid 2-digit year.");
validator = $form.validate({ /*validator = $form.validate({
rules: { rules: {
cardNumber: { cardNumber: {
required: true, required: true,
@ -149,7 +257,7 @@ $( document ).ready(function() {
errorPlacement: function(error, element) { errorPlacement: function(error, element) {
$(element).closest('.form-group').append(error); $(element).closest('.form-group').append(error);
} }
}); });*/
paymentFormReady = function() { paymentFormReady = function() {
if ($form.find('[name=cardNumber]').hasClass("success") && if ($form.find('[name=cardNumber]').hasClass("success") &&