Skip to content

Commit 76ac835

Browse files
vijay-rvijay-r
committed
fixed jshint fail
Added quick test to tests/index.html for Hosted buttons
1 parent 3527237 commit 76ac835

3 files changed

Lines changed: 80 additions & 45 deletions

File tree

‎src/paypal-button.js‎

Lines changed: 37 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,7 @@ PAYPAL.apps = PAYPAL.apps || {};
179179

180180
css += paypalButton + ' .field-error { border: 1px solid #FF0000; }';
181181
css += paypalButton + ' .hide { display: none; }';
182-
css += paypalButton + ' .error-box { background: #FFFFFF; verflow: scroll; border: 1px solid #DADADA; border-radius: 5px; padding: 8px; display: inline-block; }';
182+
css += paypalButton + ' .error-box { background: #FFFFFF; border: 1px solid #DADADA; border-radius: 5px; padding: 8px; display: inline-block; }';
183183

184184
css += paypalInput + ' { white-space: nowrap; overflow: hidden; border-radius: 13px; font-family: "Arial", bold, italic; font-weight: bold; font-style: italic; border: 1px solid #ffa823; color: #0E3168; background: #ffa823; position: relative; text-shadow: 0 1px 0 rgba(255,255,255,.5); cursor: pointer; z-index: 0; }';
185185
css += paypalInput + ':before { content: " "; position: absolute; width: 100%; height: 100%; border-radius: 11px; top: 0; left: 0; background: #ffa823; background: -webkit-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%); background: -moz-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%); background: -ms-linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%); background: linear-gradient(top, #FFAA00 0%,#FFAA00 80%,#FFF8FC 100%); z-index: -2; }';
@@ -354,7 +354,7 @@ PAYPAL.apps = PAYPAL.apps || {};
354354

355355
form.addEventListener('submit', function (e) {
356356
e.preventDefault();
357-
if (validateFields(form.getElementsByTagName('input'))) {
357+
if (validateFields(form.querySelectorAll('input[type=text]'), form.querySelectorAll('div[id=errorBox]')[0])) {
358358
form.submit();
359359
}
360360
}, false);
@@ -372,21 +372,47 @@ PAYPAL.apps = PAYPAL.apps || {};
372372
return form;
373373
}
374374

375+
/**
376+
* Check className exist in element
377+
*/
378+
function hasClass(ele, cls) {
379+
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
380+
}
381+
/**
382+
* Add className to element
383+
*/
384+
function addClass(ele, cls) {
385+
if (!hasClass(ele, cls)) {
386+
ele.className += " " + cls;
387+
}
388+
}
389+
/**
390+
* Remove className from element
391+
*/
392+
function removeClass(ele, cls) {
393+
if (hasClass(ele, cls)) {
394+
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
395+
ele.className = ele.className.replace(reg, ' ');
396+
}
397+
}
398+
375399
/**
376400
* Validate all input fields
377401
*/
378-
function validateFields(fields) {
379-
var field, fieldLabel, patternName, errors = [], errorBox = document.getElementById('errorBox');
402+
function validateFields(fields, errorBox) {
403+
var field, fieldLabel, patternName, errors = [];
380404
for (var i = 0, len = fields.length; i < len; i++) {
381405
field = fields[i];
382-
field.className = 'paypal-input';
383-
406+
removeClass(field, 'field-error');
407+
384408
fieldLabel = field.getAttribute('data-label');
385409
patternName = field.getAttribute('data-pattern');
386-
if (!checkField(field)) {
410+
field.value = field.value.trim();
411+
if (field.getAttribute('data-required') && field.value.trim() === '') {
387412
errors.push(validateFieldHandlers.required.message.replace('%s', fieldLabel));
388-
field.className = field.className + ' field-error';
389-
} else if (!checkPattern(field, patternName)) {
413+
addClass(field, 'field-error');
414+
} else if (field.getAttribute('data-pattern') && validateFieldHandlers[patternName] && !checkPattern(field, patternName)) {
415+
addClass(field, 'field-error');
390416
errors.push(validateFieldHandlers[patternName].message.replace('%s', fieldLabel));
391417
}
392418
}
@@ -400,31 +426,12 @@ PAYPAL.apps = PAYPAL.apps || {};
400426
}
401427
}
402428

403-
/**
404-
* Check each field for required option
405-
*/
406-
function checkField(field) {
407-
if (field.getAttribute('data-required'))
408-
{
409-
field.value = field.value ? field.value.trim() : '';
410-
return !(field.value === '');
411-
}
412-
return true;
413-
}
414-
415429
/**
416430
* Check each field value with pattern
417431
*/
418432
function checkPattern(field, patternName) {
419-
var pattern;
420-
var patternKey = field.getAttribute('data-pattern');
421-
var validateData = validateFieldHandlers[patternName];
422-
if (patternKey && validateData) {
423-
pattern = new RegExp(validateData.regex);
424-
field.className = field.className + ' field-error';
425-
return pattern.test(field.value);
426-
}
427-
return true;
433+
var pattern = new RegExp(validateFieldHandlers[patternName].regex);
434+
return pattern.test(field.value);
428435
}
429436

430437
/**

‎test/index.html‎

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
<div id="sandbox">
1515
<h2>Buy Now (Sandbox)</h2>
16-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
16+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
1717
data-button="buynow"
1818
data-name="Buy now!"
1919
data-amount="1.00"
@@ -24,7 +24,7 @@ <h2>Buy Now (Sandbox)</h2>
2424

2525
<div id="buynow-sm">
2626
<h2>Buy Now (Small)</h2>
27-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
27+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
2828
data-button="buynow"
2929
data-name="Buy now!"
3030
data-amount="1.00"
@@ -35,7 +35,7 @@ <h2>Buy Now (Small)</h2>
3535

3636
<div id="buynow-lg">
3737
<h2>Buy Now (Large)</h2>
38-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
38+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
3939
data-button="buynow"
4040
data-name="Buy now!"
4141
data-amount="1.00"
@@ -44,7 +44,7 @@ <h2>Buy Now (Large)</h2>
4444

4545
<div id="buynow-es_ES">
4646
<h2>Buy Now (Large/Spanish)</h2>
47-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
47+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
4848
data-button="buynow"
4949
data-name="Buy now!"
5050
data-amount="1.00"
@@ -55,7 +55,7 @@ <h2>Buy Now (Large/Spanish)</h2>
5555

5656
<div id="buynow-ja_JP">
5757
<h2>Buy Now (Large/Japanese)</h2>
58-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
58+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
5959
data-button="buynow"
6060
data-name="Buy now!"
6161
data-amount="1.00"
@@ -65,7 +65,7 @@ <h2>Buy Now (Large/Japanese)</h2>
6565

6666
<div id="buynow-de_DE">
6767
<h2>Buy Now (Large/German)</h2>
68-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
68+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
6969
data-button="buynow"
7070
data-name="Buy now!"
7171
data-amount="1.00"
@@ -76,7 +76,7 @@ <h2>Buy Now (Large/German)</h2>
7676

7777
<div id="buynow-editable">
7878
<h2>Buy Now (Large/Editable/English)</h2>
79-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
79+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
8080
data-button="buynow"
8181
data-name-editable="Buy now!"
8282
data-amount-editable="1.00"
@@ -87,7 +87,7 @@ <h2>Buy Now (Large/Editable/English)</h2>
8787

8888
<div id="cart-sm">
8989
<h2>Cart (Small/Italian)</h2>
90-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
90+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
9191
data-button="cart"
9292
data-name="Add to cart!"
9393
data-amount="1.00"
@@ -98,7 +98,7 @@ <h2>Cart (Small/Italian)</h2>
9898

9999
<div id="cart-lg">
100100
<h2>Cart (Large/English)</h2>
101-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
101+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
102102
data-button="cart"
103103
data-name="Add to cart!"
104104
data-amount="1.00"
@@ -108,7 +108,7 @@ <h2>Cart (Large/English)</h2>
108108

109109
<div id="donate-sm">
110110
<h2>Donate (Small/English)</h2>
111-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
111+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
112112
data-button="donate"
113113
data-name="Donate!"
114114
data-amount="1.00"
@@ -118,7 +118,7 @@ <h2>Donate (Small/English)</h2>
118118

119119
<div id="donate-lg">
120120
<h2>Donate (Large/English)</h2>
121-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
121+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
122122
data-button="donate"
123123
data-name="Donate!"
124124
data-amount="1.00"
@@ -128,7 +128,7 @@ <h2>Donate (Large/English)</h2>
128128

129129
<div id="subscribe-sm">
130130
<h2>Subscribe (Small/English)</h2>
131-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
131+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
132132
data-button="subscribe"
133133
data-name="Subscribe!"
134134
data-size="small"
@@ -140,7 +140,7 @@ <h2>Subscribe (Small/English)</h2>
140140

141141
<div id="subscribe-lg">
142142
<h2>Subscribe (Large/English)</h2>
143-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
143+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
144144
data-button="subscribe"
145145
data-name="Subscribe!"
146146
data-amount="1.00"
@@ -151,13 +151,41 @@ <h2>Subscribe (Large/English)</h2>
151151

152152
<div id="qr">
153153
<h2>QR Code</h2>
154-
<script src="../dist/paypal-button.min.js?merchant=6XF3MPZBZV6HU"
154+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
155155
data-button="qr"
156156
data-name="Buy from a QR code!"
157157
data-amount="1.00"
158158
data-size="250"
159159
></script>
160160
</div>
161161

162+
<div id="button-id">
163+
<h2>Hosted buttons</h2>
164+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
165+
data-button_id="NQ9MQGA8YG53C"
166+
data-button="buynow"
167+
168+
data-OPTION0NAME="Color"
169+
data-L_OPTION0SELECT0="Red"
170+
data-L_OPTION0SELECT1="Blue"
171+
data-L_OPTION0SELECT2="Green"
172+
data-L_OPTION0PRICE0="10.00"
173+
data-L_OPTION0PRICE1="8.00"
174+
data-L_OPTION0PRICE2="12.00"
175+
176+
data-OPTION1NAME="Size"
177+
data-L_OPTION1SELECT0="Small"
178+
data-L_OPTION1SELECT1="Medium"
179+
data-L_OPTION1SELECT2="Large"
180+
181+
data-OPTION2NAME="Coupon Number"
182+
data-L_OPTION2SELECT0=""
183+
data-OPTION2REQUIRED="true"
184+
data-OPTION2PATTERN="alphaNumericRegex"
185+
186+
data-env="sandbox"
187+
>
188+
</script>
189+
</div>
162190
</body>
163191
</html>

‎test/spec/test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ describe('Test page button counter', function () {
6565
});
6666

6767
it('Should have seven buy now buttons', function () {
68-
buttons.buynow.should.equal(7);
68+
buttons.buynow.should.equal(8);
6969
});
7070

7171
it('Should have two cart buttons', function () {

0 commit comments

Comments
 (0)