カスタム寄付フォームを含む非営利クライアント向けのサイトを開発しています。このフォームには、ユーザーが事前に定義された寄付金額を選択するか、独自の金額を入力して [寄付] をクリックすると、PayPal に移動するオプションが含まれています。サンドボックス アカウントでの 3 回のテストで、実際の寄付ボタンが機能することを確認しました。カスタム フォームが選択した金額を正しく計算し、「金額」フィールドの値を入力していることも確認できます。これらの結果をコンソールに記録できるからです。「金額」フィールドは、私が知る限り、PayPal のガイドラインに沿っています。ただし、金額は PayPal に渡されません。
フロントエンドのコード:
<div id="main-donate-container" class="form_container">
<form action="https://www.sandbox.paypal.com/cgi-bin/webscr" method="post" target="_top">
<div id="small-button-container" class="">
<div id="twenty-five" class="lightred general_button blue_button form_small_button selected_amount select_state_color_btn"><span>25</span></div>
<div id="fifty" class="general_button blue_button form_small_button select_state_color_btn"><span>50</span></div>
<div id="one-hundred" class="general_button blue_button form_small_button select_state_color_btn"><span>100</span></div>
<div id="two-hundred" class="general_button blue_button form_small_button select_state_color_btn"><span>200</span></div>
</div>
<div id="other-amount" class="general_button blue_button form_other_amount">
<span><img src="<?php $root ?>/images/close.png"/></span>
<label>$</label><input class="whitetext" type="text" name="other-amount" value="143">
</div>
<div id="other-amount-button" class="general_button blue_button select_state_color_btn">
<span>OTHER</span>
</div>
<input id="donation-amount" type="hidden" name="amount" value="">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="(PayPal key here)">
<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!">
<img alt="" border="0" src="https://www.sandbox.paypal.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div> <!-- end main donate container -->
舞台裏の JavaScript:
//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);
誰かが私が見逃している小さな詳細であると確信していることを指摘できますか?
前もって感謝します！
更新: 「金額」変数が PayPal 側のホストされたボタンに追加されていることを確認しましたが、それでも満足できません。