Skip to content

Commit 1958fca

Browse files
mstuartmstuart
committed
Added Subscribe buttons
1 parent 13e1b80 commit 1958fca

5 files changed

Lines changed: 146 additions & 115 deletions

File tree

‎dist/paypal-button-minicart.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/paypal-button.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/paypal-button.js‎

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
if (typeof PAYPAL === 'undefined' || !PAYPAL) {
1+
if (typeof PAYPAL === "undefined" || !PAYPAL) {
22
var PAYPAL = {};
33
}
44

@@ -7,24 +7,25 @@ PAYPAL.apps = PAYPAL.apps || {};
77

88
(function () {
99

10-
'use strict';
10+
"use strict";
1111

1212

1313
var app = {},
14-
paypalURL = 'https://www.paypal.com/cgi-bin/webscr',
15-
qrCodeURL = 'https://www.paypal.com/webapps/ppint/qrcode?data={url}&pattern={pattern}&height={size}',
16-
scriptURL = 'paypal-button.min.js',
17-
bnCode = 'JavaScriptButton_{type}',
14+
paypalURL = "https://www.paypal.com/cgi-bin/webscr",
15+
qrCodeURL = "https://www.paypal.com/webapps/ppint/qrcode?data={url}&pattern={pattern}&height={size}",
16+
scriptURL = "paypal-button.min.js",
17+
bnCode = "JavaScriptButton_{type}",
1818
prettyParams = {
19-
id: 'hosted_button_id',
20-
name: 'item_name',
21-
number: 'item_number',
22-
lang: 'lc'
19+
id: "hosted_button_id",
20+
name: "item_name",
21+
number: "item_number",
22+
lang: "lc"
2323
},
2424
buttonImgs = {
25-
buynow: '//www.paypalobjects.com/{locale}/i/btn/btn_buynow_{size}.gif',
26-
cart: '//www.paypalobjects.com/{locale}/i/btn/btn_cart_{size}.gif',
27-
donate: '//www.paypalobjects.com/{locale}/i/btn/btn_donate_{size}.gif'
25+
buynow: "//www.paypalobjects.com/{locale}/i/btn/btn_buynow_{size}.gif",
26+
cart: "//www.paypalobjects.com/{locale}/i/btn/btn_cart_{size}.gif",
27+
donate: "//www.paypalobjects.com/{locale}/i/btn/btn_donate_{size}.gif",
28+
subscribe: "//www.paypalobjects.com/{locale}/i/btn/btn_subscribe_{size}.gif"
2829
};
2930

3031
if (!PAYPAL.apps.ButtonFactory) {
@@ -34,10 +35,10 @@ PAYPAL.apps = PAYPAL.apps || {};
3435
*/
3536
app.config = {
3637
labels: {
37-
item_name: 'Item',
38-
item_number: 'Number',
39-
amount: 'Amount',
40-
quantity: 'Quantity'
38+
item_name: "Item",
39+
item_number: "Number",
40+
amount: "Amount",
41+
quantity: "Quantity"
4142
}
4243
};
4344

@@ -49,7 +50,8 @@ PAYPAL.apps = PAYPAL.apps || {};
4950
cart: 0,
5051
hosted: 0,
5152
donate: 0,
52-
qr: 0
53+
qr: 0,
54+
subscribe: 0
5355
};
5456

5557
/**
@@ -72,32 +74,35 @@ PAYPAL.apps = PAYPAL.apps || {};
7274
}
7375

7476
// Defaults
75-
type = type || 'buynow';
77+
type = type || "buynow";
7678

7779
// Hosted buttons
7880
if (data.items.hosted_button_id) {
79-
type = 'hosted';
80-
data.add('cmd', '_s-xclick');
81+
type = "hosted";
82+
data.add("cmd", "_s-xclick");
8183
// Cart buttons
82-
} else if (type === 'cart') {
83-
data.add('cmd', '_cart');
84-
data.add('add', true);
84+
} else if (type === "cart") {
85+
data.add("cmd", "_cart");
86+
data.add("add", true);
8587
// Donation buttons
86-
} else if (type === 'donate') {
87-
data.add('cmd', '_donations');
88+
} else if (type === "donate") {
89+
data.add("cmd", "_donations");
90+
// Subscribe buttons
91+
} else if (type === "subscribe") {
92+
data.add("cmd", "_xclick-subscriptions");
8893
// Buy Now buttons
8994
} else {
90-
data.add('cmd', '_xclick');
95+
data.add("cmd", "_xclick");
9196
}
9297

9398
// Add common data
94-
data.add('business', business);
95-
data.add('bn', bnCode.replace(/\{type\}/, type));
99+
data.add("business", business);
100+
data.add("bn", bnCode.replace(/\{type\}/, type));
96101

97102
// Build the UI components
98-
if (type === 'qr') {
103+
if (type === "qr") {
99104
button = buildQR(data, data.items.size);
100-
data.remove('size');
105+
data.remove("size");
101106
} else {
102107
button = buildForm(data, type);
103108
}
@@ -126,36 +131,36 @@ PAYPAL.apps = PAYPAL.apps || {};
126131
* @return {HTMLElement}
127132
*/
128133
function buildForm(data, type) {
129-
var form = document.createElement('form'),
130-
btn = document.createElement('input'),
131-
hidden = document.createElement('input'),
134+
var form = document.createElement("form"),
135+
btn = document.createElement("input"),
136+
hidden = document.createElement("input"),
132137
items = data.items,
133138
item, child, label, input, key, size, locale;
134139

135-
btn.type = 'image';
136-
hidden.type = 'hidden';
137-
form.method = 'post';
140+
btn.type = "image";
141+
hidden.type = "hidden";
142+
form.method = "post";
138143
form.action = paypalURL;
139-
form.className = 'paypal-button';
140-
form.target = '_top';
144+
form.className = "paypal-button";
145+
form.target = "_top";
141146

142147
for (key in items) {
143148
item = items[key];
144149

145150
if (item.isEditable) {
146-
input = document.createElement('input');
147-
input.type = 'text';
148-
input.className = 'paypal-input';
151+
input = document.createElement("input");
152+
input.type = "text";
153+
input.className = "paypal-input";
149154
input.name = item.key;
150155
input.value = item.value;
151156

152-
label = document.createElement('label');
153-
label.className = 'paypal-label';
154-
label.appendChild(document.createTextNode(app.config.labels[item.key] + ' ' || ''));
157+
label = document.createElement("label");
158+
label.className = "paypal-label";
159+
label.appendChild(document.createTextNode(app.config.labels[item.key] + " " || ""));
155160
label.appendChild(input);
156161

157-
child = document.createElement('p');
158-
child.className = 'paypal-group';
162+
child = document.createElement("p");
163+
child.className = "paypal-group";
159164
child.appendChild(label);
160165
} else {
161166
input = child = hidden.cloneNode(true);
@@ -173,7 +178,7 @@ PAYPAL.apps = PAYPAL.apps || {};
173178
btn.src = getButtonImg(type, size, locale);
174179

175180
// If the Mini Cart is present then register the form
176-
if (PAYPAL.apps.MiniCart && data.items.cmd.value === '_cart') {
181+
if (PAYPAL.apps.MiniCart && data.items.cmd.value === "_cart") {
177182
var MiniCart = PAYPAL.apps.MiniCart;
178183

179184
if (!MiniCart.UI.itemList) {
@@ -196,8 +201,8 @@ PAYPAL.apps = PAYPAL.apps || {};
196201
* @return {HTMLElement}
197202
*/
198203
function buildQR(data, size, locale) {
199-
var img = document.createElement('img'),
200-
url = paypalURL + '?',
204+
var img = document.createElement("img"),
205+
url = paypalURL + "?",
201206
pattern = 13,
202207
items = data.items,
203208
item, key;
@@ -207,11 +212,11 @@ PAYPAL.apps = PAYPAL.apps || {};
207212

208213
for (key in items) {
209214
item = items[key];
210-
url += item.key + '=' + encodeURIComponent(item.value) + '&';
215+
url += item.key + "=" + encodeURIComponent(item.value) + "&";
211216
}
212217

213218
url = encodeURIComponent(url);
214-
img.src = qrCodeURL.replace('{url}', url).replace('{pattern}', pattern).replace('{size}', size);
219+
img.src = qrCodeURL.replace("{url}", url).replace("{pattern}", pattern).replace("{size}", size);
215220

216221
return img;
217222
}
@@ -229,8 +234,8 @@ PAYPAL.apps = PAYPAL.apps || {};
229234
var img = buttonImgs[type] || buttonImgs.buynow;
230235

231236
// Image defaults
232-
locale = locale || 'en_US';
233-
size = (size === 'small') ? 'SM' : 'LG';
237+
locale = locale || "en_US";
238+
size = (size === "small") ? "SM" : "LG";
234239

235240
return img.replace(/\{locale\}/, locale).replace(/\{size\}/, size);
236241
}
@@ -249,7 +254,7 @@ PAYPAL.apps = PAYPAL.apps || {};
249254
for (i = 0, len = attrs.length; i < len; i++) {
250255
attr = attrs[i];
251256

252-
if ((matches = /^data-([a-z]+)(-editable)?/i.exec(attr.name))) {
257+
if ((matches = /^data-([a-z0-9]+)(-editable)?/i.exec(attr.name))) {
253258
dataset[matches[1]] = {
254259
value: attr.value,
255260
isEditable: !!matches[2]
@@ -283,9 +288,9 @@ PAYPAL.apps = PAYPAL.apps || {};
283288

284289

285290
// Init the buttons
286-
if (typeof document !== 'undefined') {
291+
if (typeof document !== "undefined") {
287292
var ButtonFactory = PAYPAL.apps.ButtonFactory,
288-
nodes = document.getElementsByTagName('script'),
293+
nodes = document.getElementsByTagName("script"),
289294
node, data, type, business, i, len;
290295

291296
for (i = 0, len = nodes.length; i < len; i++) {
@@ -295,7 +300,7 @@ PAYPAL.apps = PAYPAL.apps || {};
295300

296301
data = node && getDataSet(node);
297302
type = data && data.button && data.button.value;
298-
business = node.src.split('?merchant=')[1];
303+
business = node.src.split("?merchant=")[1];
299304

300305
if (business) {
301306
ButtonFactory.create(business, data, type, node.parentNode);
@@ -311,6 +316,6 @@ PAYPAL.apps = PAYPAL.apps || {};
311316

312317

313318
// Export for CommonJS environments
314-
if (typeof module === 'object' && typeof module.exports === 'object') {
319+
if (typeof module === "object" && typeof module.exports === "object") {
315320
module.exports = PAYPAL;
316321
}

‎test/index.html‎

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,29 @@ <h2>Donate (Large)</h2>
108108
></script>
109109
</div>
110110

111+
<div id="subscribe-sm">
112+
<h2>Subscribe (Small)</h2>
113+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
114+
data-button="subscribe"
115+
data-name="Subscribe!"
116+
data-amount="1.00"
117+
data-size="small"
118+
data-a3="1.00"
119+
data-p3="1"
120+
data-t3="M"
121+
></script>
122+
</div>
123+
124+
<div id="subscribe-lg">
125+
<h2>Subscribe (Large)</h2>
126+
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
127+
data-button="subscribe"
128+
data-name="Subscribe!"
129+
data-amount="1.00"
130+
data-size="large"
131+
></script>
132+
</div>
133+
111134
<div id="hosted-sm">
112135
<h2>Hosted (Small)</h2>
113136
<script src="../src/paypal-button.js?merchant=6XF3MPZBZV6HU"
@@ -136,4 +159,4 @@ <h2>QR Code</h2>
136159
</div>
137160

138161
</body>
139-
</html>
162+
</html>

0 commit comments

Comments
 (0)