Commit 8bf1fb5
committed
Initial commit
1 parent 7837b5e commit 8bf1fb5
4 files changed
Lines changed: 165 additions & 3 deletions
Whitespace-only changes.
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -1,4 +1,50 @@ | |||
| 1 | - DynamicButtonJS | ||
| 2 | - =============== | ||
| 3 | 1 | ||
| 4 | - JavaScript for creating dynamic buttons for PayPal's checkout flows. | ||
| 2 | + | ||
| 3 | + | ||
| 4 | + | ||
| 5 | + # HTML payment buttons | ||
| 6 | + | ||
| 7 | + 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: | ||
| 8 | + | ||
| 9 | + ## Buy Now | ||
| 10 | + Buy Now buttons are for single item purchases. | ||
| 11 | + | ||
| 12 | + ```html | ||
| 13 | + <script src="paypal.js" | ||
| 14 | + data-paypal-checkout="buy-now" | ||
| 15 | + data-paypal-button="true" | ||
| 16 | + data-paypal-business="12345abc" | ||
| 17 | + data-paypal-item-name="Buy me now!" | ||
| 18 | + data-paypal-amount="1.00" | ||
| 19 | + ></script> | ||
| 20 | + ``` | ||
| 21 | + | ||
| 22 | + Go ahead and try it out | ||
| 23 | + | ||
| 24 | + | ||
| 25 | + | ||
| 26 | + ## Add To Cart | ||
| 27 | + Add To Cart buttons lets users add multiple items to their PayPal cart. | ||
| 28 | + | ||
| 29 | + ```html | ||
| 30 | + <script src="paypal.js" | ||
| 31 | + data-paypal-checkout="cart" | ||
| 32 | + data-paypal-button="true" | ||
| 33 | + data-paypal-business="12345abc" | ||
| 34 | + data-paypal-item-name="Add me to cart" | ||
| 35 | + data-paypal-amount="1.00" | ||
| 36 | + ></script> | ||
| 37 | + ``` | ||
| 38 | + | ||
| 39 | + Prepare to be amazed with this one | ||
| 40 | + | ||
| 41 | + | ||
| 42 | + | ||
| 43 | + # API payment buttons | ||
| 44 | + | ||
| 45 | + ```html | ||
| 46 | + <script src="paypal.js" | ||
| 47 | + data-paypal-checkout="api" | ||
| 48 | + data-paypal-button="true" | ||
| 49 | + ></script> | ||
| 50 | + ``` | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,18 @@ | |||
| 1 | + | ||
| 2 | + <p>Buy it now</p> | ||
| 3 | + <script src="paypal.js" | ||
| 4 | + data-type="buy" | ||
| 5 | + data-business="6XF3MPZBZV6HU" | ||
| 6 | + data-item_name="Buy me now!" | ||
| 7 | + data-amount="1.00" | ||
| 8 | + ></script> | ||
| 9 | + | ||
| 10 | + | ||
| 11 | + | ||
| 12 | + <p>Add to cart</p> | ||
| 13 | + <script src="paypal.js" | ||
| 14 | + data-type="cart" | ||
| 15 | + data-business="6XF3MPZBZV6HU" | ||
| 16 | + data-item_name="Add to cart!" | ||
| 17 | + data-amount="1.00" | ||
| 18 | + ></script> | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,98 @@ | |||
| 1 | + if (typeof PAYPAL === 'undefined' || !PAYPAL) { | ||
| 2 | + var PAYPAL = {}; | ||
| 3 | + } | ||
| 4 | + | ||
| 5 | + PAYPAL.apps = PAYPAL.apps || {}; | ||
| 6 | + | ||
| 7 | + | ||
| 8 | + (function () { | ||
| 9 | + | ||
| 10 | + 'use strict'; | ||
| 11 | + | ||
| 12 | + | ||
| 13 | + function renderForm(el, data) { | ||
| 14 | + var type = data.type, | ||
| 15 | + isCart = (type === 'cart'), | ||
| 16 | + form = document.createElement('form'), | ||
| 17 | + input, btn, key; | ||
| 18 | + | ||
| 19 | + form.method = 'post'; | ||
| 20 | + form.action = 'https://www.paypal.com/cgi-bin/webscr'; | ||
| 21 | + | ||
| 22 | + btn = document.createElement('input'); | ||
| 23 | + btn.type = 'image'; | ||
| 24 | + | ||
| 25 | + if (isCart) { | ||
| 26 | + data.cmd = '_cart'; | ||
| 27 | + data.add = true; | ||
| 28 | + btn.src = '//www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif'; | ||
| 29 | + } else { | ||
| 30 | + data.cmd = '_xclick'; | ||
| 31 | + btn.src = '//www.paypalobjects.com/en_US/i/btn/btn_buynow_LG.gif'; | ||
| 32 | + } | ||
| 33 | + | ||
| 34 | + for (key in data) { | ||
| 35 | + input = document.createElement('input'); | ||
| 36 | + input.type = 'hidden'; | ||
| 37 | + input.name = key; | ||
| 38 | + input.value = data[key]; | ||
| 39 | + | ||
| 40 | + form.appendChild(input); | ||
| 41 | + } | ||
| 42 | + | ||
| 43 | + form.appendChild(btn); | ||
| 44 | + el.parentNode.replaceChild(form, el); | ||
| 45 | + } | ||
| 46 | + | ||
| 47 | + | ||
| 48 | + function loadMiniCart() { | ||
| 49 | + if (!PAYPAL.apps.MiniCart) { | ||
| 50 | + var script = document.createElement('script'); | ||
| 51 | + script.src = 'http://www.minicartjs.com/build/minicart.js'; | ||
| 52 | + script.onload = function () { | ||
| 53 | + if (PAYPAL.apps.MiniCart) { | ||
| 54 | + PAYPAL.apps.MiniCart.render(); | ||
| 55 | + } | ||
| 56 | + } | ||
| 57 | + | ||
| 58 | + document.body.appendChild(script); | ||
| 59 | + } | ||
| 60 | + } | ||
| 61 | + | ||
| 62 | + | ||
| 63 | + PAYPAL.apps.DynamicButton = (function () { | ||
| 64 | + var app = {}; | ||
| 65 | + | ||
| 66 | + app.render = function () { | ||
| 67 | + var nodes = document.getElementsByTagName('script'), | ||
| 68 | + hasCart = false, | ||
| 69 | + node, data, type, i, len; | ||
| 70 | + | ||
| 71 | + for (i = 0, len = nodes.length; i < len; i++) { | ||
| 72 | + node = nodes[i]; | ||
| 73 | + data = node.dataset; | ||
| 74 | + type = data.type; | ||
| 75 | + | ||
| 76 | + if (type) { | ||
| 77 | + renderForm(node, data); | ||
| 78 | + } | ||
| 79 | + | ||
| 80 | + if (type === 'cart') { | ||
| 81 | + hasCart = true; | ||
| 82 | + } | ||
| 83 | + } | ||
| 84 | + | ||
| 85 | + if (hasCart) { | ||
| 86 | + loadMiniCart(); | ||
| 87 | + } | ||
| 88 | + }; | ||
| 89 | + | ||
| 90 | + return app; | ||
| 91 | + }()); | ||
| 92 | + | ||
| 93 | + | ||
| 94 | + }()); | ||
| 95 | + | ||
| 96 | + | ||
| 97 | + PAYPAL.apps.DynamicButton.render(); | ||
| 98 | + | ||
0 commit comments