Thank you for purchasing PayNow! If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here
Sincerely, flGravity
Whether you're selling goods or collecting donations, with PayNow! plugin you can quickly add stylish PayPal payment buttons to your website for instant and secure payments. Plugin supports following types of payment buttons - "Buy Now", "Donate" and "Subscribe" and provides six predefined button styles for your creativity!
To install PayNow! plugin, you should copy js/jquery.paynow.min.js and css/paynow.css files to your website and then link them in <head> section, like so
<link rel="stylesheet" href="css/paynow.css" type="text/css"> <script type="text/javascript" src="js/jquery.paynow.min.js"></script>
Note that plugin requires jQuery 1.7+, so make sure it is included prior the line with js/jquery.paynow.min.js. You can download latest jQuery here - http://jquery.com/download/
Next step is to add HTML markup for PayNow! button. For example, here is simple "Buy Now" button
<button id="pn1" class="paynow-button" data-business="example@gmail.com" data-item_name="PayNow Plugin" data-amount="10" data-quantity="1" data-currency_code="USD">Buy Now </button>
As you see it has "paynow-button" class and special "data-" attributes, that configure button to sell certain product. To help you get used with them, here is briefly what they do! So
Please refer to 4. PayPal Variables section about complete list with PayPal HTML variables, that you can use with button via "data-" attributes.
Now it's time to init plugin! Add following JS code to the <head> section
<script type="text/javascript">
$(document).ready(function(){
$('#pn1').paynow({
type: 'buynow',
style: 'default'
});
});
</script>
Basically $.paynow() can accept two arguments. First one is Object with plugin options, whereas second one is Object with "fallback" PayPal variables. These "fallback" variables will be used if there is no corresponding "data-" attribute set for button itself. For instance, you can provide second argument to $.paynow() if you init few buttons at the same time with single PayPal merchant email address. In other words, instead of adding "data-business" attribute to every button, just pass second argument to plugin init, like so
<script type="text/javascript">
$(document).ready(function(){
$('.my-buttons').paynow({
type: 'buynow',
style: 'default'
}, {business: 'my@domain.com'});
});
</script>
Now let's see what options you can use with PayNow! plugin.
With PayNow! plugin you can use following options
// default options
var options = $.extend({
type: 'buynow', // payment button type - "buynow", "subscribe" or "donate"
style: 'default', // payment button style - "default", "round", "frame", "double", "square" or "boxed"
innerHTML: '', // payment button inner text/html
clickTarget: false, // element inside button that triggers submit or button itself if "false"
checkoutTarget: '_self', // target for PayPal checkout page
delaySubmit: 0, // delay submit after payment button was clicked, ms
twoClicks: false, // enable "two clicks" button mode
tooltip: '', // tooltip text or "" to disable
tooltipHide: 3000, // tooltip auto-hide timeout or 0 to disable, ms
tooltipTime: 300, // tooltip show/hide duration, ms
tooltipDelay: 400, // tooltip show delay, ms
tooltipOffset: 15, // tooltip offset from button, px
beforeSubmit: false // callback to modify PayPal checkout variables before submit
}, opts);
Use beforeSubmit() callback if you want to alter PayPal variables before they will be send to PayPal checkout. Function accepts single argument - an Object with all variables as properties (without "data-" prefix). Let's see example. Say you want to make flat discount if user is signed in (has "signed_in" cookie). The code will look like so
<script type="text/javascript">
$(document).ready(function(){
$('#pn1').paynow({
type: 'buynow',
style: 'default',
beforeSubmit: function(vars){
if(document.cookie.indexOf('signed_in') != -1) {
vars['discount_amount'] = '1.5';
}
return vars;
}
});
});
</script>
Don't forget to return Object after modifications! If you want to prevent submit, you can return "false". And finally, if you want to access button from within beforeSubmit(), use this keyword, that refers to button DOM element.
Complete list with PayPal HTML variables you can find by this URL - HTML Variables for PayPal Payments Standard. When you are going to use some variable, check if it's suitable for button type that you set with "type" plugin option.
Basically, there is few ways how you can set PayPal HTML variables for PayNow! buttons. You can use individual "data-" attributes, like in 2. Installation section above. Or you can provide single "data-json" attribute, with all PayPal variables as valid JSON string, like so
<button id="pn1" class="paynow-button" data-json='{"business": "example@gmail.com", "item_name": "PayNow Plugin", "amount": 10, "quantity": 1, "currency_code": "USD" }'>Buy Now</button>
This may be useful if you generate HTML from PHP where you can convert array to JSON string using json_encode().
PayNow! plugin provides following simple API methods
api.enable() - method to enable button and allow submit
api.disable() - method to disable button and forbid submit
api.setVar(name, value) - method to set "data-" attributes for payment button
Here is example how access plugin API
// get PayNow! API object
var api = $('#pn1').data('paynow-api');
// let's change price to $19.99 if today is Monday
var today = new Date();
if(today.getDay() === 1) {
api.setVar('price', 19.99);
}
Also you can chain API methods
// get PayNow! API object
var api = $('#pn1').data('paynow-api');
api.setVar('price', 19.99).enable();
Here is description of classes that PayNow! plugin adds to the button
paynow-button - this class should be added to PayNow! <button> tag
paynow-type-<type> - button type that corresponds to "type" plugin option (e.g "paynow-type-donate")
paynow-style-<style> - button style that corresponds to "style" plugin option (e.g "paynow-style-square")
paynow-enable-transit - class is being added automatically with 30ms delay to enable CSS3 transitions
paynow-submit-started - if "delaySubmit" option > 0ms, class will be added immediately when button is clicked
paynow-button-disabled - class to disable button; it can be added manually or via api.disable() method
paynow-button-active - if "twoClicks" option is true, class will be added to the button after first click
Thanks for reading!