Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 704a3ec

Browse files
author
Jeff Harrell
committed
Much cleaner support for options
1 parent 277e633 commit 704a3ec

File tree

5 files changed

+247
-340
lines changed

5 files changed

+247
-340
lines changed

‎README.md‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,8 +110,17 @@ All of PayPal's [HTML button variables](https://developer.paypal.com/webapps/dev
110110
* `data-type` The type of button to render. `button` for a plain button (default), `form` to create a button with a PayPal Payments Standard HTML form, or `qr` to create a PayPal Payments Standard compatible QR code.
111111

112112

113-
### Editable fields
114-
Creating editable fields is easy! Just add `-editable` to the name of your variable, e.g. `data-quantity-editable`, and an input field will magically appear for your users.
113+
### Editable inputs
114+
Creating editable inputs is easy. Just add `-editable` to the name of your variable, e.g. `data-quantity-editable`, and an input field will magically appear for your users.
115+
116+
117+
### Options fields
118+
Allow the user to choose from multiple options with the following sytax:
119+
120+
```
121+
data-option0="Color=Blue:8.00,Green:12.00,Red:10.00"
122+
data-option1="Size=Small,Medium,Large"
123+
```
115124

116125

117126
### Callback notification

‎dist/all.js‎

Lines changed: 38 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1692,7 +1692,7 @@ module.exports = {
16921692

16931693
DEFAULT_ENV: 'www',
16941694

1695-
TEMPLATES: {"button":"<button class=\"paypal-button <%= style %> <%= size %>\" type=\"submit\">\t<span class=\"paypal-button-logo\">\t\t<img src=\"<%= logo %>\" />\t</span><span class=\"paypal-button-content\"><%- label %></span></button>","form":"<form method=\"post\" action=\"<%= url %>\" target=\"_top\">\t<% for (var key in data) { %>\t\t<% if (data[key].isEditable) { %>\t\t\t<p class=\"paypal-group\">\t\t\t\t<label for=\"<%= key %>\" class=\"paypal-label\"><%= content[data[key].key] || data[key].key %></label>\t\t\t\t<input type=\"text\" id=\"<%= key %>\" name=\"<%= key %>\" value=\"<%= data[key].value %>\" class=\"paypal-input\" />\t\t\t</p>\t\t<% } else { %>\t\t\t<input type=\"hidden\" name=\"<%= key %>\" value=\"<%= data[key].value %>\" />\t\t<% } %>\t<% } %>\t<%- button %></form>","qr":"<img src=\"<%= url %>\" alt=\"PayPal QR code\" />"},
1695+
TEMPLATES: {"button":"<button class=\"paypal-button <%= style %> <%= size %>\" type=\"submit\">\t<span class=\"paypal-button-logo\">\t\t<img src=\"<%= logo %>\" />\t</span><span class=\"paypal-button-content\"><%- label %></span></button>","form":"<form method=\"post\" action=\"<%= url %>\" target=\"_top\">\t<% var optionIdx = 0; %>\t<% for (var key in data) { %>\t\t<% \t\t\tvar item = data[key];\t\t\tvar renderable = (item.editable || item.value instanceof Array);\t\t%>\t\t<% if (renderable) { %>\t\t\t\t\t<p class=\"paypal-group\">\t\t\t\t<label class=\"paypal-label\">\t\t\t\t\t<%= item.label || content[key] || key %>\t\t\t\t\t\t\t\t\t<% if (item.value instanceof Array) { %>\t\t\t\t\t\t<select class=\"paypal-select\" name=\"os<%= optionIdx %>\">\t\t\t\t\t\t\t<% for (var i = 0, len = item.value.length; i < len; i++) { %>\t\t\t\t\t\t\t\t<% var option = item.value[i].split(':') %>\t\t\t\t\t\t\t\t<option value=\"<%= option[0] %>\"><%= option.join(' ') %></option>\t\t\t\t\t\t\t<% } %>\t\t\t\t\t\t</select>\t\t\t\t\t\t<input type=\"hidden\" name=\"on<%= optionIdx %>\" value=\"<%= item.label %>\">\t\t\t\t\t\t<% ++optionIdx; %>\t\t\t\t\t<% } else { %>\t\t\t\t\t\t\t\t\t\t\t<input type=\"text\" id=\"<%= key %>\" name=\"<%= key %>\" value=\"<%= item.value %>\" class=\"paypal-input\" />\t\t\t\t\t\t\t\t\t\t<% } %>\t\t\t\t</label>\t\t\t</p>\t\t<% } else { %>\t\t\t<input type=\"hidden\" name=\"<%= key %>\" value=\"<%= item.value %>\" />\t\t<% } %>\t<% } %>\t<%- button %></form>","qr":"<img src=\"<%= url %>\" alt=\"PayPal QR code\" />"},
16961696

16971697
STRINGS: {"en_AU":{"buynow":"Buy with {wordmark}","cart":"Add to Cart","donate":"Donate","subscribe":"Subscribe","paynow":"Pay Now","item_name":"Item","number":"Number","amount":"Amount","quantity":"Quantity"},"fr_CA":{"buynow":"Acheter","cart":"Ajouter au panier","donate":"Faire un don","subscribe":"Souscrire","paynow":"Payer maintenant","item_name":"Objet","number":"Numéro","amount":"Montant","quantity":"Quantité"},"zh_CH":{"buynow":"立即购买","cart":"添加到购物车","donate":"捐赠","subscribe":"租用","paynow":"现在支付","item_name":"物品","number":"编号","amount":"金额","quantity":"数量"},"de_DE":{"buynow":"Jetzt kaufen","cart":"In den Warenkorb","donate":"Spenden","subscribe":"Abonnieren","paynow":"Jetzt bezahlen","item_name":"Artikel","number":"Nummer","amount":"Betrag","quantity":"Menge"},"es_ES":{"buynow":"Comprar ahora","cart":"Añadir al carro","donate":"Donar","subscribe":"Suscribirse","paynow":"Pague ahora","item_name":"Artículo","number":"Número","amount":"Importe","quantity":"Cantidad"},"fr_FR":{"buynow":"Acheter","cart":"Ajouter au panier","donate":"Faire un don","subscribe":"Souscrire","paynow":"Payer maintenant","item_name":"Objet","number":"Numéro","amount":"Montant","quantity":"Quantité"},"en_GB":{"buynow":"Buy with {wordmark}","cart":"Add to Cart","donate":"Donate","subscribe":"Subscribe","paynow":"Pay Now","item_name":"Item","number":"Number","amount":"Amount","quantity":"Quantity"},"zh_HK":{"buynow":"立即買","cart":"加入購物車","donate":"捐款","subscribe":"訂用","paynow":"现在支付","item_name":"項目","number":"號碼","amount":"金額","quantity":"數量"},"id_ID":{"buynow":"Beli Sekarang","cart":"Tambah ke Keranjang","donate":"Donasikan","subscribe":"Berlangganan","paynow":"Bayar Sekarang","item_name":"Barang","number":"Nomor","amount":"Harga","quantity":"Kuantitas"},"he_IL":{"buynow":"וישכע הנק","cart":"תוינקה לסל ףסוה","donate":"םורת","subscribe":"יונמכ ףרטצה","paynow":"כשיו שלם ע","item_name":"טירפ","number":"רפסמ","amount":"םוכס","quantity":"מותכ"},"it_IT":{"buynow":"Paga adesso","cart":"Aggiungi al carrello","donate":"Donazione","subscribe":"Iscriviti","paynow":"Paga Ora","item_name":"Oggetto","number":"Numero","amount":"Importo","quantity":"Quantità"},"ja_JP":{"buynow":"今すぐ購入","cart":"カートに追加","donate":"寄付","subscribe":"購読","paynow":"今すぐ支払う","item_name":"商品","number":"番号","amount":"価格","quantity":"数量"},"nl_NL":{"buynow":"Nu kopen","cart":"Aan winkelwagentje toevoegen","donate":"Doneren","subscribe":"Abonneren","paynow":"Nu betalen","item_name":"Item","number":"Nummer","amount":"Bedrag","quantity":"Hoeveelheid"},"no_NO":{"buynow":"Kjøp nå","cart":"Legg til i kurv","donate":"Doner","subscribe":"Abonner","paynow":"Betal nå","item_name":"Vare","number":"Nummer","amount":"Beløp","quantity":"Antall"},"pl_PL":{"buynow":"Kup teraz","cart":"Dodaj do koszyka","donate":"Przekaż darowiznę","subscribe":"Subskrybuj","paynow":"Zapłać teraz","item_name":"Przedmiot","number":"Numer","amount":"Kwota","quantity":"Ilość"},"br_PT":{"buynow":"Comprar agora","cart":"Adicionar ao carrinho","donate":"Doar","subscribe":"Assinar","paynow":"Pagar agora","item_name":"Produto","number":"Número","amount":"Valor","quantity":"Quantidade"},"ru_RU":{"buynow":"Купить сейчас","cart":"Добавить в корзину","donate":"Пожертвовать","subscribe":"Подписаться","paynow":"Оплатить сейчас","item_name":"Товар","number":"Номер","amount":"Сумма","quantity":"Количество"},"sv_SE":{"buynow":"Köp nu","cart":"Lägg till i kundvagn","donate":"Donera","subscribe":"Abonnera","paynow":"Betal nu","item_name":"Objekt","number":"Nummer","amount":"Belopp","quantity":"Antal"},"th_TH":{"buynow":"ซื้อทันที","cart":"เพิ่มลงตะกร้า","donate":"บริจาค","subscribe":"บอกรับสมาชิก","paynow":"จ่ายตอนนี้","item_name":"ชื่อสินค้า","number":"รหัสสินค้า","amount":"ราคา","quantity":"จำนวน"},"tr_TR":{"buynow":"Hemen Alın","cart":"Sepete Ekleyin","donate":"Bağış Yapın","subscribe":"Abone Olun","paynow":"Şimdi öde","item_name":"Ürün","number":"Numara","amount":"Tutar","quantity":"Miktar"},"zh_TW":{"buynow":"立即購","cart":"加到購物車","donate":"捐款","subscribe":"訂閱","paynow":"现在支付","item_name":"商品","number":"商品編號","amount":"單價","quantity":"數量"},"en_US":{"buynow":"Buy with {wordmark}","cart":"Add to Cart","donate":"Donate with {wordmark}","subscribe":"Subscribe with {wordmark}","paynow":"Pay now with {wordmark}","item_name":"Item","number":"Number","amount":"Amount","quantity":"Quantity"}},
16981698

@@ -2025,31 +2025,28 @@ function DataStore() {
20252025

20262026

20272027
DataStore.prototype.add = function addData(key, val) {
2028-
// Remap nice values
2029-
key = constants.PRETTY_PARAMS[key] || key;
2030-
2031-
// Convenience to let you use add(key, 'some value')
2032-
if (typeof val === 'string') {
2033-
val = {
2034-
key: key,
2035-
value: val
2036-
};
2037-
}
2028+
// Remap nice values
2029+
key = constants.PRETTY_PARAMS[key] || key;
2030+
2031+
// Wrap strings in the value object
2032+
if (typeof val === 'string') {
2033+
val = {
2034+
value: val
2035+
};
2036+
}
20382037

20392038
this.items[key] = {
2040-
key: key,
2041-
value: val.value,
2042-
isEditable: !!val.isEditable,
2043-
hasOptions : !!val.hasOptions,
2044-
displayOrder : !!val.displayOrder
2039+
label: val.label || '',
2040+
value: val.value || '',
2041+
editable: !!val.editable,
20452042
};
20462043
};
20472044

20482045

20492046
DataStore.prototype.get = function getData(key) {
2050-
var item = this.items[key];
2047+
var item = this.items[key];
20512048

2052-
return item && item.value;
2049+
return item && item.value;
20532050
};
20542051

20552052

@@ -2059,93 +2056,43 @@ DataStore.prototype.remove = function removeData(key) {
20592056

20602057

20612058
DataStore.prototype.pluck = function pluckData(key) {
2062-
var val = this.get(key);
2063-
this.remove(key);
2059+
var val = this.get(key);
2060+
this.remove(key);
20642061

2065-
return val;
2062+
return val;
20662063
};
20672064

20682065

20692066
DataStore.prototype.parse = function parseData(el) {
2070-
var attrs, attr, matches, len, i;
2067+
var attrs, attr, matches, key, label, value, editable, len, i;
20712068

20722069
if ((attrs = el.attributes)) {
2070+
20732071
for (i = 0, len = attrs.length; i < len; i++) {
20742072
attr = attrs[i];
20752073

2076-
// var customFields = [];
2077-
//if ((matches = attr.name.match(/^data-option([0-9])([a-z]+)([0-9])?/i))) {
2078-
// customFields.push({ 'name' : 'option.' + matches[1] + '.' + matches[2] + (matches[3] ? '.' + matches[3] : ''), value: attr.value });
2079-
//} else
20802074
if ((matches = attr.name.match(/^data-([a-z0-9_]+)(-editable)?/i))) {
2081-
this.add(matches[1], {
2082-
value: attr.value,
2083-
isEditable: !!matches[2]
2084-
});
2085-
}
2086-
}
2087-
}
2088-
2089-
//processCustomFieldValues(customFields, dataset);
2090-
2091-
return this;
2092-
};
2093-
2094-
2095-
2096-
// function processCustomFieldValues(customFields, dataset) {
2097-
// var result = {}, keyValuePairs, name, nameParts, accessor, cursor;
2098-
2099-
// for (i = 0; i < customFields.length; i++) {
2100-
// keyValuePairs = customFields[i];
2101-
// name = keyValuePairs.name;
2102-
// nameParts = name.split('.');
2103-
// accessor = nameParts.shift();
2104-
// cursor = result;
2105-
// while (accessor) {
2106-
// if (!cursor[accessor]) {
2107-
// cursor[accessor] = {};
2108-
// }
2109-
// if (!nameParts.length) {
2110-
// cursor[accessor] = keyValuePairs.value;
2111-
// }
2112-
// cursor = cursor[accessor];
2113-
// accessor = nameParts.shift();
2114-
// }
2115-
// }
2116-
2117-
// //Store custom fields in dataset
2118-
// var key, i, j, field, selectMap = {}, priceMap = {}, optionArray = [], optionMap = {}, owns = Object.prototype.hasOwnProperty;
2119-
2120-
// for (key in result) {
2121-
// if (owns.call(result, key)) {
2122-
// field = result[key];
2123-
// for (i in field) {
2124-
// dataset['option_' + i] = {
2125-
// value: { 'options' : '', 'label' : field[i].name},
2126-
// hasOptions: true,
2127-
// displayOrder: parseInt(i, 10)
2128-
// };
2129-
// selectMap = field[i].select;
2130-
// priceMap = field[i].price;
2131-
// optionArray = [];
2132-
// for (j in selectMap) {
2133-
// optionMap = {};
2134-
// if (priceMap) {
2135-
// optionMap[selectMap[j]] = selectMap[j] + ' ' + priceMap[j];
2136-
// optionArray.push(optionMap);
2137-
// } else {
2138-
// optionArray.push(selectMap[j]);
2139-
// }
2140-
// }
2141-
// dataset['option_' + i].value.options = optionArray;
2142-
// }
2143-
// }
2144-
// }
2145-
// }
2075+
key = matches[1];
2076+
editable = !!matches[2];
2077+
value = attr.value;
2078+
2079+
if (key.indexOf('option') === 0) {
2080+
value = value.split('=');
2081+
label = value[0];
2082+
value = value[1].split(',');
2083+
}
21462084

2085+
this.add(key, {
2086+
label: label,
2087+
value: value,
2088+
editable: editable
2089+
});
2090+
}
21472091

21482092

2093+
}
2094+
}
2095+
};
21492096

21502097

21512098

‎src/theme/form.html‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,43 @@
11
<form method="post" action="<%= url %>" target="_top">
2+
<% var optionIdx = 0; %>
3+
24
<% for (var key in data) { %>
3-
<% if (data[key].isEditable) { %>
5+
<%
6+
var item = data[key];
7+
var renderable = (item.editable || item.value instanceof Array);
8+
%>
9+
10+
<% if (renderable) { %>
11+
412
<p class="paypal-group">
5-
<label for="<%= key %>" class="paypal-label"><%= content[data[key].key] || data[key].key %></label>
6-
<input type="text" id="<%= key %>" name="<%= key %>" value="<%= data[key].value %>" class="paypal-input" />
13+
<label class="paypal-label">
14+
<%= item.label || content[key] || key %>
15+
16+
<% if (item.value instanceof Array) { %>
17+
18+
<select class="paypal-select" name="os<%= optionIdx %>">
19+
<% for (var i = 0, len = item.value.length; i < len; i++) { %>
20+
<% var option = item.value[i].split(':') %>
21+
<option value="<%= option[0] %>"><%= option.join(' ') %></option>
22+
<% } %>
23+
</select>
24+
<input type="hidden" name="on<%= optionIdx %>" value="<%= item.label %>">
25+
<% ++optionIdx; %>
26+
27+
<% } else { %>
28+
29+
<input type="text" id="<%= key %>" name="<%= key %>" value="<%= item.value %>" class="paypal-input" />
30+
31+
<% } %>
32+
</label>
733
</p>
34+
835
<% } else { %>
9-
<input type="hidden" name="<%= key %>" value="<%= data[key].value %>" />
36+
37+
<input type="hidden" name="<%= key %>" value="<%= item.value %>" />
38+
1039
<% } %>
1140
<% } %>
1241

1342
<%- button %>
14-
</form>
15-
16-
17-
18-
<p class="paypal-group">
19-
<label class="paypal-label" for="option_1">
20-
Size
21-
<select class="paypal-select" name="os1">
22-
<option value="Small">Small</option>
23-
<option value="Medium">Medium</option>
24-
<option value="Large">Large</option>
25-
</select>
26-
<input type="hidden" name="on1" value="Size">
27-
</label>
28-
</p>
43+
</form>

0 commit comments

Comments
 (0)