# 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'
    });