1
|
|
|
/* |
2
|
|
|
The MIT License (MIT) |
3
|
|
|
|
4
|
|
|
Copyright (c) 2015 William Hilton |
5
|
|
|
|
6
|
|
|
Permission is hereby granted, free of charge, to any person obtaining a copy |
7
|
|
|
of this software and associated documentation files (the "Software"), to deal |
8
|
|
|
in the Software without restriction, including without limitation the rights |
9
|
|
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell |
10
|
|
|
copies of the Software, and to permit persons to whom the Software is |
11
|
|
|
furnished to do so, subject to the following conditions: |
12
|
|
|
|
13
|
|
|
The above copyright notice and this permission notice shall be included in |
14
|
|
|
all copies or substantial portions of the Software. |
15
|
|
|
|
16
|
|
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR |
17
|
|
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, |
18
|
|
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE |
19
|
|
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER |
20
|
|
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, |
21
|
|
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN |
22
|
|
|
THE SOFTWARE. |
23
|
|
|
*/ |
24
|
|
|
var $form = $('#payment-form'); |
25
|
|
|
var submitPaymentButton = $('#submit-payment'); |
26
|
|
|
var delegateForm = $('#delegate-form'); |
27
|
|
|
var stripeTokenElement = delegateForm.find('input[name="stripe_token"]'); |
28
|
|
|
submitPaymentButton.on('click', payWithStripe); |
29
|
|
|
|
30
|
|
|
/* If you're using Stripe for payments */ |
31
|
|
|
function payWithStripe(e) { |
32
|
|
|
|
33
|
|
|
e.preventDefault(); |
34
|
|
|
function stripeResponseHandler(status, response) { |
35
|
|
|
if (response.error) { |
36
|
|
|
/* Visual feedback */ |
37
|
|
|
submitPaymentButton.html('Try again').prop('disabled', false); |
38
|
|
|
/* Show Stripe errors on the form */ |
39
|
|
|
$form.find('.payment-errors').text(response.error.message); |
40
|
|
|
$form.find('.payment-errors').closest('.row').show(); |
41
|
|
|
} else { |
42
|
|
|
/* Visual feedback */ |
43
|
|
|
submitPaymentButton.html('Processing <i class="fa fa-spinner fa-pulse"></i>'); |
44
|
|
|
/* Hide Stripe errors on the form */ |
45
|
|
|
$form.find('.payment-errors').closest('.row').hide(); |
46
|
|
|
$form.find('.payment-errors').text(""); |
47
|
|
|
// response contains id and card, which contains additional card details |
48
|
|
|
|
49
|
|
|
var token = response.id; |
50
|
|
|
stripeTokenElement.val(token); |
51
|
|
|
delegateForm.submit(); |
52
|
|
|
} |
53
|
|
|
} |
54
|
|
|
|
55
|
|
|
if (stripeTokenElement.val() != '') { |
56
|
|
|
delegateForm.submit(); |
57
|
|
|
} |
58
|
|
|
|
59
|
|
|
/* Abort if invalid form data */ |
60
|
|
|
if (!validator.form()) { |
|
|
|
|
61
|
|
|
return; |
62
|
|
|
} |
63
|
|
|
|
64
|
|
|
/* Visual feedback */ |
65
|
|
|
$('#submit-payment').html('Validating <i class="fa fa-spinner fa-pulse"></i>').prop('disabled', true).removeClass('btn-success'); |
66
|
|
|
|
67
|
|
|
/* Create token */ |
68
|
|
|
var expiry = $form.find('[name=cardExpiry]').payment('cardExpiryVal'); |
69
|
|
|
var ccData = { |
70
|
|
|
number: $form.find('[name=cardNumber]').val().replace(/\s/g,''), |
71
|
|
|
cvc: $form.find('[name=cardCVC]').val(), |
72
|
|
|
exp_month: expiry.month, |
73
|
|
|
exp_year: expiry.year, |
74
|
|
|
name: $form.find('[name=cardName]').val(), |
75
|
|
|
address_line1: $form.find('[name=cardLine1]').val(), |
76
|
|
|
address_line2: $form.find('[name=cardLine2]').val(), |
77
|
|
|
address_city: $form.find('[name=cardCity]').val(), |
78
|
|
|
address_state: $form.find('[name=cardState]').val(), |
79
|
|
|
address_zip: $form.find('[name=cardZip]').val(), |
80
|
|
|
address_country: $form.find('[name=cardCountry]').val() |
81
|
|
|
}; |
82
|
|
|
|
83
|
|
|
Stripe.card.createToken(ccData, stripeResponseHandler); |
|
|
|
|
84
|
|
|
} |
85
|
|
|
/* Fancy restrictive input formatting via jQuery.payment library*/ |
86
|
|
|
$('input[name=cardNumber]').payment('formatCardNumber'); |
87
|
|
|
$('input[name=cardCVC]').payment('formatCardCVC'); |
88
|
|
|
$('input[name=cardExpiry]').payment('formatCardExpiry'); |
89
|
|
|
|
90
|
|
|
/* Form validation using Stripe client-side validation helpers */ |
91
|
|
|
jQuery.validator.addMethod("cardNumber", function(value, element) { |
92
|
|
|
return this.optional(element) || Stripe.card.validateCardNumber(value); |
|
|
|
|
93
|
|
|
}, "Please specify a valid credit card number."); |
94
|
|
|
|
95
|
|
|
jQuery.validator.addMethod("cardExpiry", function(value, element) { |
96
|
|
|
/* Parsing month/year uses jQuery.payment library */ |
97
|
|
|
value = $.payment.cardExpiryVal(value); |
98
|
|
|
return this.optional(element) || Stripe.card.validateExpiry(value.month, value.year); |
|
|
|
|
99
|
|
|
}, "Invalid expiration date."); |
100
|
|
|
|
101
|
|
|
jQuery.validator.addMethod("cardCVC", function(value, element) { |
102
|
|
|
return this.optional(element) || Stripe.card.validateCVC(value); |
|
|
|
|
103
|
|
|
}, "Invalid CVC."); |
104
|
|
|
|
105
|
|
|
validator = $form.validate({ |
|
|
|
|
106
|
|
|
rules: { |
107
|
|
|
cardNumber: { |
108
|
|
|
required: true, |
109
|
|
|
cardNumber: true |
110
|
|
|
}, |
111
|
|
|
cardExpiry: { |
112
|
|
|
required: true, |
113
|
|
|
cardExpiry: true |
114
|
|
|
}, |
115
|
|
|
cardCVC: { |
116
|
|
|
required: true, |
117
|
|
|
cardCVC: true |
118
|
|
|
} |
119
|
|
|
}, |
120
|
|
|
highlight: function(element) { |
121
|
|
|
$(element).closest('.form-control').removeClass('success').addClass('error'); |
122
|
|
|
}, |
123
|
|
|
unhighlight: function(element) { |
124
|
|
|
$(element).closest('.form-control').removeClass('error').addClass('success'); |
125
|
|
|
}, |
126
|
|
|
errorPlacement: function(error, element) { |
127
|
|
|
$(element).closest('.form-group').append(error); |
128
|
|
|
} |
129
|
|
|
}); |
130
|
|
|
|
131
|
|
|
paymentFormReady = function() { |
|
|
|
|
132
|
|
|
return ($form.find('[name=cardNumber]').hasClass("success") && |
133
|
|
|
$form.find('[name=cardExpiry]').hasClass("success") && |
134
|
|
|
$form.find('[name=cardCVC]').val().length > 1); |
135
|
|
|
}; |
136
|
|
|
|
137
|
|
|
submitPaymentButton.prop('disabled', true); |
138
|
|
|
var readyInterval = setInterval(function() { |
139
|
|
|
if (paymentFormReady() || stripeTokenElement.val() != '') { |
140
|
|
|
submitPaymentButton.prop('disabled', false).addClass('btn-success'); |
141
|
|
|
clearInterval(readyInterval); |
142
|
|
|
} |
143
|
|
|
}, 250); |
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.