A smart PayPal form

January 9th, 2014

I created this smart PayPal form for Trekkers.org. See trekkers.org/donate/. It lets the user switch back and forth between recurring and one-time donations. I couldn’t find a free plugin that can do this.

If this is installed on a WordPress or other CMS site, it is better set up as a plugin. A site owner does not need to lose all functionality just because he/she switches themes.


<div class="donationContainer">
    <form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" id="recurringHiddenInputs"> 
        <input type="hidden" name="item_name" value="Donation"> 
        <input type="hidden" name="business" value="donations@non-profit.org"> 
        <input type="hidden" name="lc" value="US"> 
        <input type="hidden" name="no_shipping" value="1"> 
        <input type="hidden" name="currency_code" value="USD"> 
        <input type="hidden" name="return" value="http://your-site.org/thankyou/"> 
        <input type="hidden" name="p3" value="1" class="recurring"> 
        <input type="hidden" name="src" value="1" class="recurring"> 
        <input type="hidden" name="no_note" value="0" class="recurring"> 
        <input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest" class="recurring"> 
        <table>
            <tbody>
                <tr>
                    <td colspan="2" style="padding: 0 1px;"><h4>Donate by Paypal</h4></td>
                </tr>
                <tr>
                    <td>Please select <span>*</span></td>
                    <td>
                        <div class="radio-choice">
                            <input type="radio" name="cmd" value="_xclick-subscriptions" id="severalTimes" checked>
                            <label for="severalTimes">Recurring Donation</label>
                            <input type="radio" name="cmd" value="_donations" id="oneTime">
                            <label for="oneTime">One-time Donation</label>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="firstcol"><label for="amountInput">Donation amount ($) <span>*</span></label></td>
                    <td id="donationAmount"><input type="text" name="a3" placeholder="25" class="recurring" id="amountInput"></td>
                </tr>
                <tr id="recurringFrequency">
                    <td class="recurring"><label for="frequency">Frequency</label></td>
                    <td class="recurring"><select name="t3" id="frequency">
                        <option value="M" selected="selected">Monthly</option>
                        <option value="Y">Yearly</option>
                    </select></td>
                </tr>
                <tr>
                    <td><input type="hidden" name="on0" value="Program"> <label for="os0">Gift made to:</label></td>
                    <td><select name="os0" id="os0">
                        <option value="General Operating Budget">General Operating Fund</option>
                        <option value="Scholarship Fund">Scholarship Fund</option>
                        <option value="Equipment Fund">Equipment Fund</option>
                        <option value="Bus Maintenance">Bus Maintenance Fund</option>
                    </select></td>
                </tr>
                <tr>
                    <td><input type="hidden" name="on1" value="Dedicated to"> <label for="os1">Donation made<br>in honor of:</label></td>
                    <td><input name="os1" type="text" placeholder="name" id="os1"></td>
                </tr>
                <tr>
                    <td colspan="2" class="paypal-button">
                    <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_LG.gif" name="submit" alt="Donate by PayPal"></td>
                </tr>
                <tr>
                    <td colspan="2" class="required"><span>* required</span></td>
                </tr>
            </tbody>
        </table>
    </form>
</div>

It requires this bit of jQuery to switch the forms:


jQuery(document).ready(function($) {
    $("input[id='oneTime']").change(function() {
        if ($(this).is(':checked')) {
            $('.recurring').remove();
            $('#donationAmount').append('<input type="text" name="amount" placeholder="25" class="oneTime" id="amountInput">');
        }
    });
    $("input[id='severalTimes']").change(function() {
        if ($(this).is(':checked')) {
            $('.oneTime').remove();
            $('#recurringFrequency').append('<td class="recurring"><label for="frequency">Frequency</label></td>
                <td class="recurring"><select name="t3" id="frequency">
                <option value="M" selected="selected">Monthly</option>
                <option value="Y">Yearly</option></select></td>');
            $('#recurringHiddenInputs').append(' <input type="hidden" name="p3" value="1" class="recurring">
                <input type="hidden" name="src" value="1" class="recurring">
                <input type="hidden" name="no_note" value="0" class="recurring">
                <input type="hidden" name="bn" value="PP-DonationsBF:btn_donateCC_LG.gif:NonHostedGuest" class="recurring"> ');
            $('#donationAmount').append('<input type="text" name="a3" placeholder="25" class="recurring">');
        }
    })
});

Leave a Reply

Your email address will not be published. Required fields are marked *