Databases
StackOverflow2013
Postsdbo
PO"Amount" field not passing through to PayPal
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO"Amount" field not passing through to PayPal
    text
    copied!<p>I'm developing a site for a non-profit client that includes a custom donation form. The form includes options for the user to select a pre-defined donation amount, or enter their own amount, and then click "donate," which takes them to PayPal. I've confirmed that the actual donate button works via three successful tests through my Sandbox accounts. I also am able to confirm that the custom form correctly calculates the selected amounts and populates the value of the "amount" field because I'm able to log those results in the console. The "amount" field, as best I can tell, is in line with PayPal's guidelines. However, the amount will not pass through to PayPal. </p> <p>The code for the front end: </p> <pre><code>&lt;div id="main-donate-container" class="form_container"&gt; &lt;form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top"&gt; &lt;div id="small-button-container" class=""&gt; &lt;div id="twenty-five" class="lightred general_button blue_button form_small_button selected_amount select_state_color_btn"&gt;&lt;span&gt;25&lt;/span&gt;&lt;/div&gt; &lt;div id="fifty" class="general_button blue_button form_small_button select_state_color_btn"&gt;&lt;span&gt;50&lt;/span&gt;&lt;/div&gt; &lt;div id="one-hundred" class="general_button blue_button form_small_button select_state_color_btn"&gt;&lt;span&gt;100&lt;/span&gt;&lt;/div&gt; &lt;div id="two-hundred" class="general_button blue_button form_small_button select_state_color_btn"&gt;&lt;span&gt;200&lt;/span&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="other-amount" class="general_button blue_button form_other_amount"&gt; &lt;span&gt;&lt;img src="&lt;?php $root ?&gt;/images/close.png"/&gt;&lt;/span&gt; &lt;label&gt;$&lt;/label&gt;&lt;input class="whitetext" type="text" name="other-amount" value="143"&gt; &lt;/div&gt; &lt;div id="other-amount-button" class="general_button blue_button select_state_color_btn"&gt; &lt;span&gt;OTHER&lt;/span&gt; &lt;/div&gt; &lt;input id="donation-amount" type="hidden" name="amount" value=""&gt; &lt;input type="hidden" name="cmd" value="_s-xclick"&gt; &lt;input type="hidden" name="hosted_button_id" value="(PayPal key here)"&gt; &lt;input type="submit" class="general_button blue_button submit_button" id="submit" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" value="Donate!"&gt; &lt;img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1"&gt; &lt;/form&gt; &lt;/div&gt; &lt;!-- end main donate container --&gt; </code></pre> <p>And the JavaScript behind the scenes: </p> <pre><code>//initialize variables to track donation amounts var donation_amount = 25; var previous_donation = 0; //format the amounts displayed in buttons as US currency $('#donate-content .form_small_button span').formatCurrency({roundToDecimalPlace:0}); $('#donate-content #other-amount-button').on('click',function(){ //save the previously selected donation amount in case use cancels out of "other" previous_donation = donation_amount; //set new donation amount to the default "other" amount donation_amount = $('#other-amount input').val(); //change background of other button and other amount field to #FFB310 and show the other amount field $(this).css('background-color','#BB6098'); $('#donate-content #other-amount').css('background-color','#BB6098').show(); $('#donate-content #other-amount-button').addClass('selected_amount'); //format the amounts displayed in other amount field for US currency $('#donate-content #other-amount input').formatCurrency({symbol:'',roundToDecimalPlace:0}); $('#donate-content #other-amount input').select(); }); $('#donate-content #other-amount span').on('click',function(){ donation_amount = previous_donation; $('#donate-content #other-amount-button').css('background-color','rgba(67, 80, 164, .9)').removeClass('selected_amount');; $('#donate-content #other-amount').hide(); $('#donate-content #other-amount input').val('143'); }); $('#donate-content #other-amount input').keyup(function(){ donation_amount = $(this).val(); }); $('#donate-content #other-amount input').keypress(function(event){ return isNumber(event); }); $('#donate-content #twenty-five').on('click',function(){ $('#donate-content .select_state_color_btn').css('background-color','rgba(67, 80, 164, .9)').removeClass('selected_amount'); $(this).addClass('selected_amount').css('background-color','#C25252'); donation_amount = $(this).text(); donation_amount = donation_amount.slice(1); }); $('#donate-content #fifty').on('click',function(){ $('#donate-content .select_state_color_btn').css('background-color','rgba(67, 80, 164, .9)').removeClass('selected_amount'); $(this).addClass('selected_amount').css('background-color','#CA9859'); donation_amount = $(this).text(); donation_amount = donation_amount.slice(1); }); $('#donate-content #one-hundred').on('click',function(){ $('#donate-content .select_state_color_btn').css('background-color','rgba(67, 80, 164, .9)').removeClass('selected_amount'); $(this).addClass('selected_amount').css('background-color','#7E0B80'); donation_amount = $(this).text(); donation_amount = donation_amount.slice(1); }); $('#donate-content #two-hundred').on('click',function(){ $('#donate-content .select_state_color_btn').css('background-color','rgba(67, 80, 164, .9)').removeClass('selected_amount'); $(this).addClass('selected_amount').css('background-color','#59ABB7'); donation_amount = $(this).text(); donation_amount = donation_amount.slice(1); }); $('#donate-content .select_state_color_btn').hover( function(){ if ($(this).hasClass('selected_amount')){ var color = $(this).css('background-color'); $(this).css('background-color',color); } else{ $(this).css('background-color','#ccc'); } }, function(){ if ($(this).hasClass('selected_amount')){ var color = $(this).css('background-color'); $(this).css('background-color',color); } else{ $(this).css('background-color','rgba(67, 80, 164, .9)'); } }); $('#donate-content #other-amount-button').hover( function(){ if ($(this).hasClass('selected_amount')){ var color = $(this).css('background-color'); $(this).css('background-color',color); } else{ $(this).css('background-color','#ccc'); } }, function(){ if ($(this).hasClass('selected_amount')){ var color = $(this).css('background-color'); $(this).css('background-color',color); } else{ $(this).css('background-color','rgba(67, 80, 164, .9)'); } }); $('#donate-content #submit').hover( function(){ $(this).css('background-color','#96BA5F'); }, function(){ $(this).css('background-color','rgba(67, 80, 164, .9)'); }); $('#donate-content #submit').on('click',function(e){ $('#donate-content #donation-amount').val(donation_amount); </code></pre> <p>Can anyone point what I'm sure is the small detail that I'm missing? </p> <p>Thanks in advance!</p> <p>UPDATE: I've made certain that the "amount" variable has been added to the hosted button on PayPal's end, but still no joy. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload