Donate buttons with suggested amounts on website

bynx
Contributor
Contributor

I've got some donate buttons that I created on my client's site — I would love for them to retain the look of this image provided. I've seen the idea for radio buttons, but honestly my client would shoot me if I made anything that looked like that.  How would I go about making a PayPal donation page work with this?  Thanks for your time!

Login to Me Too
1 ACCEPTED SOLUTION

Accepted Solutions
Solved

Anonymous_User
Not applicable

For learning purposes, I put together an example of what I was referring to - see the code below - it's basically 5 different Donate item buttons put together to look like one form.   As there's always more than one way to do something, here's just one example.   Note: Replace "business" value with your PayPal Email Address or your Merchant Account ID to test.

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

<head>

<title>Basic Donation Example</title>

<!-- START META TAG SECTION -->
<meta name="Description" content="">
<meta name="KeyWords" content="">
<meta charset="UTF-8">
<!-- END META TAG SECTION -->

<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>


</head>

<body>


<table border="0"  width="30%">
<tr><!-- Row 1 -->

<td>
<h1>Widget Donations</h1>
</td><!-- Col 1 -->

</tr>
</table>


<table border="0"  width="30%">
<tr><!-- Row 1 -->

<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-10">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$10.00">
</form>
</div>
</td><!-- Col 1 -->


<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-20">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="20.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$20.00">
</form>
</div>
</td><!-- Col 2 -->


<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-30">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="30.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$30.00">
</form>
</div>
</td><!-- Col 3 -->


<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-50">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="50.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$50.00">
</form>
</div>
</td><!-- Col 4 -->


<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-00">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$ Any Amount $">
</form>
</div>
</td><!-- Col 5 -->


</tr>
</table>

</body>
</html>

 

 

View solution in original post

Login to Me Too
5 REPLIES 5

bynx
Contributor
Contributor

Sorry, it looks like if you're logged out of paypal it isn't displaying the image...  so here's a google drive link to the screenshot

Login to Me Too

Anonymous_User
Not applicable

What you have in mind is possible - one approach would be is to use basically use the same donation item button code behind the scenes for each graphic - the only difference would be amount.   For example, if you're offering 4 different amounts plus one that's custom, you would actually have 5 Donation Item buttons behind the scenes but all the donor sees is 5 options.   If you incorporate a table to arrange the graphic display and there's a separate donation button behind each graphic - there you go!   Note, you're just basically substituting your custom graphic in place of the PayPal donation graphic and lining them all up with a HTML table.

Login to Me Too
Solved

Anonymous_User
Not applicable

For learning purposes, I put together an example of what I was referring to - see the code below - it's basically 5 different Donate item buttons put together to look like one form.   As there's always more than one way to do something, here's just one example.   Note: Replace "business" value with your PayPal Email Address or your Merchant Account ID to test.

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

<head>

<title>Basic Donation Example</title>

<!-- START META TAG SECTION -->
<meta name="Description" content="">
<meta name="KeyWords" content="">
<meta charset="UTF-8">
<!-- END META TAG SECTION -->

<style>
.button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}
</style>


</head>

<body>


<table border="0"  width="30%">
<tr><!-- Row 1 -->

<td>
<h1>Widget Donations</h1>
</td><!-- Col 1 -->

</tr>
</table>


<table border="0"  width="30%">
<tr><!-- Row 1 -->

<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-10">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="10.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$10.00">
</form>
</div>
</td><!-- Col 1 -->


<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-20">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="20.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$20.00">
</form>
</div>
</td><!-- Col 2 -->


<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-30">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="30.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$30.00">
</form>
</div>
</td><!-- Col 3 -->


<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-50">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="50.00">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$50.00">
</form>
</div>
</td><!-- Col 4 -->


<td>
<div align="center">
<form target="_self" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_donations">
<!-- 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_name" value="Widget Donations">
<input type="hidden" name="item_number" value="W-D-00">
<input type="hidden" name="tax" value="0">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="amount" value="">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHosted">
<input type="submit" name="submit" class="button" value="$ Any Amount $">
</form>
</div>
</td><!-- Col 5 -->


</tr>
</table>

</body>
</html>

 

 

Login to Me Too

bynx
Contributor
Contributor

You are probably my favorite person in the whole universe right now.  Thank you so much!!!!!

Login to Me Too

Anonymous_User
Not applicable

Haven't Found your Answer?

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