ClassyPaypal – Stylish PayPal payment buttons

Download   Demo

This Jquery Plugin ClassyPaypal is 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.

1. INCLUDE CSS AND JS FILES

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/jquery.classypaypal.min.js"></script> <link rel="stylesheet" type="text/css" href="css/jquery.classypaypal.min.css" />

2. HTML

<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>

3. JAVASCRIPT

$('.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);  
}

4. 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, defaultisdefault
• 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

5. 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.

6. 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