How to create donation button with preset amounts & custom donation amount?

cagross
Contributor
Contributor

Hi all.  I would like to create a PayPal donate button that allows users to select radio buttons corresponding to different preset amounts, as well as one for a custom donation amount.  How can I do this?

 

I found two separate PayPal forum posts, one from 2012 and another from 2013, and both contain slightly different solutions.  Are either of these still considered best practice?  I am of course interested in one that is safe in terms of security.

 

I took a stab at it myself (see this Codepen). But I can't get the 'custom donation' radio button to deselect when another radio button is selected.


Thanks in advance.

Login to Me Too
8 REPLIES 8

Snow-Cat
Advisor
Advisor

Some things to know concerning Donation item button code:

The use of the option variables (on0, os0, on1, os1, etc.) are no longer valid when used with the actual Donation command.  That's why the examples you had found really won't work anymore.   As for using "radio buttons", that can only be done by manually writing the needed code with a script to manage the choices and then forward that data to the PayPal Checkout Screens.  Using this method, you do need to use the option variables - in order to make this work, you have to switch from the Donation command to either a Buy Now or Add to Cart command.  This also changes the look of the PayPal Checkout Screen as you will not get the Donation headers as you normally would see using the Donation command.  Bottom line, below is a work around example using the Buy Now command and radio buttons. 

 

Tip: Use your your PayPal Merchant Account ID instead of your email address.

 

<!DOCTYPE html>
<html lang="en">

<head>

<title>Button Example</title>

<!-- START META TAG SECTION -->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">

<!-- END META TAG SECTION -->


<!-- Start of Script -->
<script language="javascript">
<!--
function CalculateOrder(form){
 var radG1;
 
for (var i = 0; i < document.myform.os0.length; i++){
 if(document.myform.os0[i].checked==true){radG1=document.myform.os0[i].value;}
}


if(radG1 == "1000.00")
 {
 document.myform.amount.value = '1000.00';
 document.myform.item_number.value = "WF-1000-00";
 }
else if(radG1 == "500.00")
 {
 document.myform.amount.value = '500.00';
 document.myform.item_number.value = "WF-500-00";
 }
else if(radG1 == "250.00")
 {
 document.myform.amount.value = '250.00';
 document.myform.item_number.value = "WF-250-00";
 }
 else if(radG1 == "100.00")
 {
 document.myform.amount.value = '100.00';
 document.myform.item_number.value = "WF-100-00";
 }
 else if(radG1 == "50.00")
 {
 document.myform.amount.value = '50.00';
 document.myform.item_number.value = "WF-50-00";
 }
 else if(radG1 == "25.00")
 {
 document.myform.amount.value = '25.00';
 document.myform.item_number.value = "WF-25-00";
 }
else if(radG1 == "Other")
 {
 document.myform.amount.value = '0.00';
 document.myform.item_number.value = "WF-0-00";
 }     
}
// -->
</script>
<!-- End of Script -->


</head>

<body>

<!-- START SAMPLE CODE SECTION -->


<!-- PARAGRAPH 1 -->
Donation Examples

<br><br>

Buy Now Command with Radio Button Selections

<br><br>

Notes:
<br>
This example does not use the actual command for Donations because the Option Variables are no longer valid with actual Donation Command.&nbsp;&nbsp; In order to pass the values from the option variables you need to use the command for a Buy Now item button or an Add to Cart item button.&nbsp;&nbsp; This scenario uses the Buy Now item button command.&nbsp;&nbsp; It's important to understand that you won't see the &quot;Purpose&quot; or &quot;Donation Amount&quot; headers on the PayPal Screens as you normally would using the command for Donations.


<br><br>

Widget Fund Donations

<br><br>


<!-- Start of Donation Form -->
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post" name="myform">
<input type="hidden" name="on0" value="Donation Amount"> 
<input name="os0" type="radio" value="1000.00"> 
$1000.00
<br>
<input name="os0" type="radio" value="500.00"> 
$500.00
<br>
<input name="os0" type="radio" value="250.00"> 
$250.00
<br>
<input name="os0" type="radio" value="100.00"> 
$100.00
<br>
<input name="os0" type="radio" value="50.00"> 
$50.00
<br>
<input name="os0" type="radio" value="25.00"> 
$25.00
<br>
<input name="os0" type="radio" value="Other"> 
Other - Please enter amount on the PayPal Screen

<br><br>

<input type="reset">
<br><br><br>

<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif" border="0" name="submit" onClick="CalculateOrder(this.form)" alt="Make payments with PayPal - it's fast, free and secure!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> 
<input type="hidden" name="cmd" value="_xclick">
<!-- Replace "business" value with your PayPal Email Address or your Merchant Account ID -->
<input type="hidden" name="business" value="your PayPal Email Address or your Merchant Account ID">
<input type="hidden" name="item_number">
<input type="hidden" name="item_name" value="Widget Fund"> 
<input type="hidden" name="amount"> 
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="tax" value="0.00"> 
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="lc" value="US">
<!-- Replace value with the web page you want the customer to return to after a successful transaction -->
<input type="hidden" name="return" value="http://www.yourwebsite.com/ThankYou.html">
<!-- Replace value with the web page you want the customer to return to after item cancellation -->
<input type="hidden" name="cancel_return" value="http://www.yourwebsite.com/Cancel.html">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
</form> 
<!-- End of Donation Form -->



<!-- END BUTTON EXAMPLES-->



<!-- END SAMPLE CODE SECTION -->

<br><br>


<br><br><br><br>
<hr align="left" width="50%" noshade>
<br><br>
NOTES:
<br>
In order to test the code, you must replace the &quot;business&quot; value variable with your PayPal Email Address or your Merchant Account ID.


</body>
</html>
Login to Me Too

cagross
Contributor
Contributor

Hey thanks for the reply.  I gave your code a shot, but regardless of which radio button was selected, when I submitted the form I was taken to a PayPal page that asked for a custom donation amount (screenshot).  Thoughts on this?  There are no JS console errors.

Login to Me Too

Snow-Cat
Advisor
Advisor

Can't say without seeing your exact code.   I just retested the example I posted and it works.   What I did was copy the example, pasted it into Notepad, saved it as test.htm on my pc, then inserted the business name variable with my info, saved it again and then opened with my web browser.

Login to Me Too

cagross
Contributor
Contributor

Right O.  Here is a pastebin of my JS code. Here is a pastebin of my HTML.

 

Also, you mentioned, "Tip: Use your your PayPal Merchant Account ID instead of your email address."  I'm interested in following best practices, but can you tell me why it is advantageous to use my Merchant Account ID instead of email address?  I was instructed to specify my email address by PayPal tech support.

Login to Me Too

Snow-Cat
Advisor
Advisor

You can use either your Merchant Account ID or your email address.   Since you button code is not saved on the PayPal servers and it's manually coded, this makes it possible for bots to scoop up your email address and in turn use it for spamming thus, the Merchant Account ID .

 

As for the examples you provided, I can't tell - it has to be all together just like the example I posted.   You may want to simply try the example as it is first before actually including in your current web page.  I'm guessing that there's something missing when you insert the code into your web page so it's best to try it with a clean blank page first.

Login to Me Too

cagross
Contributor
Contributor

>> As for the examples you provided, I can't tell - it has to be all together just like the example I posted.   You may want to simply try the example as it is first before actually including in your current web page.  I'm guessing that there's something missing when you insert the code into your web page so it's best to try it with a clean blank page first.

 

I should have mentioned that this site is a WordPress site.  So I've moved the JS to a separate JS script.  But does the JS need to be inserted explicitly into the <head> element as you have done?  I have not done so--the JS code is executed at another point during the loading of the page (specifically, when WordPress enqueues its external scripts).  Maybe I can try moving it to <head> as a test.

 

As a separate test, I tried inserting your code into Codepen, and there it *does* function as expected.  So I'll try to find out how my site is processing the code differently.

 

FYI the page with my form is here if you want to take a look.

 

>> You can use either your Merchant Account ID or your email address.   Since you button code is not saved on the PayPal servers and it's manually coded, this makes it possible for bots to scoop up your email address and in turn use it for spamming thus, the Merchant Account ID .

 

OK got it, thanks.

 

 

Login to Me Too

Snow-Cat
Advisor
Advisor

Yep "wordpress" is the key - it's a different animal and does not play well with HTML Forms and scripts if you're just trying to paste them in.   Bottom line, you can't just insert PayPal button code in your page as you would a regular site.   You may be able to find a plugin for what you want to do else, what works is the email or URL version of PayPal's item button code however, since this type of code is basically a URL link, you cannot have options like radio buttons, drop downs, check boxes or text inputs, so that's not going to help your cause.   That's the best help I can offer - you may want to search the Wordpress community and/or support for options.

Login to Me Too

cagross
Contributor
Contributor

OK thanks for that.  Let me do some research into what's causing the issue.  Like I mentioned, I got it working in Codepen.  That's a good sign.  At least, it will help people in another forum figure out why there is a discrepancy between the Codepen and my site.

 

If we can, let's leave this open for a few days (maybe a week).  I'll report back here when I find out.

 

 

Login to Me Too

Haven't Found your Answer?

It happens. Hit the "Login to Ask the community" button to create a question for the PayPal community.