Skip to content

Commit ebaab7f

Browse files
author
Jeff Harrell
committed
Cleaning up the initial JS
1 parent 7f007bb commit ebaab7f

3 files changed

Lines changed: 97 additions & 67 deletions

File tree

‎README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ You can pass additional data values to the button as well. The following are cur
4040
* `data-shipping2` The cost of shipping each additional unit of this item
4141
* `data-tax` Transaction-based tax override variable
4242

43-
**Discounts**
43+
**Discounts**
4444
* `data-discount_amount` Discount amount associated with an item
4545
* `data-discount_amount2` Discount amount associated with each additional quantity of the item
4646
* `data-discount_rate` Discount rate (percentage) for an item

‎index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ <h3 id="buy-now">Buy Now</h3>
135135
&gt;&lt;/script&gt;</code></pre>
136136

137137
<script src="paypal.js?merchant=6XF3MPZBZV6HU"
138-
data-type="buy"
138+
data-button="buy"
139139
data-item_name="Buy me now!"
140140
data-amount="1.00"
141141
></script>
@@ -152,8 +152,8 @@ <h3 id="add-to-cart">Add To Cart</h3>
152152
data-amount="1.00"
153153
&gt;&lt;/script&gt;</code></pre>
154154

155-
<script src="paypal.js?merchant=6XF3MPZBZV6HU"
156-
data-type="cart"
155+
<script script src="paypal.js?merchant=6XF3MPZBZV6HU"
156+
data-button="cart"
157157
data-item_name="Add to cart!"
158158
data-amount="1.00"
159159
></script>

‎paypal.js‎

Lines changed: 93 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -10,95 +10,125 @@ PAYPAL.apps = PAYPAL.apps || {};
1010
'use strict';
1111

1212

13-
function renderForm(el, data) {
14-
var type = data.type,
15-
isCart = (type === 'cart'),
16-
form = document.createElement('form'),
17-
input, btn, key;
13+
var PAYPAL_URL = 'https://www.paypal.com/cgi-bin/webscr',
14+
CART_BTN_URL = '//www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif',
15+
BUY_BTN_URL = '//www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif',
16+
MINICART_URL = 'http://www.minicartjs.com/build/minicart.js'
17+
18+
19+
/**
20+
* Utility function to load another script
21+
*
22+
* @param url {String} The URL of the script to load
23+
* @param callback {Function} The function to execute afterwards
24+
* @param identified (String) The signature of the script (used to prevent dual loading)
25+
*/
26+
function loadScript(url, callback, identifier) {
27+
if (!identifier || !window[identifier]) {
28+
var script = document.createElement('script');
29+
script.async = true;
30+
script.src = url;
31+
script.onload = callback;
1832

19-
form.method = 'post';
20-
form.action = 'https://www.paypal.com/cgi-bin/webscr';
33+
document.body.appendChild(script);
34+
}
35+
}
2136

22-
btn = document.createElement('input');
23-
btn.type = 'image';
2437

25-
data.business = el.src.split('?merchant=')[1];
38+
PAYPAL.apps.DynamicButton = (function () {
39+
var app = {};
2640

27-
if (isCart) {
28-
data.cmd = '_cart';
29-
data.add = true;
30-
data.bn = 'WPS_CART_DYNAMIC_BTN';
41+
/**
42+
* A count of each type of button on the page
43+
*/
44+
app.buttons = {
45+
buy: 0,
46+
cart: 0,
47+
api: 0
48+
};
3149

32-
btn.src = '//www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif';
33-
} else {
34-
data.cmd = '_xclick';
35-
data.bn = 'WPS_BUY_NOW_DYNAMIC_BTN';
50+
/**
51+
* Renders a button in place of the given element
52+
*
53+
* @param el {HTMLElement} The element to replace
54+
* @param type (String) The type of the button to render
55+
* @param data {Object} An object of key/value data to set as button params
56+
*/
57+
app.renderButton = function (el, type, data) {
58+
var merchantId = el.src.split('?merchant=')[1],
59+
form = document.createElement('form'),
60+
btn = document.createElement('input'),
61+
hidden = document.createElement('input'),
62+
btn, hidden, input, key;
63+
64+
form.method = 'post';
65+
form.action = PAYPAL_URL;
66+
form.appendChild(btn);
67+
hidden.type = 'hidden';
68+
btn.type = 'image';
69+
70+
// Cart buttons
71+
if (type === 'cart') {
72+
data.cmd = '_cart';
73+
data.add = true;
74+
btn.src = CART_BTN_URL;
75+
// Hosted buttons
76+
} else if (data.hosted_button_id) {
77+
data.cmd = '_s-xclick';
78+
btn.src = BUY_BTN_URL;
79+
// Plain text buttons
80+
} else {
81+
data.cmd = '_xclick';
82+
btn.src = BUY_BTN_URL;
83+
}
3684

37-
btn.src = '//www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif';
38-
}
85+
if (merchantId) {
86+
data.business = merchantId
87+
}
3988

40-
for (key in data) {
41-
input = document.createElement('input');
42-
input.type = 'hidden';
43-
input.name = key;
44-
input.value = data[key];
89+
for (key in data) {
90+
input = hidden.cloneNode(true);
91+
input.name = key;
92+
input.value = data[key];
4593

46-
form.appendChild(input);
47-
}
94+
form.appendChild(input);
95+
}
4896

49-
form.appendChild(btn);
50-
el.parentNode.replaceChild(form, el);
51-
}
97+
el.parentNode.replaceChild(form, el);
5298

99+
// Register it
100+
this.buttons[type] += 1;
53101

54-
function loadMiniCart() {
55-
if (!PAYPAL.apps.MiniCart) {
56-
var script = document.createElement('script');
57-
script.src = 'http://www.minicartjs.com/build/minicart.js';
58-
script.onload = function () {
59-
if (PAYPAL.apps.MiniCart) {
102+
// Load additional resources
103+
if (type === 'cart') {
104+
loadScript(MINICART_URL, function () {
60105
PAYPAL.apps.MiniCart.render();
61-
}
62-
};
63-
64-
document.body.appendChild(script);
65-
}
66-
}
67-
68-
69-
PAYPAL.apps.DynamicButton = (function () {
70-
var app = {};
106+
}, 'PAYPAL.apps.MiniCart');
107+
}
108+
};
71109

72-
app.render = function () {
110+
/**
111+
* Initializes the script and renders all buttons found in the DOM
112+
*/
113+
app.init = function () {
73114
var nodes = document.getElementsByTagName('script'),
74-
hasCart = false,
75-
node, data, type, i, len;
115+
node, data, button, i, len;
76116

77117
for (i = 0, len = nodes.length; i < len; i++) {
78118
node = nodes[i];
79119
data = node.dataset;
80-
type = data.type;
81-
82-
if (type) {
83-
renderForm(node, data);
84-
}
85120

86-
if (type === 'cart') {
87-
hasCart = true;
121+
if ((button = data.button)) {
122+
this.renderButton(node, button, data);
88123
}
89124
}
90-
91-
if (hasCart) {
92-
loadMiniCart();
93-
}
94125
};
95126

96127
return app;
97128
}());
98129

99130

100-
}());
101-
131+
PAYPAL.apps.DynamicButton.init();
102132

103-
PAYPAL.apps.DynamicButton.render();
133+
}());
104134

0 commit comments

Comments
 (0)