Implementing new credit card js code
This commit is contained in:
parent
623c7e0d99
commit
481dadcfe5
1 changed files with 114 additions and 6 deletions
|
@ -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() {
|
||||
|
||||
|
||||
|
@ -32,8 +57,91 @@ $( document ).ready(function() {
|
|||
if (!hasCreditcard){
|
||||
var stripe = Stripe(window.stripeKey);
|
||||
var elements = stripe.elements({locale: window.current_lan});
|
||||
var card = elements.create('card', options={hidePostalCode: true});
|
||||
card.mount('#card-element');
|
||||
//var card = elements.create('card', options={hidePostalCode: true});
|
||||
//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);
|
||||
// hasCreditcard= true;
|
||||
|
@ -53,8 +161,8 @@ $( document ).ready(function() {
|
|||
|
||||
|
||||
|
||||
var $form = $('#payment-form');
|
||||
$form.submit(payWithStripe);
|
||||
//var $form = $('#payment-form');
|
||||
//$form.submit(payWithStripe);
|
||||
|
||||
/* If you're using Stripe for payments */
|
||||
function payWithStripe(e) {
|
||||
|
@ -120,7 +228,7 @@ $( document ).ready(function() {
|
|||
return this.optional(element) || /^[0-9]{2}$/.test(value);
|
||||
}, "Please specify a valid 2-digit year.");
|
||||
|
||||
validator = $form.validate({
|
||||
/*validator = $form.validate({
|
||||
rules: {
|
||||
cardNumber: {
|
||||
required: true,
|
||||
|
@ -149,7 +257,7 @@ $( document ).ready(function() {
|
|||
errorPlacement: function(error, element) {
|
||||
$(element).closest('.form-group').append(error);
|
||||
}
|
||||
});
|
||||
});*/
|
||||
|
||||
paymentFormReady = function() {
|
||||
if ($form.find('[name=cardNumber]').hasClass("success") &&
|
||||
|
|
Loading…
Reference in a new issue