HTML payment buttons
Integrating with our HTML payment buttons are as easy as including a snippet of code. Try it out and configure your own.
We have two flavors of buttons for you to use:
Buy Now buttons are for single item purchases.
<script src="paypal-button.min.js?merchant=YOUR_MERCHANT_ID" data-button="buynow" data-name="My product" data-amount="1.00" ></script>
Add To Cart
Add To Cart buttons lets users add multiple items to their PayPal cart.
<script src="paypal-button-minicart.min.js?merchant=YOUR_MERCHANT_ID" data-button="cart" data-name="Product in your cart" data-amount="1.00" ></script>
QR codes which can be scanned with a smart phone can also be easily generated.
<script src="paypal-button.min.js?merchant=YOUR_MERCHANT_ID" data-button="qr" data-name="Product via QR code" data-amount="1.00" ></script>
All of PayPal's HTML button variables are supported by prefixing their name with "data-". Here are the most commonly used:
data-nameDescription of the item.
data-numberThe number of the item.
data-amountThe price of the item.
data-quantityQuantity of items to purchase.
data-shippingThe cost of shipping this item.
data-taxTransaction-based tax override variable.
data-sizeFor button images:
largework. For QR codes enter the pixel length of the longest side.
data-idThe hosted ID of the button (if applicable).
Getting your Merchant ID
Your merchant ID needs to be added to the URL of the referenced script. This ID can either be your Secure Merchant ID, which can be found by logging into your PayPal account and visiting your profile, or your email address.
To see the un-minified code you can take a peek at paypal-button.js.
PAYPAL.apps.ButtonFactory.create(data, type, parentNode)
Creates and returns an HTML element that contains the button code.
type - The button type, e.g. "buynow", "cart", "qr"
parentNode - An HTML element to add the newly created button to (Optional)
- Internet Explorer 7+.
We love contributions! If you'd like to contribute please submit a pull request via Github.
Mocha is used to run our test cases. Please be sure to run these prior to your pull request and ensure nothing is broken.