Creating a custom PayPal button in WordPress
After using PayPal’s button building tools for a while I found that I could not accomplish my goal using their WYSIWYG. I made a custom PayPal button using no plugins for WordPress, read on to learn how you can do the same.
What I needed to accomplish:
I needed to create a payment method where the price is variable, the checkout description is variable, and pass the customer’s name. It is not possible to have a variable price in PayPal’s standard button building tool. I needed to have a custom page URL that I could give to clients that contained the service, and the price to be paid.
How to Pass Variable Prices to PayPal via WordPress
Query String Variable Passing
The first thing I thought of was I need to use a query string to pass the variables on the URL. However WordPress makes it very difficult to use query strings, by default if you pass a custom query string at the end of a URL WordPress will return a 404 error. I did not want to install a plugin for just this. Also I would have to create a custom page template; no thanks.
jQuery and HashTags (#)
So since it was too time consuming and inefficient to accomplish a custom PayPal button in WordPress via PHP and the query string, I switched my efforts towards the front end. Here are the results:
<div style="position:relative; margin:0 auto; width: 320px;">
<h1>Online Payments</h1>
<h3>Payment Details</h3>
<div style="font-size:20px; line-height:30px;">
Name: <span id="spName" style="font-weight:bold;"> </span><br>
Service: <span id="spService" style="font-weight:bold;"> </span><br>
Total Amount: <span id="spAmount" style="font-weight:bold;"> </span><br><br>
</div>
<small><i>Please pay via PayPal:</i></small><br>
<form name="_xclick" action="https://www.paypal.com/us/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_xclick"><input type="hidden" name="business" value="EMAIL@EXAMPLE.COM">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="item_name" value="">
<input type="hidden" name="amount" value="">
<input type="hidden" name="on1" value="Name">
<input type="hidden" name="os1" value="">
<input type="image" style="width:144px; height:47px; display:block;" src="http://www.paypalobjects.com/en_US/i/btn/btn_paynowCC_LG.gif" border="0" name="submit" alt="Make payments with PayPal - it's fast, free and secure!"></form>
</div>
<script>
<!--
if(window.location.hash) {
var getHash = window.location.hash;
getHash = getHash.replace(/%20/g, " ");
var theHash = getHash.substring(1, getHash.length).split('~');
jQuery('input[name=os1]').val(theHash[0]);
jQuery('input[name=item_name]').val(theHash[1]);
jQuery('input[name=amount]').val(theHash[2]+".00");
jQuery('#spName').html(theHash[0]);
jQuery('#spService').html(theHash[1]);
jQuery('#spAmount').html("$"+theHash[2]);
}else{
alert('Sorry, no payments at this time.');
}
-->
</script>
Check out my live example:
Working Example – hey why not give me some money for no reason :D.
Feel free to use my code on your website when setting up your custom PayPal button.
There are 3 variables being passed to the hashtag: 1st name, 2nd service, 3rd the amount, and the variables are separated with a ‘~’.
1 Comment