ClassyPaypal
Paypal Buttons? I'm loving them!

Introduction

ClassyPaypal is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that allows you to quickly add stylish PayPal payment buttons to your website for instant and secure payments.

  • Buy Now, Donate and Subscribe button types.
  • Callback to modify PayPal variables before checkout.
  • PayPal variables via "data-" attributes, or as JSON string.
  • Built-in tooltip.
  • Valid HTML5 markup.
  • Integrated plugin API.

Download it

License

This jQuery plugin is distributed under the MIT license. Enjoy!

Demo



Setup

First you need to include the jQuery library, since ClassyPaypal is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Secondly, you need to include the jQuery ClassyPaypal javascript and the CSS file, which you can do it by adding the code below to your page.

<script src="js/jquery.classypaypal.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.classypaypal.min.css" />

Next, you create the HTML structure on which you want to trigger the plugin.

<button class="paypal ClassyPaypal-button"
    data-business="example@yourdomain.com" 
    data-item_name="PayNow Plugin" 
    data-amount="10.99" 
    data-quantity="1"
    data-currency_code="USD">Just $10.99!</button>

As the last step, you trigger the plugin on the element you just created. In this case, we trigger it on the element with the class loader.

$('.paypal').ClassyPaypal({
    type: 'buynow',
    style: 'default',
    tooltip: 'Pay safely with PayPal!'
});

Or, instead of using separate data- parameters, you can pass all required information into a data-json parameter.

<button class="paypal ClassyPaypal-button"
    data-json='{"business": "example@yourdomain.com", "item_name": "ClassyPaypal Plugin", "amount": 10, "quantity": 1, "currency_code": "USD" }'>Buy Now</button>

Also, you can pass a second parameter to the ClassyPaypal function, which is an object with fallback variables, to be used when there is no corresponding data- attribute.

$('.paypal').ClassyPaypal({  
    type: 'buynow',  
    style: 'default'  
}, {
    business: 'example@yourdomain.com',
    amount: '10.99',
    currency_code: 'USD'
});

You can access the ClassyPaypal API using the notation below.

var api = $('.paypal').data('ClassyPaypal-api');  
// let's change price to $29.99 if today is Wednesday
var today = new Date();  
if (today.getDay() === 3) {  
    api.setVar('price', 29.99);  
}

Options

  • Parameters

  • data-business - specify your PayPal merchant email address.
  • data-item_name - name of product that you sell.
  • data-amount - product price.
  • data-currency_code - currency code.
  • data-quantity - how many products you sell.
  • You can view a list of all the parameters you can use in a data- statement here.

  • Options

  • type - payment button type, can be buynow, subscribe or donate, default is buynow
  • style - payment button style, can be default, round, frame, double or square, default is default
  • innerHTML - payment button inner text/HTML.
  • checkoutTarget - target for PayPal checkout page, default is _self
  • delaySubmit - delay submit after payment button was clicked, in milliseconds, default is 0
  • tooltip - tooltip text or "" to disable it.
  • beforeSubmit - callback to modify PayPal checkout variables before submit, default is false

  • Methods

  • enable() - method to enable button and allow submit
  • disable() - method to disable button and forbid submit
  • setVariable() - method to set "data-" attributes for payment button

Example



<button id="paypal2" class="ClassyPaypal-button"
    data-business="example@yourdomain.com" 
    data-item_name="ClassyPaypal Plugin" 
    data-amount="12" 
    data-quantity="1"
    data-currency_code="EUR">Buy Now</button>

$('#paypal2').ClassyPaypal({
    type: 'buynow',
    style: 'round'
});


<button id="paypal3" class="ClassyPaypal-button"
    data-business="example@yourdomain.com" 
    data-item_name="ClassyPaypal Plugin"
    data-amount="10" 
    data-quantity="2"
    data-discount_amount="2.01"
    data-currency_code="USD">PURCHASE</button>

$('#paypal3').ClassyPaypal({
    type: 'buynow',
    style: 'frame'
});


<button id="paypal4" class="ClassyPaypal-button"
    data-business="example@gmail.com"
    data-item_name="ClassyPaypal Plugin" 
    data-amount="200" 
    data-quantity="1" 
    data-currency_code="USD">
    <span class="ClassyPaypal-label">Order today</span>
    <span class="ClassyPaypal-price">$150</span>
</button>
                                    
$('#paypal5').ClassyPaypal({
    type: 'donate',
    style: 'square'
});


<button id="paypal5" class="ClassyPaypal-button"
    data-business="example@gmail.com" 
    data-item_name="Donation to support our work"
    data-lc="US"
    data-no_note="0"
    data-currency_code="USD">Donate!
</button>
                                    
$('#paypal6').ClassyPaypal({
    type: 'subscribe',
    style: 'default'
});