Create Custom Paypal Donate Buttons Using Donate.js

Category: Javascript | July 31, 2018
Views Total:1,971 views
Official Page:Go to website
Last Update:July 31, 2018


Create Custom Paypal Donate Buttons Using Donate.js


Donate.js is a simple-to-use JavaScript library that helps you create clean, flat style paypal donate / payment buttons for your e-commerce and business website. The goal is to create a selection UI where the user can choose a fixed or a custom amount.

How to use it:

To get started, you first have to include the donate.js on your web page.

<script src="/path/to/donate.js"></script>

Add a paypal donate form to your webpage.

<div class="donate"></div>
  <form action="" method="post" target="_top">
      <input type="hidden" name="cmd" value="_donations">
      <input type="hidden" name="business" value="[email protected]">
      <input type="hidden" name="lc" value="US">
      <input type="hidden" name="amount">
      <input type="hidden" name="no_note" value="0">
      <input type="hidden" name="cn" value="Add special instructions to the seller:">
      <input type="hidden" name="no_shipping" value="2">
      <input type="hidden" name="currency_code" value="USD">
      <input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
          <button class="btn bg-orange">Donate</button>

Initialize the Donate.js.

    container: ".donate", 
    prefix: "$", 
    classes: {
      active: "active"
    }, amounts: [
    custom: true, 
    format: function (val) {
      return val > 1000
           ? (val = val.toString()).substring(0, 1) + "," + val.substring(1)
           : val
    onChange: function (val, li, e) {
        document.querySelector("[name=amount]").value = val;
    defaultValue: 20

The required CSS styles for the donate buttons.

.donate li {
  list-style: none;
  display: inline-block;
  padding: 20px;
  background-color: #2C3E50;
  margin: 10px;
  width: 18%;
  text-align: center;
  color: #ecf0f1;
  font-weight: bold;
  opacity: 0.7;
  cursor: pointer;
.donate li:hover { opacity: 1; }
.donate {
  opacity: 1;
  background-color: #2ecc71;
.donate li > input {
  max-width: 56px;
  border: none;
  padding: 10px;
  font-family: "Open Sans", sans-serif;
  margin-left: 10px;
.donate li:last-of-type {
  height: 30px;
  padding-top: 13px;
.donate ul {
  padding: 0;
  margin: 0;
} { padding: 20px 160px; }
.donate { text-align: center; }
.footer {
  text-align: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 25px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  color: #333;
.footer a {
  text-decoration: none;
  color: #111;
  font-weight: bold;
.footer a:hover { color: #111; }
.footer a:hover { text-decoration: underline;

Default options.

// Donate(options)
// options: An object containing the following fields:

// The snippet that should appear *before* the amount value. 
// Could be useful for currencies (e.g. `"$"`).
prefix: "",
// The snippet that should appear *after* the amount value.
sufix: "",
// The change handler called with: the amount value (Number), the amount element and the event object.
onChange: function () {},
// The format handler which is used to format the amounts. 
// Should return strings or values that can be stringified.
format: function (v) { return v.toString(); },
// The after-append handler.
itemAppended: function () {},
// The donate.js container.
container: null,
// An array of numbers representing the fixed amounts.
amounts: [],
// If 'true', then the custom amount input will appear. 
// If it's a string, it will be interpreted as raw HTML.
custom: false,
// An object to configure the classes.
classes: {
  active: "active" // The active class.



  • v1.2.4

You Might Be Interested In:

Leave a Reply