devot:eeDevoted to ExpressionEngine

Currently, supported gateways include: Authorize.net.

REQUIRES:
      EE 1.6.x
      FreeForm 3.0.3
      fEEdback 1.1
      jQuery for the Control Panel

Extension Hook: freeform_module_insert_end

Control Panel Usage
The payEE control panel page has a list of options and fields available for the selected payment gateway. The field name settings determine which submitted form field will be used to get the data to fill the payment gateway request.

Front End Usage
The following is a simple html form that has all the necessary fields to make one time and automated recurring donations through Authorize.net. The payment gateway functionality is activated by the hidden form field called 'authorizenet' at the top of the form. Though Authorize.net is the only gateway currently available, more will be added soon. Automated recurring billing is activated by including the authnet_arb_recurring field (or whatever you decide to name it in the control panel). The ARB action taken is determined by the 'authnet_arb_action' field.

The response data can be accessed on a return page by using the fEEdback module's {exp:feedback:response_code} and {exp:feedback:response_text} tags.

Examples

<!--Sample Donation Form-->
{exp:freeform:form form:id="donation_form" collection="Donations" notify="donate@email.com" require_ip="yes" required="" return="/donate-thank-you/%%entry_id%%" template="donate"}
<input type='hidden' name='authorizenet' value='true' >

<h3>Donor Information</h3>

<label class="label" for="authnet_first_name" >Cardholder First Name</label>
<input class="input" type="text" name="authnet_first_name" id="authnet_first_name" />

<label class="label" for="authnet_last_name" >Cardholder Last Name</label>
<input class="input" type="text" name="authnet_last_name" id="authnet_last_name" />

<label class="label" for="authnet_address">Address</label>
<input class="input" type="text" name="authnet_address" id="authnet_address" value="" /><br/>

<label class="label" for="authnet_city">City</label>
<input class="input" type="text" name="authnet_city" id="authnet_city" value="" /><br/>

<label class="label" for="authnet_state">State</label>
<select id="authnet_state" name="authnet_state" value="WV" >
    {state_options}
    <!--state_options is defined below in the appendix-->
</select><br/>

<label class="label" for="authnet_zip">Zip</label>
<input class="input" type="text" name="authnet_zip" id="authnet_zip" value="" /><br/>

<label class="label" for="authnet_phone">Phone</label>
<input class="input" type="text" name="authnet_phone" id="authnet_phone" value="" /><br/>

<label class="label" for="authnet_email">E-Mail</label>
<input class="input" type="text" name="authnet_email" id="authnet_email" value="" /><br/>

<h3>Method of Payment</h3>

<label class="label" for="authnet_card_type" >Credit Card Type</label>
<label class="radio" for="cc_visa" >Visa</label>
<input type="radio" name="authnet_card_type" id="cc_visa" value="visa" />
<label class="radio" for="cc_mastercard" >Mastercard</label>
<input type="radio" name="authnet_card_type" id="cc_mastercard" value="mastercard" />
<label class="radio" for="cc_discover" >Discover</label>
<input type="radio" name="authnet_card_type" id="cc_discover" value="discover" />
<label class="radio" for="cc_amex" >American Express</label>
<input type="radio" name="authnet_card_type" id="cc_amex" value="amex" /><br/>

<label class="label" for="authnet_card_num" >Card Number</label>
<input class="input" type="text" name="authnet_card_num" id="authnet_card_num" /><br/>

<!--You can also use selects for the expiration date. The selected date, however, must be entered into the authnet_exp_date field via javascript before submission.-->
<label class="label" for="authnet_exp_date" >Expiration Date</label>
<input class="input" type="text" name="authnet_exp_date" id="authnet_exp_date" /><br/>

<label class="label" for="authnet_card_code" >Card Security Code</label>
<input class="input" type="text" name="authnet_card_code" id="authnet_card_code" /><br/>

<label class="label" for="authnet_amount" >Amount $</label>
<input class="input" type="text" name="authnet_amount" id="authnet_amount"/><br/>

<label class='label' for='one_time' >I want to make a one-time donation</label>
<input type="radio" id='one_time' name='donation_recurring' onchange='toggleRecurringDiv();'/><br/>
<label class='label' for='recurring' >I want to make a recurring donation</label>
<input type="radio" id='recurring' name='donation_recurring' onchange='toggleRecurringDiv();' />

<!--The authnet_recurring field determines whether a payment is recurring or not-->
<input type='hidden' id='authnet_arb_recurring' name='authnet_arb_recurring' value='0' /><br/>
<input type='hidden' id='authnet_arb_action' name='authnet_arb_action' value='create' /><br/>

<input type='hidden' id='authnet_unit' name='authnet_unit' value='months' />
<input type='hidden' id='authnet_length' name='authnet_length' value='12' />

<!--The following three fields are used in conjunction with javascript to set the authnet_length field. The javascript function setPayLength() is defined in the appendix-->

<label class='label' for='recurring_month' >Every Month</label>
<input type="radio" id='recurring_month' name='donation_frequency' onchange='setPayLength(1);'/><br/>

<label class='label' for='recurring_three_months' >Every 3 Months</label>
<input type="radio" id='recurring_three_months' name='donation_frequency' onchange='setPayLength(3);'/><br/>

<label class='label' for='recurring_year' >Every Year</label>
<input type="radio" id='recurring_year' name='donation_frequency' onchange='setPayLength(12);'/><br/>

<p><b>Beginning On</b></p>

<label class='label' for='authnet_arb_start_date' >Date</label>
<input type="text" name='authnet_arb_start_date' id='authnet_arb_start_date' />

<input type="submit" name="submit" id="submit" value="Donate" style="width:150px; margin-left:275px;"/>


{/exp:freeform:form}

Sample Return Page

<!--Donation Thank You page with fEEdback entry_id in segment_2 of url-->

{if "{exp:feedback:response_code entry_id='{segment_2}'}" == '1' || "{exp:feedback:response_code entry_id='{segment_2}'}" == 'Ok'}
    &lt;p&gt;Thank you. Your donation was received.&lt;/p&gt;
    <!--parse response and do stuff-->
{if:else}
    <!--parse response and do stuff, or, more simply…-->
    &lt;p&gt;    
        There was a problem with your donation. &lt;br/&gt;
        The reason given was: {exp:feedback:response_text entry_id='{segment_2}'}&lt;br/&gt;
        Please try again. If you continue to have problems, please contact the system administrator.
    &lt;/p&gt;
{/if}

Appendix

The {state_options} global variable is defined as follows:

<option value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NV">NV</option>
<option value="NY">NY</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VA">VA</option>
<option value="VT">VT</option>
<option value="WA">WA</option>
<option value="WI">WI</option>
<option selected value="WV">WV</option>
<option value="WY">WY</option>

The {year_options} variable is defined as follows: (Filling the year options with php is easier, but I wanted to omit any language specific coding other than html and expressionengine template code for the purpose of this document.)

<option value='2000' >2000</option>
<option value='2001' >2001</option>
...
<option value='2100' >2100</option>

The setPayLength function is a jquery function designed to set the field that determines length of time between recurring payments and is defined as follows:

function setPayLength(len){
    $('#authnet_length').val(len);
}

You can also use:

function setPayLength(len){
    document.getElementById('authnet_length').value = len;
}