Skip to content

Commit cef8543

Browse files
vijay-rvijay-r
committed
change JSON to data attribute
1 parent da1729f commit cef8543

2 files changed

Lines changed: 71 additions & 55 deletions

File tree

‎README.md‎

Lines changed: 24 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -87,31 +87,30 @@ Button stored on PayPal will have hosted button id. Add `data-hosted_button_id`
8787
data-hosted_button_id='<HOSTED_BUTTON_ID>'
8888

8989
## Optional fields
90-
Creating custom dropdown field is by adding `-options-N`
91-
92-
data-<OPTION_NAME>-options-N='<JSON_DATA>'
93-
94-
**Usage:**
95-
96-
data-colors-options-0='<DROP_DOWN_JSON_DATA>'
97-
data-sizes-options-1='<DROP_DOWN_JSON_DATA>'
98-
data-coupon-options2='<TEXT_FIELD_JSON_DATA>'
99-
100-
**Note:** JSON should be wrapped with Single quote
101-
102-
**Sample JSON Data for dropdown field**
103-
104-
DROP_DOWN_JSON_DATA
105-
Ex: { "label" : "Colors", "value": [ {"Red" : "Red $10.00"}, {"Blue" : "Blue $8.00"} ,{"Green" : "Green $12.00"} ]}
106-
or
107-
Ex: { "label" : "Sizes", "value": [ "Small", "Medium", "Large" ] }
108-
109-
110-
**Sample JSON Data for input field**
111-
112-
TEXT_FIELD_JSON_DATA
113-
Ex: { "label" : "Coupon Number", "value": "", "required" : true, "pattern" : "alphaNumericRegex"}
114-
pattern = alphaNumericRegex, alphaRegex, numericRegex
90+
Creating custom dropdown field is by adding
91+
92+
`data-OPTIONnNAME`
93+
'data-L_OPTIONnSELECTx`
94+
`data-L_OPTIONnPRICEx`
95+
96+
`data-OPTIONnREQUIRED="true"`
97+
`data-OPTIONnPATTERN="alphaNumericRegex|alphaRegex|numericRegex"`
98+
99+
**Dropdown field**
100+
Ex:
101+
data-OPTION0NAME="Color"
102+
data-L_OPTION0SELECT0="Red"
103+
data-L_OPTION0SELECT1="Blue"
104+
data-L_OPTION0SELECT2="Green"
105+
data-L_OPTION0PRICE0="10.00"
106+
data-L_OPTION0PRICE1="8.00"
107+
data-L_OPTION0PRICE2="12.00"
108+
109+
data-OPTION1NAME="Size"
110+
data-L_OPTION1SELECT0="Small"
111+
data-L_OPTION1SELECT1="Large"
112+
data-OPTION2REQUIRED="true"
113+
data-OPTION2PATTERN="alphaNumericRegex"
115114

116115
## Callback notification
117116
On completion of a transaction you can get a payment notification ([IPN](https://www.x.com/developers/paypal/documentation-tools/ipn/integration-guide/IPNIntro)) on a callback URL you specify using the `data-callback` attribute. An [IPN simulator](https://developer.paypal.com/webapps/developer/applications/ipn_simulator) is available on the sandbox.

‎src/paypal-button.js‎

Lines changed: 47 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: none repeat scroll 0 0 #EEEEEE; border: 1px solid #DADADA; border-radius: 5px; padding: 8px; display: inline-block; }';
182+
css += paypalButton + ' .error-box { background: #FFFFFF; verflow: scroll; 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; }';
@@ -277,18 +277,8 @@ PAYPAL.apps = PAYPAL.apps || {};
277277
for (key in optionFieldArr) {
278278
item = optionFieldArr[key];
279279
if (optionFieldArr[key].hasOptions) {
280-
281-
//IE8 >= Works fine
282-
if (typeof JSON === "object" && JSON !== null) {
283-
//Create Options Fields
284-
fieldDetails = JSON.parse(item.value);
285-
} else {
286-
//For IE7 display input field
287-
fieldDetails.value = '';
288-
fieldDetails.label = '';
289-
fieldDetails.key = item.key;
290-
}
291-
if (fieldDetails.value instanceof Array && typeof JSON === "object" && JSON !== null) {
280+
fieldDetails = item.value;
281+
if (fieldDetails.options.length > 1) {
292282
input = hidden.cloneNode(true);
293283
//on - Option Name
294284
input.name = 'on' + item.displayOrder;
@@ -298,8 +288,8 @@ PAYPAL.apps = PAYPAL.apps || {};
298288
//os - Option Select
299289
selector.name = 'os' + item.displayOrder;
300290

301-
for (fieldDetail in fieldDetails.value) {
302-
fieldValue = fieldDetails.value[fieldDetail];
291+
for (fieldDetail in fieldDetails.options) {
292+
fieldValue = fieldDetails.options[fieldDetail];
303293
if (typeof fieldValue === 'string') {
304294
optionField = optionElem.cloneNode(true);
305295
optionField.value = fieldValue;
@@ -322,7 +312,7 @@ PAYPAL.apps = PAYPAL.apps || {};
322312
label.appendChild(input);
323313
} else {
324314
label = labelElem.cloneNode(true);
325-
labelText = fieldDetails.label || fieldDetails.key;
315+
labelText = fieldDetails.label || item.key;
326316
label.htmlFor = item.key;
327317
label.appendChild(document.createTextNode(labelText));
328318

@@ -333,7 +323,7 @@ PAYPAL.apps = PAYPAL.apps || {};
333323

334324
input = inputTextElem.cloneNode(true);
335325
input.name = 'os' + item.displayOrder;
336-
input.value = fieldDetails.value;
326+
input.value = fieldDetails.options[0] || '';
337327
input.setAttribute('data-label', fieldDetails.label);
338328

339329
if (fieldDetails.required) {
@@ -396,9 +386,7 @@ PAYPAL.apps = PAYPAL.apps || {};
396386
if (!checkField(field)) {
397387
errors.push(validateFieldHandlers.required.message.replace('%s', fieldLabel));
398388
field.className = field.className + ' field-error';
399-
} else if (!checkPattern(field, patternName))
400-
{
401-
field.className = field.className + ' field-error';
389+
} else if (!checkPattern(field, patternName)) {
402390
errors.push(validateFieldHandlers[patternName].message.replace('%s', fieldLabel));
403391
}
404392
}
@@ -418,8 +406,8 @@ PAYPAL.apps = PAYPAL.apps || {};
418406
function checkField(field) {
419407
if (field.getAttribute('data-required'))
420408
{
421-
field.value = field.value.trim();
422-
return !(!field.value || field.value === '' || field.value === undefined);
409+
field.value = field.value ? field.value.trim() : '';
410+
return !(field.value === '');
423411
}
424412
return true;
425413
}
@@ -433,6 +421,7 @@ PAYPAL.apps = PAYPAL.apps || {};
433421
var validateData = validateFieldHandlers[patternName];
434422
if (patternKey && validateData) {
435423
pattern = new RegExp(validateData.regex);
424+
field.className = field.className + ' field-error';
436425
return pattern.test(field.value);
437426
}
438427
return true;
@@ -442,11 +431,11 @@ PAYPAL.apps = PAYPAL.apps || {};
442431
* Display all error message
443432
*/
444433
function displayErrorMsg(errors) {
445-
var errMsg = '';
434+
var errMsg = '<ul>';
446435
for (var i = 0; i < errors.length; i++) {
447-
errMsg += errors[i] + "<br/>";
436+
errMsg += "<li>" + errors[i] + "</li>";
448437
}
449-
return errMsg;
438+
return errMsg + "</ul>";
450439
}
451440

452441
/**
@@ -496,12 +485,27 @@ PAYPAL.apps = PAYPAL.apps || {};
496485
* @return {Object}
497486
*/
498487
function getDataSet(el) {
499-
var dataset = {}, attrs, attr, matches, len, i;
500-
488+
var dataset = {}, attrs, attr, matches, len, i, j;
489+
var customFieldMap = {}, customSelectMap = {}, optionCount = 0, valueCount = {}, optionArray = [], optionMap = {};
501490
if ((attrs = el.attributes)) {
502491
for (i = 0, len = attrs.length; i < len; i++) {
503492
attr = attrs[i];
504-
if ((matches = attr.name.match(/^data-([a-z0-9_]+)(-options)-([0-9])?/i))) {
493+
if ((matches = attr.name.match(/^data-OPTION([0-9])([a-z]+)?/i))) {
494+
if (matches[2] === 'name') {
495+
optionCount++;
496+
}
497+
dataset["option_" + matches[1]] = {
498+
value: '',
499+
hasOptions: true,
500+
displayOrder: parseInt(matches[1], 10)
501+
};
502+
customFieldMap["value_" + matches[1] + "_" + matches[2]] = attr.value;
503+
} else if ((matches = attr.name.match(/^data-L_OPTION([0-9])([a-z]+)([0-9])?/i))) {
504+
if (matches[2] === 'select') {
505+
valueCount[matches[1]] = (valueCount[matches[1]] ? valueCount[matches[1]] + 1 : 1);
506+
}
507+
customSelectMap["dropdown_" + matches[1] + "_option_" + matches[2] + "_" + matches[3]] = attr.value;
508+
} else if ((matches = attr.name.match(/^data-([a-z0-9_]+)(-options)-([0-9])?/i))) {
505509
dataset[matches[1]] = {
506510
value: attr.value,
507511
hasOptions: !!matches[2],
@@ -515,10 +519,24 @@ PAYPAL.apps = PAYPAL.apps || {};
515519
}
516520
}
517521
}
522+
523+
for (i = 0; i < optionCount; i++) {
524+
optionArray = [];
525+
for (j = 0; j < valueCount[i]; j++) {
526+
optionMap = {};
527+
if (customSelectMap["dropdown_" + i + "_option_price_" + j] === undefined) {
528+
optionArray.push(customSelectMap["dropdown_" + i + "_option_select_" + j]);
529+
} else {
530+
optionMap[customSelectMap["dropdown_" + i + "_option_select_" + j]] = customSelectMap["dropdown_" + i + "_option_select_" + j] + " " + customSelectMap["dropdown_" + i + "_option_price_" + j];
531+
optionArray.push(optionMap);
532+
}
533+
}
534+
dataset['option_' + i].value = { "options" : '', "label" : customFieldMap["value_" + i + "_name"], "required" : customFieldMap["value_" + i + "_required"], "pattern" : customFieldMap["value_" + i + "_pattern"] };
535+
dataset['option_' + i].value.options = optionArray;
536+
}
518537
return dataset;
519538
}
520539

521-
522540
/**
523541
* A storage object to create structured methods around a button's data
524542
*/
@@ -555,7 +573,6 @@ PAYPAL.apps = PAYPAL.apps || {};
555573
data = node && getDataSet(node);
556574
type = data && data.button && data.button.value;
557575
business = node.src.split('?merchant=')[1];
558-
//buttonId = data && data.button_id && data.button_id.value;
559576

560577
if (business) {
561578
ButtonFactory.create(business, data, type, node.parentNode);

0 commit comments

Comments
 (0)