Paypal buy now button - dynamic price by dropdown - html

In the following snippet, I'd like it to change prices, depending on which style is selected by the user.
So for style 1, prices are: 1$, 2$ and 3$.
For style 2, price are: 4$, 5$ and 6$.
And for style 3, prices are: 7$, 8$ and 9$.
How can I modify that code to make it change prices, depending on which style is chosen?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="testtest#hotmail.com">
<input type="hidden" name="lc" value="BM">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<table>
<tr>
<td>
<input type="hidden" name="on1" value="Which style?">Which style?</td>
</tr>
<tr>
<td>
<select name="os1">
<option value="Style 1">Style 1</option>
<option value="Style 2">Style 2</option>
<option value="Style 2">Style 2</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="on0" value="How many?">How many?</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="10 -">10 - $1.00 USD</option>
<option value="100 -">100 - $2.00 USD</option>
<option value="1000 -">1000 - $3.00 USD</option>
</select>
</td>
</tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="10 -">
<input type="hidden" name="option_amount0" value="1.00">
<input type="hidden" name="option_select1" value="100 -">
<input type="hidden" name="option_amount1" value="2.00">
<input type="hidden" name="option_select2" value="1000 -">
<input type="hidden" name="option_amount2" value="3.00">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>


You can hook the Change event in jQuery and update the values accordingly.
The script included below updates your hidden field values and changes the text of the second dropdown.
You'll need to include the following line and the script either in the <head> section of your website or before the closing body tag </body>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Script:
$('select[name=os1]').change(function() {
var style = $( this ).val();
var price1, price2, price3;
if(style == "Style 1"){
price1 = "1.00";
price2 = "2.00";
price3 = "3.00";
} else if(style == "Style 2"){
price1 = "4.00";
price2 = "5.00";
price3 = "6.00";
} else if (style == "Style 3"){
price1 = "7.00";
price2 = "8.00";
price3 = "9.00";
}
$('select[name=os0] option[value=10]').text("10 - $" + price1 + " USD");
$('select[name=os0] option[value=100]').text("100 - $" + price2 + " USD");
$('select[name=os0] option[value=1000]').text("1000 - $" + price3 + " USD");
$("input[name=option_amount0]").val(price1);
$("input[name=option_amount1]").val(price2);
$("input[name=option_amount2]").val(price3);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="testtest#hotmail.com">
<input type="hidden" name="lc" value="BM">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<table>
<tr>
<td>
<input type="hidden" name="on1" value="Which style?">Which style?</td>
</tr>
<tr>
<td>
<select name="os1">
<option value="Style 1">Style 1</option>
<option value="Style 2">Style 2</option>
<option value="Style 3">Style 3</option>
</select>
</td>
</tr>
<tr>
<td>
<input type="hidden" name="on0" value="How many?">How many?</td>
</tr>
<tr>
<td>
<select name="os0">
<option value="10">10 - $1.00 USD</option>
<option value="100">100 - $2.00 USD</option>
<option value="1000">1000 - $3.00 USD</option>
</select>
</td>
</tr>
</table>
<label id="output"></label>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="10">
<input type="hidden" name="option_amount0" value="1.00">
<input type="hidden" name="option_select1" value="100">
<input type="hidden" name="option_amount1" value="2.00">
<input type="hidden" name="option_select2" value="1000">
<input type="hidden" name="option_amount2" value="3.00">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
Note - I changed the option values of os0 from 100 - to 100 and so on.

Related

How do I add extra "values" to a PayPal button

I have the following code, which works fine as is. It shows the price at checkout, but I also need it to include a size in the description. How do I add this extra value please?
EDIT: Also, would need to add different shipping costs depending on which size is ordered.
<form id="for-sale-form" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" style="margin: 0px;">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="paypal#your-web-domain.com">
<input type="hidden" name="item_name" value="<?php echo $artwork; ?>">
<input type="hidden" name="custom" value="">
<input type="hidden" name="return" value="http://your-web-domain.com/thanks-payment.htm">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="quanity" value="1">
<input type="hidden" name="add" value="1">
<select name="amount">
<option value="499.99">Large £499.99</option>
<option value="49.99">Medium £49.99</option>
<option value="4.99">Small £4.99</option>
</select><br>
<input name="bn" type="hidden" value="PP-BuyNowBF">
<input type="hidden" name="add" value="1">
<input type="hidden" name="currency_code" value="GBP">
<input type="image" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" alt="Add to Cart">
<img alt="" width="1" height="1" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif">
</form>

PayPal form creation

I'm having some trouble with a form I'm trying to create in PayPal for a WordPress website. It's a form that allows for different types of registrations and quantities - both of these work. At the end, my client also wants an option to donate any amount - this is not working.
The code at the bottom is only adding the amount entered as a 'note' to paypal, not as an actual monetary value to the amount being paid. I've tried 'name="amount"' as well.
<table>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input name="business" type="hidden" value="EMAIL" />
<input name="cmd" type="hidden" value="_xclick" />
<input name="item_name" type="hidden" value="Camper Registration" />
<input name="currency_code" type="hidden" value="USD" />
<!-- Provide a dropdown menu option field with quantity. -->
<tr>
<td><input type="hidden" value="Quantity" />How Many Campers?</td>
<td><select name="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td></tr>
<!-- Provide a dropdown menu option field with prices. -->
<tr>
<td><input name="on1" type="hidden" value="Payment Type" />Payment Amount</td>
<td><select name="os1">
<option value="deposit">Nonrefundable Deposit $100</option>
<option value="Before1/1">(Before 1/1/15) $210</option>
<option value="Before4/1">(Before 4/1/15) $225</option>
<option value="After4/1">(After 4/1/15) $250</option>
</select></td></tr>
<!-- Specify the price that PayPal uses for each option. -->
<input name="option_index" type="hidden" value="1" />
<input name="option_select0" type="hidden" value="deposit" />
<input name="option_amount0" type="hidden" value="100" />
<input name="option_select1" type="hidden" value="Before1/1" />
<input name="option_amount1" type="hidden" value="210" />
<input name="option_select2" type="hidden" value="Before4/1" />
<input name="option_amount2" type="hidden" value="225" />
<input name="option_select3" type="hidden" value="After4/1" />
<input name="option_amount3" type="hidden" value="250" />
<!-- Provide place for other donations. -->
<tr>
<td>Other Amount:</td>
<input type="hidden" name="on0" value="Other Amount">
<td><input name="os0" type="text" value="0"></td></tr>
<!-- Provide place for notes. -->
<tr>
<td>Child's Name(s) and Comments:</td>
<input type="hidden" name="on3" value="Notes">
<td><textarea name="os3" rows="4" cols="50" wrap></textarea></td></tr>
</table>
<!-- Display the payment button. -->
<input alt="PayPal - The safer, easier way to pay online" name="submit" src="https://www.paypalobjects.com/en_US/i/btn/btn_paynow_LG.gif" type="image" />
<img src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" alt="" width="1" height="1" border="0" />
</form>
this is the code in question:
<tr>
<td>Other Amount:</td>
<input type="hidden" name="on0" value="Other Amount">
<td><input name="os0" type="text" value="0"></td></tr>

How to allow the option of increasing the tickets purchased

Ok, the code below works. But the thing is that it doesn't allow the user to alter the amount purchased.
I'm trying to figure out how to have the user, once they've purchased a ticket and get to paypal page, to be able to alter the amount of tickets they would like to have.
As it is, once you land on the paypal page, it shows what you purchased, and that's it, pretty much.
Any advice?
EDIT
If anyone needs an example of what I'm talking about, here's one: Paying for multiple items (at once) via paypal
Look at the image at bottom. Do you see the quantity column? That's what I meant. But when I tried what they did in that one, it doesn't work. I think it's because in that one, it uses _cart, wheres mine is _donation?
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Specify a Donate button. -->
<input type="hidden" name="cmd" value="_donations">
<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Name Of Business">
<input type="hidden" name="item_number" value="Tickets">
<select name="amount">
<optgroup label="Sponsorship">
<option value="15000" name="platinum">$15,000 - Platinum Sponsorship</option>
<option value="10000">$10,000 - Gold Sponsorship</option>
<option value="5000">$5000 - Silver Sponsorship</option>
<option value="2500">$2,500 - Bronze Sponsorship</option>
</optgroup>
<optgroup label="Individual Seating">
<option value="500">$500 per seat</option>
</optgroup>
<optgroup label="Program Book Tribute Journal Ad">
<option value="600">$600 - Half Page</option>
<option value="1000">$1000 - Full Page</option>
</optgroup>
</select>
<input type="hidden" name="currency_code" value="USD">
<br /><br />
<!-- Display the payment button. -->
<input type="image" name="submit" border="0"
src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"
alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1"
src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
EDIT TWO
Ok, kinda confused about how to get the item increments to show up.
Advice would be appreciated.
These are the changes I've added to the post above:
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
Then to have the increment ability added ... I'm really confused by these lines and how to make it work for mine.
<input type="hidden" name="item_name_1" value="Item Name 1">
<input type="hidden" name="amount_1" value="1.00">
So, for the first item in my drop-down box (ie, the platinum ticket), I've modified it slightly, adding the name value:
<option value="15000" name="platinum">$15,000 - Platinum Sponsorship</option>
And then,
<input type="hidden" name="item_name_1" value="platinum">
<input type="hidden" name="amount_1" value="15000.00">
But as far as I can tell, that doesn't allow the user to change the quantity to what they want.
End of EDIT TWO
EDIT THREE Based on Jared's code beneath but posting a full version of it.
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Identify your business so that you can collect the payments. -->
<input type="hidden" name="business" value="BLAHBLAH">
<!-- Specify a Donate button. -->
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Corporation">
<input type="hidden" name="item_number" value="Ticket Purchase">
<select name="amount">
<optgroup label="Sponsorship">
<option value="Platinum Sponsorship">$15,000 - Platinum Sponsorship</option>
<option value="Gold Sponsorship">$10,000 - Gold Sponsorship</option>
</optgroup>
</select>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="Platinum Sponsorship">
<input type="hidden" name="option_amount0" value="15000.00">
<input type="hidden" name="option_select1" value="Gold Sponsorship">
<input type="hidden" name="option_amount1" value="10000.00">
<input type="hidden" name="option_index" value="0">
<br /><br />
<!-- Display the payment button. -->
<input type="image" name="submit" border="0"
src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"
alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1"
src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>
All I get from this form is Your shopping cart is empty.
END OF EDIT THREE
EDIT FOUR
1. <input type="hidden" name="item_name" value="Donation">
2. <input type="hidden" name="button_subtype" value="products">
3. <input type="hidden" name="no_note" value="1">
4. <input type="hidden" name="no_shipping" value="2">
5. <input type="hidden" name="currency_code" value="USD">
6. <input type="hidden" name="weight_unit" value="lbs">
7. <input type="hidden" name="add" value="1">
8. <input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
Do we need 2, 3, 4, & 6?
I get one, it's a way to label it, right?
2, what is button_subtype?
3, that's to say that there is no more additional info included, right?
4, is that needed? it's just purchase of a ticket online.
5, obviously needed.
6, is weight_unit really needed? as mentioned previously, it's just an online ticket.
7, is? I'm guessing a way for the incrementation to happen?
8, is to denote that the button is not hosted from paypal, right?
You don't have to answer any of those questions, and your answer has been accepted. Just wondering, is all.
Thank you again, Jared.
END OF EDIT FOUR

<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="Your Email Here">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Donation">
<input type="hidden" name="button_subtype" value="products">
<input type="hidden" name="no_note" value="1">
<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="weight_unit" value="lbs">
<input type="hidden" name="add" value="1">
<input type="hidden" name="bn" value="PP-ShopCartBF:btn_cart_LG.gif:NonHosted">
<table>
<tr><td><input type="hidden" name="on0" value="Sponsorship"></td></tr><tr><td><select name="os0">
<optgroup label="Sponsorship">
<option value="Platinum Sponsorship">Platinum Sponsorship $15,00.00 USD</option>
<option value="Gold Sponsorship">Gold Sponsorship $10,000.00 USD</option>
</optgroup>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="Platinum Sponsorship">
<input type="hidden" name="option_amount0" value="15000.00">
<input type="hidden" name="option_select1" value="Gold Sponsorship">
<input type="hidden" name="option_amount1" value="10000.00">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
This is how your button should look, this is from paypal.

The donation button does not allow you to use a quanity because its intended for a donation, not a purchase. You can, however have the function of the add to cart button but appear as a donation button. Simply:
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<!-- Specify a Add to Cart button. -->
<input type="hidden" name="cmd" value="_cart">
<!-- Specify details about the contribution -->
<input type="hidden" name="item_name" value="Name Of Business">
<input type="hidden" name="item_number" value="Tickets">
<select name="amount">
<optgroup label="Sponsorship">
<option value="15000" name="platinum">$15,000 - Platinum Sponsorship</option>
<option value="10000">$10,000 - Gold Sponsorship</option>
<option value="5000">$5000 - Silver Sponsorship</option>
<option value="2500">$2,500 - Bronze Sponsorship</option>
</optgroup>
<optgroup label="Individual Seating">
<option value="500">$500 per seat</option>
</optgroup>
<optgroup label="Program Book Tribute Journal Ad">
<option value="600">$600 - Half Page</option>
<option value="1000">$1000 - Full Page</option>
</optgroup>
</select>
<input type="hidden" name="currency_code" value="USD">
<br /><br />
<!-- Display the Donation payment button. -->
<input type="image" name="submit" border="0"
src="https://www.paypal.com/en_US/i/btn/btn_donate_LG.gif"
alt="PayPal - The safer, easier way to pay online">
<img alt="" border="0" width="1" height="1"
src="https://www.paypal.com/en_US/i/scr/pixel.gif" >
</form>

<input type="hidden" name="Ticket"><select name="os0">
<optgroup label="Sponsorship">
<option value="Platinum Sponsorship">$15,000 - Platinum Sponsorship</option>
<option value="Gold Sponsorship">$10,000 - Gold Sponsorship</option>
</optgroup>
</select>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="Platinum Sponsorship">
<input type="hidden" name="option_amount0" value="15000.00">
<input type="hidden" name="option_select1" value="Gold Sponsorship">
<input type="hidden" name="option_amount1" value="10000.00">
<input type="hidden" name="option_index" value="0">

Paypal buy it now button not doing anything

Im sure this is obvious but I can't seem to get the auto-generated paypal code to work with my site. I see no debug errors. The button just does nothing when it is clicked. Any help would be appreciated
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<div class="background_subpages">
<div id="shirtsBG" class="RoundBorder">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="xxxx#gmail.com">
<input type="hidden" name="lc" value="US">
<input type="hidden" name="item_name" value="Green">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<table>
<tr><td><input type="hidden" name="on0" value="Sizes">Sizes</td></tr><tr><td><select name="os0">
<option value="Small">Small $11.99 USD</option>
<option value="Medium">Medium $11.99 USD</option>
<option value="Large">Large $11.99 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="option_select0" value="Small">
<input type="hidden" name="option_amount0" value="11.99">
<input type="hidden" name="option_select1" value="Medium">
<input type="hidden" name="option_amount1" value="11.99">
<input type="hidden" name="option_select2" value="Large">
<input type="hidden" name="option_amount2" value="11.99">
<input type="hidden" name="option_index" value="0">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>

It was because I was using a form within a form. This code in my page load did the trick
if (!IsPostBack)
{ }
else { }
Form.Action = "https://www.paypal.com/cgi-bin/webscr";
Form.Method = "post";

Paypal form how to change text size

Hi there i got my paypal button which i made on the website. Now its all working fine but the text size is really small for both the drop down box and the text field. Anyway i can change this?
Code which has been generated for me on the paypal website.
<div class="paypal">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_xclick">
<input type="hidden" name="business" value="subonly#immaculateclothing.com">
<input type="hidden" name="lc" value="GB">
<input type="hidden" name="item_name" value="Bjj immaculate competition">
<input type="hidden" name="amount" value="30.00">
<input type="hidden" name="currency_code" value="GBP">
<input type="hidden" name="button_subtype" value="services">
<input type="hidden" name="no_note" value="0">
<input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
<table>
<tr><td><input type="hidden" name="on0" value="Weight Category">Weight Category</td></tr><tr><td><select name="os0">
<option value="-60kg">-60kg </option>
<option value="-65kg (Female Only)">-65kg (Female Only) </option>
<option value="+65kg (Female Only)">+65kg (Female Only) </option>
<option value="-70kg">-70kg </option>
<option value="-80kg">-80kg </option>
<option value="-90kg">-90kg </option>
<option value="-100kg">-100kg </option>
<option value="+100kg">+100kg </option>
</select> </td></tr>
<tr><td><input type="hidden" name="on1" value="Belt Category:">Belt Category:</td></tr><tr><td><select name="os1">
<option value="White">White </option>
<option value="Blue">Blue </option>
<option value="Purple">Purple </option>
<option value="Brown">Brown </option>
<option value="Black">Black </option>
</select> </td></tr>
<tr><td><input type="hidden" name="on2" value="Age division">Age division</td></tr><tr><td><select name="os2">
<option value="Adult (16 -35)">Adult (16 -35) </option>
<option value="Master (36+)">Master (36+) </option>
</select> </td></tr>
<tr><td><input type="hidden" name="on3" value="Team Name:">Team Name:</td></tr><tr><td><input type="text" name="os3" maxlength="200"></td></tr>
</table>
<input type="image" src="https://www.paypalobjects.com/en_US/GB/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
<img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
Thanks for all the help

Use the font-size property on your select and input tags to adjust the size of the text in the fields.
select {
font-size: 20px;
}
input {
font-size: 20px;
}
JSfiddle
Or, if you are just trying to adjust the labels for the fields, use the same font-size property as above, but change your selector to .paypal
.paypal {
font-size: 20px;
}