About
Want to give your standard BuyNow or Donate PayPal buttons new stylish look or some advanced features?
Then PayNow! plugin is what you need. It comes with six predefined button styles, optional tooltip, has callback and API methods for advanced users, also a convenient way to set paypal variables via data- attributes. Besides this it has "two-clicks" mode that can be used on touch screens to add interesting CSS3 animations.
In examples below you will find HTML/JS code samples that you can use on your website after just few modifications.
1 Default button style
"Buy Now" button with default style
HTML code<button id="pn1" class="paynow-button" data-business="example@gmail.com" data-item_name="PayNow Plugin" data-amount="12.99" data-quantity="1" data-currency_code="USD">Just $12.99! </button>JS code
<script type="text/javascript">
$(document).ready(function(){
$('#pn1').paynow({
type: 'buynow',
style: 'default',
tooltip: 'Pay safely with PayPal!'
});
});
</script>
2 Round button style
"Buy Now" button with round style
HTML code<button id="pn2" class="paynow-button" data-business="example@gmail.com" data-item_name="PayNow Plugin" data-amount="10.5" data-quantity="1" data-currency_code="USD">Buy Now </button>JS code
<script type="text/javascript">
$(document).ready(function(){
$('#pn2').paynow({
type: 'buynow',
style: 'round'
});
});
</script>
Nice designer t-shirt. Comes in black color, size L/XL $10.5
3 Frame button style
"Buy Now" button with frame style
HTML code<button id="pn3" class="paynow-button" data-business="example@gmail.com" data-item_name="PayNow Plugin" data-amount="10" data-quantity="2" data-discount_amount="2.01" data-currency_code="USD">PURCHASE </button>JS code
<script type="text/javascript">
$(document).ready(function(){
$('#pn3').paynow({
type: 'buynow',
style: 'frame'
});
});
</script>
Get two for only $17.99!
4 Double button style
"Buy Now" button with double style and a tooltip
HTML code<button id="pn4" class="paynow-button" data-business="example@gmail.com" data-item_name="PayNow Plugin" data-amount="150" data-quantity="1" data-currency_code="USD"> Click to Buy $150 </button>JS code
<script type="text/javascript">
$(document).ready(function(){
$('#pn4').paynow({
type: 'buynow',
style: 'double',
tooltip: 'Click to checkout with PayPal!'
});
});
</script>
5 Boxed button style
"Buy Now" button with boxed style and enabled "two clicks" mode
HTML code<button id="pn5" class="paynow-button" data-business="example@gmail.com" data-item_name="PayNow Plugin" data-amount="20" data-quantity="1" data-currency_code="USD"> <span class="paynow-price">$20</span> <span class="paynow-label">Get It!</span> </button>JS code
<script type="text/javascript">
$(document).ready(function(){
$('#pn5').paynow({
type: 'buynow',
style: 'boxed',
twoClicks: true
});
});
</script>
Order today and get this nice t-shirt with 10% off!
6 Square button style
"Donate" button with square style and shake animation
HTML code<button id="pn6" class="paynow-button" data-business="example@gmail.com" data-item_name="Please donate!" data-lc="US" data-no_note="0" data-currency_code="USD">Donate! </button>JS code
<script type="text/javascript">
$(document).ready(function(){
$('#pn6').paynow({
type: 'donate',
style: 'square'
});
});
</script>
7 Bonus! Subscribe button with selection
"Subscribe" button with <select> dropdown to choose subscription plan
HTML code<p> <select id="pn7_select"> <option value="">Select plan ..</option> <option value="Starter">Starter</option> <option value="Basic">Basic</option> <option value="Premium">Premium</option> </select> </p> <button id="pn7" class="paynow-button paynow-button-disabled" data-business="example@gmail.com" data-item_name="Super Plan" data-currency_code="USD" data-on1="Option" data-os1="" data-src="1" data-a3="9.99" data-p3="1" data-t3="M" >Subscribe </button>JS code
<script type="text/javascript">
$('#pn7').paynow({type: 'subscribe', style: 'default'});
$('#pn7_select').change(function(){
var pn = $('#pn7').data('paynow-api'), val = $(this).val();
if(val !== "") {
pn.enable().setVar('os1', val);
} else {
pn.disable();
}
});
</script>
Super Plan $9.99/month
Please choose your subscription plan below and click Subscibe