Skip to content

Commit 1c9894e

Browse files
author
Jeff Harrell
committed
Creating a prettyNames mapping to allow for nice looking names on common values
1 parent 24c23a2 commit 1c9894e

3 files changed

Lines changed: 105 additions & 106 deletions

File tree

‎README.md‎

Lines changed: 7 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ Buy Now buttons are for single item purchases.
99
```html
1010
<script src="paypal-button.js?merchant=MERCHANT_ID"
1111
data-button="buynow"
12-
data-item_name="Buy me now!"
12+
data-item_name="Buy now!"
1313
data-amount="1.00"
1414
></script>
1515
```
@@ -26,23 +26,15 @@ Add To Cart buttons lets users add multiple items to their PayPal cart.
2626
></script>
2727
```
2828

29-
## Button parameters
30-
You can pass additional data values to the button as well. The following are currently supported:
29+
## Button variables
30+
All of PayPal's [HTML button variables](https://cms.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=developer/e_howto_html_Appx_websitestandard_htmlvariables) are supported by prefixing their name with "data-". Here are the most commonly used:
3131

32-
**Item details**
33-
* `data-item_name` Description of the item
34-
* `data-item_number` The number of the item
35-
* `data-quantity` Number of items
32+
* `data-name` Description of the item
33+
* `data-number` The number of the item
34+
* `data-quantity` Quantity of items to purchase
3635
* `data-shipping` The cost of shipping this item
37-
* `data-shipping2` The cost of shipping each additional unit of this item
3836
* `data-tax` Transaction-based tax override variable
39-
40-
**Discounts**
41-
* `data-discount_amount` Discount amount associated with an item
42-
* `data-discount_amount2` Discount amount associated with each additional quantity of the item
43-
* `data-discount_rate` Discount rate (percentage) for an item
44-
* `data-discount_rate2` Discount rate (percentage) for each additional quantity of the item
45-
* `data-discount_num` Number of additional quantities of the item to which the discount applies
37+
* `data-id` The hosted ID of the button (if applicable)
4638

4739

4840
## Merchant ID

‎index.html‎

Lines changed: 8 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -130,13 +130,13 @@ <h3 id="buy-now">Buy Now</h3>
130130

131131
<pre><code>&lt;script src="paypal-button.js?merchant=6XF3MPZBZV6HU"
132132
data-button="buynow"
133-
data-item-name="Buy me now!"
133+
data-name="Buy me now!"
134134
data-amount="1.00"
135135
&gt;&lt;/script&gt;</code></pre>
136136

137137
<script src="paypal-button.js?merchant=6XF3MPZBZV6HU"
138138
data-button="buynow"
139-
data-item-name="Buy me now!"
139+
data-name="Buy me now!"
140140
data-amount="1.00"
141141
></script>
142142

@@ -147,12 +147,12 @@ <h3 id="hosted-buttons">Hosted Buttons</h3>
147147

148148
<pre><code>&lt;script src="paypal-button.js?merchant=6XF3MPZBZV6HU"
149149
data-button="cart"
150-
data-hosted_button_id="8R63A645E2QB6"
150+
data-id="8R63A645E2QB6"
151151
&gt;&lt;/script&gt;</code></pre>
152152

153153
<script src="paypal-button.js?merchant=6XF3MPZBZV6HU"
154154
data-button="cart"
155-
data-hosted-button-id="8R63A645E2QB6"
155+
data-id="8R63A645E2QB6"
156156
></script>
157157

158158

@@ -163,13 +163,13 @@ <h3 id="add-to-cart">Add To Cart</h3>
163163

164164
<pre><code>&lt;script src="paypal-button.js?merchant=6XF3MPZBZV6HU"
165165
data-button="cart"
166-
data-item-name="Add to cart!"
166+
data-name="Add to cart!"
167167
data-amount="1.00"
168168
&gt;&lt;/script&gt;</code></pre>
169169

170170
<script script src="paypal-button.js?merchant=6XF3MPZBZV6HU"
171171
data-button="cart"
172-
data-item-name="Add to cart!"
172+
data-name="Add to cart!"
173173
data-amount="1.00"
174174
></script>
175175

@@ -180,23 +180,13 @@ <h2 id="button-parameters">Button parameters</h2>
180180
<p><strong>Item details</strong></p>
181181

182182
<ul>
183-
<li><code>data-item_name</code> Description of the item</li>
184-
<li><code>data-item_number</code> The number of the item</li>
183+
<li><code>data-name</code> Description of the item</li>
184+
<li><code>data-number</code> The number of the item</li>
185185
<li><code>data-quantity</code> Number of items</li>
186186
<li><code>data-shipping</code> The cost of shipping this item</li>
187-
<li><code>data-shipping2</code> The cost of shipping each additional unit of this item</li>
188187
<li><code>data-tax</code> Transaction-based tax override variable</li>
189188
</ul>
190189

191-
<p><strong>Discounts</strong> </p>
192-
193-
<ul>
194-
<li><code>data-discount_amount</code> Discount amount associated with an item</li>
195-
<li><code>data-discount_amount2</code> Discount amount associated with each additional quantity of the item</li>
196-
<li><code>data-discount_rate</code> Discount rate (percentage) for an item</li>
197-
<li><code>data-discount_rate2</code> Discount rate (percentage) for each additional quantity of the item</li>
198-
<li><code>data-discount_num</code> Number of additional quantities of the item to which the discount applies</li>
199-
</ul>
200190

201191
<script src="https://raw.github.com/jeffharrell/MiniCart/master/minicart.js"></script>
202192
</body>

‎paypal-button.js‎

Lines changed: 90 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -10,92 +10,109 @@ PAYPAL.apps = PAYPAL.apps || {};
1010
'use strict';
1111

1212

13+
var app = {},
14+
prettyParams = {
15+
id: 'hosted_button_id',
16+
name: 'item_name',
17+
number: 'item_number'
18+
19+
},
20+
buttonUrls = {
21+
buynow: '//www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif',
22+
cart: '//www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif',
23+
default: '//www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif'
24+
};
25+
26+
1327
if (!PAYPAL.apps.ButtonFactory) {
14-
PAYPAL.apps.ButtonFactory = (function () {
15-
var PAYPAL_URL = 'https://www.paypal.com/cgi-bin/webscr',
16-
CART_BTN_URL = '//www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif',
17-
BUY_BTN_URL = '//www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif',
18-
app = {};
19-
20-
/**
21-
* A count of each type of button on the page
22-
*/
23-
app.buttons = {
24-
buy: 0,
25-
cart: 0,
26-
api: 0
27-
};
28-
29-
/**
30-
* Renders a button in place of the given element
31-
*
32-
* @param el {HTMLElement} The element to replace
33-
* @param type (String) The type of the button to render
34-
* @param data {Object} An object of key/value data to set as button params
35-
* @return {Boolean}
36-
*/
37-
app.create = function (el, type, data) {
38-
var merchantId = el.src.split('?merchant=')[1],
39-
form = document.createElement('form'),
40-
btn = document.createElement('input'),
41-
hidden = document.createElement('input'),
42-
input, key;
43-
44-
// Don't render if there's no merchant ID
45-
if (merchantId) {
46-
data.business = merchantId;
47-
} else {
48-
return false;
49-
}
28+
/**
29+
* A count of each type of button on the page
30+
*/
31+
app.buttons = {
32+
buy: 0,
33+
cart: 0,
34+
api: 0
35+
};
36+
37+
/**
38+
* Renders a button in place of the given element
39+
*
40+
* @param el {HTMLElement} The element to replace
41+
* @param type (String) The type of the button to render
42+
* @param data {Object} An object of key/value data to set as button params
43+
* @return {Boolean}
44+
*/
45+
app.create = function (el, type, data) {
46+
var merchantId = el.src.split('?merchant=')[1],
47+
form = document.createElement('form'),
48+
btn = document.createElement('input'),
49+
hidden = document.createElement('input'),
50+
input, key;
51+
52+
// Don't render if there's no merchant ID
53+
if (merchantId) {
54+
data.business = merchantId;
55+
} else {
56+
return false;
57+
}
5058

51-
btn.type = 'image';
52-
hidden.type = 'hidden';
53-
form.method = 'post';
54-
form.action = PAYPAL_URL;
55-
form.appendChild(btn);
56-
57-
// Cart buttons
58-
if (type === 'cart') {
59-
data.cmd = '_cart';
60-
data.add = true;
61-
btn.src = CART_BTN_URL;
62-
// Hosted buttons
63-
} else if (data.hosted_button_id) {
64-
data.cmd = '_s-xclick';
65-
btn.src = BUY_BTN_URL;
66-
// Plain text buttons
67-
} else {
68-
data.cmd = '_xclick';
69-
btn.src = BUY_BTN_URL;
70-
}
59+
btn.type = 'image';
60+
hidden.type = 'hidden';
61+
form.method = 'post';
62+
form.action = "https://www.paypal.com/cgi-bin/webscr";
63+
form.appendChild(btn);
64+
65+
// Cart buttons
66+
if (type === 'cart') {
67+
data.cmd = '_cart';
68+
data.add = true;
69+
// Hosted buttons
70+
} else if (data.hosted_button_id) {
71+
data.cmd = '_s-xclick';
72+
// Plain text buttons
73+
} else {
74+
data.cmd = '_xclick';
75+
}
7176

72-
for (key in data) {
73-
input = hidden.cloneNode(true);
74-
input.name = key;
75-
input.value = data[key];
77+
btn.src = getButtonUrl(type);
7678

77-
form.appendChild(input);
78-
}
79+
for (key in data) {
80+
input = hidden.cloneNode(true);
81+
input.name = prettyParams[key] || key;
82+
input.value = data[key];
7983

80-
el.parentNode.replaceChild(form, el);
84+
form.appendChild(input);
85+
}
8186

82-
// Register it
83-
this.buttons[type] += 1;
87+
el.parentNode.replaceChild(form, el);
8488

85-
// If the Mini Cart is present then register the button
86-
if (type === 'cart' && PAYPAL.apps.MiniCart) {
87-
PAYPAL.apps.MiniCart.bindForm(form);
88-
}
89+
// Register it
90+
this.buttons[type] += 1;
8991

90-
return true;
91-
};
92+
// If the Mini Cart is present then register the button
93+
if (type === 'cart' && PAYPAL.apps.MiniCart) {
94+
PAYPAL.apps.MiniCart.bindForm(form);
95+
}
9296

97+
return true;
98+
};
9399

94-
return app;
95-
}());
100+
// Export the app
101+
PAYPAL.apps.ButtonFactory = app;
96102
}
97103

98104

105+
/**
106+
* Utility function to return the rendered button image URL
107+
*
108+
* @param type {String} The type of button to render
109+
* @return {String}
110+
*/
111+
function getButtonUrl(type) {
112+
return buttonUrls[type] || buttonUrls.default;
113+
}
114+
115+
99116
/**
100117
* Utility function to polyfill dataset functionality for browsers
101118
*

0 commit comments

Comments
 (0)