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="https://www.paypal.com/cgi-bin/webscr" 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">
      <center>
          <button class="btn bg-orange">Donate</button>
      </center>
  </form>

Initialize the Donate.js.

Donate({
    container: ".donate", 
    prefix: "$", 
    classes: {
      active: "active"
    }, amounts: [
        50, 
        100, 
        200, 
        300, 
        400, 
        500, 
        700
    ], 
    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 li.active {
  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;
}
button.btn.bg-orange { 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.
}

Changelog:

02/13/205

• v1.2.15