Skip to content

Commit 913d39d

Browse files
jeffharrelljeffharrell
committed
Updates to example
1 parent 611c599 commit 913d39d

3 files changed

Lines changed: 179 additions & 12 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,8 @@ Integrating with our HTML payment buttons are as easy as including a snippet of
1010
Buy Now buttons are for single item purchases.
1111

1212
```html
13-
<script src="paypal.js"
13+
<script src="paypal.js?merchant=MERCHANT_ID"
1414
data-type="buy"
15-
data-business="MERCHANT_ID"
1615
data-item_name="Buy me now!"
1716
data-amount="1.00"
1817
></script>
@@ -23,9 +22,8 @@ Buy Now buttons are for single item purchases.
2322
Add To Cart buttons lets users add multiple items to their PayPal cart.
2423

2524
```html
26-
<script src="paypal.js"
25+
<script src="paypal.js?merchant=MERCHANT_ID"
2726
data-type="cart"
28-
data-business="MERCHANT_ID"
2927
data-item_name="Add to cart!"
3028
data-amount="1.00"
3129
></script>

‎index.html‎

Lines changed: 174 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,185 @@
1+
<!DOCTYPE html><html><head><meta charset="UTF-8"><style>html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
12

2-
<p>Buy it now</p>
3-
<script src="paypal.js"
3+
body{
4+
color:#444;
5+
font-family:Georgia, Palatino, 'Palatino Linotype', Times,
6+
'Times New Roman', serif,
7+
"Hiragino Sans GB", "STXihei", "微软雅黑";
8+
font-size:12px;
9+
line-height:1.5em;
10+
background:#fefefe;
11+
width: 45em;
12+
margin: 10px auto;
13+
padding: 1em;
14+
outline: 1300px solid #FAFAFA;
15+
}
16+
17+
a{ color: #0645ad; text-decoration:none;}
18+
a:visited{ color: #0b0080; }
19+
a:hover{ color: #06e; }
20+
a:active{ color:#faa700; }
21+
a:focus{ outline: thin dotted; }
22+
a:hover, a:active{ outline: 0; }
23+
24+
span.backtick {
25+
border:1px solid #EAEAEA;
26+
border-radius:3px;
27+
background:#F8F8F8;
28+
padding:0 3px 0 3px;
29+
}
30+
31+
::-moz-selection{background:rgba(255,255,0,0.3);color:#000}
32+
::selection{background:rgba(255,255,0,0.3);color:#000}
33+
34+
a::-moz-selection{background:rgba(255,255,0,0.3);color:#0645ad}
35+
a::selection{background:rgba(255,255,0,0.3);color:#0645ad}
36+
37+
p{
38+
margin:1em 0;
39+
}
40+
41+
img{
42+
max-width:100%;
43+
}
44+
45+
h1,h2,h3,h4,h5,h6{
46+
font-weight:normal;
47+
color:#111;
48+
line-height:1em;
49+
}
50+
h4,h5,h6{ font-weight: bold; }
51+
h1{ font-size:2.5em; }
52+
h2{ font-size:2em; border-bottom:1px solid silver; padding-bottom: 5px; }
53+
h3{ font-size:1.5em; }
54+
h4{ font-size:1.2em; }
55+
h5{ font-size:1em; }
56+
h6{ font-size:0.9em; }
57+
58+
blockquote{
59+
color:#666666;
60+
margin:0;
61+
padding-left: 3em;
62+
border-left: 0.5em #EEE solid;
63+
}
64+
hr { display: block; height: 2px; border: 0; border-top: 1px solid #aaa;border-bottom: 1px solid #eee; margin: 1em 0; padding: 0; }
65+
66+
67+
pre , code, kbd, samp {
68+
color: #000;
69+
font-family: monospace;
70+
font-size: 0.88em;
71+
border-radius:3px;
72+
background-color: #F8F8F8;
73+
border: 1px solid #CCC;
74+
}
75+
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; padding: 5px;}
76+
pre code { border: 0px !important; }
77+
code { padding: 0 3px 0 3px; }
78+
79+
b, strong { font-weight: bold; }
80+
81+
dfn { font-style: italic; }
82+
83+
ins { background: #ff9; color: #000; text-decoration: none; }
84+
85+
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
86+
87+
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
88+
sup { top: -0.5em; }
89+
sub { bottom: -0.25em; }
90+
91+
ul, ol { margin: 1em 0; padding: 0 0 0 2em; }
92+
li p:last-child { margin:0 }
93+
dd { margin: 0 0 0 2em; }
94+
95+
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
96+
97+
table { border-collapse: collapse; border-spacing: 0; }
98+
td { vertical-align: top; }
99+
100+
@media only screen and (min-width: 480px) {
101+
body{font-size:14px;}
102+
}
103+
104+
@media only screen and (min-width: 768px) {
105+
body{font-size:16px;}
106+
}
107+
108+
@media print {
109+
* { background: transparent !important; color: black !important; filter:none !important; -ms-filter: none !important; }
110+
body{font-size:12pt; max-width:100%;}
111+
a, a:visited { text-decoration: underline; }
112+
hr { height: 1px; border:0; border-bottom:1px solid black; }
113+
a[href]:after { content: " (" attr(href) ")"; }
114+
abbr[title]:after { content: " (" attr(title) ")"; }
115+
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
116+
pre, blockquote { border: 1px solid #999; padding-right: 1em; page-break-inside: avoid; }
117+
tr, img { page-break-inside: avoid; }
118+
img { max-width: 100% !important; }
119+
@page :left { margin: 15mm 20mm 15mm 10mm; }
120+
@page :right { margin: 15mm 10mm 15mm 20mm; }
121+
p, h2, h3 { orphans: 3; widows: 3; }
122+
h2, h3 { page-break-after: avoid; }
123+
}</style><script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script></head><body><h2 id="html-payment-buttons">HTML payment buttons</h2>
124+
125+
<p>Integrating with our HTML payment buttons are as easy as including a snippet of code. We have two flavors of buttons for you to use:</p>
126+
127+
<h3 id="buy-now">Buy Now</h3>
128+
129+
<p>Buy Now buttons are for single item purchases.</p>
130+
131+
<pre><code>&lt;script src="paypal.js?merchant=MERCHANT_ID"
132+
data-type="buy"
133+
data-item_name="Buy me now!"
134+
data-amount="1.00"
135+
&gt;&lt;/script&gt;</code></pre>
136+
137+
<script src="paypal.js?merchant=6XF3MPZBZV6HU"
4138
data-type="buy"
5-
data-business="6XF3MPZBZV6HU"
6139
data-item_name="Buy me now!"
7140
data-amount="1.00"
8141
></script>
142+
</p>
143+
144+
<h3 id="add-to-cart">Add To Cart</h3>
145+
146+
<p>Add To Cart buttons lets users add multiple items to their PayPal cart.</p>
9147

10148

149+
<pre><code>&lt;script src="paypal.js?merchant=6XF3MPZBZV6HU"
150+
data-type="cart"
151+
data-item_name="Add to cart!"
152+
data-amount="1.00"
153+
&gt;&lt;/script&gt;</code></pre>
11154

12-
<p>Add to cart</p>
13-
<script src="paypal.js"
155+
<script src="paypal.js?merchant=6XF3MPZBZV6HU"
14156
data-type="cart"
15-
data-business="6XF3MPZBZV6HU"
16157
data-item_name="Add to cart!"
17158
data-amount="1.00"
18-
></script>
159+
></script>
160+
161+
<h2 id="button-parameters">Button parameters</h2>
162+
163+
<p>You can pass additional data values to the button as well. The following are currently supported:</p>
164+
165+
<p><strong>Item details</strong></p>
166+
167+
<ul>
168+
<li><code>data-item_name</code> Description of the item</li>
169+
<li><code>data-item_number</code> The number of the item</li>
170+
<li><code>data-quantity</code> Number of items</li>
171+
<li><code>data-shipping</code> The cost of shipping this item</li>
172+
<li><code>data-shipping2</code> The cost of shipping each additional unit of this item</li>
173+
<li><code>data-tax</code> Transaction-based tax override variable</li>
174+
</ul>
175+
176+
<p><strong>Discounts</strong> </p>
177+
178+
<ul>
179+
<li><code>data-discount_amount</code> Discount amount associated with an item</li>
180+
<li><code>data-discount_amount2</code> Discount amount associated with each additional quantity of the item</li>
181+
<li><code>data-discount_rate</code> Discount rate (percentage) for an item</li>
182+
<li><code>data-discount_rate2</code> Discount rate (percentage) for each additional quantity of the item</li>
183+
<li><code>data-discount_num</code> Number of additional quantities of the item to which the discount applies</li>
184+
</ul>
185+
</body>

‎paypal.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,8 @@ PAYPAL.apps = PAYPAL.apps || {};
2222
btn = document.createElement('input');
2323
btn.type = 'image';
2424

25+
data.business = el.src.split('?merchant=')[1];
26+
2527
if (isCart) {
2628
data.cmd = '_cart';
2729
data.add = true;
@@ -57,7 +59,7 @@ PAYPAL.apps = PAYPAL.apps || {};
5759
if (PAYPAL.apps.MiniCart) {
5860
PAYPAL.apps.MiniCart.render();
5961
}
60-
}
62+
};
6163

6264
document.body.appendChild(script);
6365
}

0 commit comments

Comments
 (0)