Skip to main content
Knowledge Central
Aria Knowledge Central

Form of Payment Page Sample HTML

  1. Last updated
  2. Save as PDF

Overview

Below is an HTML form that can be used to test payment collection functionality using Direct Post with credit card or ACH payment methods. It can also be used as a starting point for a User Self-Service page for collecting payments.

Pre-requisites

  • You must configure at least one set of configuration parameters for Direct Post.
  • You must create an account with a balance due (e.g. register a new account with an "external payment method").
  • Copy and save the HTML form on this page.
    • Pop open the HTML code at the bottom of this page by mousing over the upper-right-hand corner of the code box and clicking the code logo code_copy_logo.png.
    • In the resulting window that pops up, copy the HTML at the bottom of this article, from "<!DOCTYPE" down to "</HTML>", and paste it into a text editor such as Notepad.
    • Save that file as "directPost.html." Double-clicking directPost.html will load a page that looks like the following, but in a single column (rather than the 3 shown).

      You will fill out and submit this form to test your Direct Post functionality:

      direct_post_form_col1.pngdirect_post_form_col2.pngdirect_post_form_col3.png

Using This Form

Below are instructions for filling out the form to test a simple use case:

There is a newly-registered account with a single Master Plan. The Billing Group associated with the plan is associated with an "external payment method," so no payment collection was attempted when the account was created via create_acct_complete_m.

As a result of submitting this form per the below instructions, the balance due on the invoice will be collected (depending on your Payment settings); and, the credit card specified will replace the "external payment method" as the primary payment method for the Billing Group.

  1. Client Number is found under Configuration > Integrations > Web Servivce API.
  2. Mode is the name of the Direct Post configuration that you created.
  3. Session ID is the return of a call to set_session_m using the new account's Account Number.
  4. full_invoice_no is the invoice number of the invoice resulting from the new account's registration.
  5. Click the Pay by Credit Card radio button. A test credit card number is pre-filled. This credit card will become the primary payment method for the new account's existing Billing Group.
  6. Fill in the Billing Information. This information will be associated with the new account's existing Billing Group.
  7. Click Submit. A success or error messages will be appended to the Direct Post Redirect URL in a query string.

Direct Post HTML Test Form

The JavaScript referenced at the bottom, which pre-populates the Direct Post URL, can be used for testing, and can also be used in the Production environment. It is necessary for PCI compliance. Below that, you can specify the environment to which you are making the Direct Post call.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" dir="ltr" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Direct Post Tester</title>

<style type="text/css">
dd { margin-left: 75px; }
#mode_margin { margin-left: 0px; }
</style>
</head>

<body>
<form id="AriaPay" name="payment_info" action="" method="" target="_new">
    <fieldset class="paymethodfieldset">
        <dl>
            <dt>Client Number (normally hidden)</dt>
            <dd>
                <input id="client_no" name="client_no" value="" size="30" type="text">
            </dd>
            <dt id="">Mode (normally hidden)</dt>
            <dd id="mode_margin">
                <span style="color:#999">direct_post_</span><input id="mode" name="mode" value="" size="30" type="text">
            </dd>
            <dt>Session ID (normally hidden)</dt>
            <dd>
                <input id="inSessionID" name="inSessionID" size="30" type="text">
            </dd>
            <dt>Collection Amount</dt>
            <dd>
                <input id="collection_amount" name="collection_amount" size="30" type="text">
            </dd>

            <dt>alt_client_acct_group_id</dt>
            <dd>
                <input id="alt_client_acct_group_id" name="alt_client_acct_group_id" value="" size="30" type="text">
            </dd>
            <dt>alt_caller_id</dt>
            <dd>
                <input id="alt_caller_id" name="alt_caller_id" value="" size="30" type="text">
            </dd>
            <dt>pending_invoice_no</dt>
            <dd>
                <input id="pending_invoice_no" name="pending_invoice_no" value="" size="30" type="text">
            </dd>
            <dt>full_invoice_no</dt>
            <dd>
                <input id="full_invoice_no" name="full_invoice_no" value="" size="30" type="text">
            </dd>
            <dt>master_plan_instance_no</dt>
            <dd>
                <input id="master_plan_instance_no" name="master_plan_instance_no" value="" size="30" type="text"><br/>
            </dd>
            <dt>client_master_plan_instance_id</dt>
            <dd>
                <input id="client_master_plan_instance_id" name="client_master_plan_instance_id" value="" size="30" type="text"><br/>
            </dd>
            <div>
                <h2>
                    <input name="formOfPayment" id="formOfPayment" value="CreditCard" type="radio">
                    Pay by Credit Card</h2>
            </div>
            <dt>Card Number</dt>
            <dd>
                <input id="cc_no" name="cc_no" value="4111111111111111" type="text">
                <span id="err_cc_no" class="jserror"> </span> </dd>
            <dt>Expiry Date</dt>
            <dd>
                <table cellpadding="0" cellspacing="0">
                    <tbody><tr>
                        <td><select id="cc_exp_mm" name="cc_exp_mm">
                                <option value="">Month</option>
                                <option value="1">January</option>
                                <option value="2">February</option>
                                <option value="3">March</option>
                                <option value="4">April</option>
                                <option value="5" selected="selected">May</option>
                                <option value="6">June</option>
                                <option value="7">July</option>
                                <option value="8">August</option>
                                <option value="9">September</option>
                                <option value="10">October</option>
                                <option value="11">November</option>
                                <option value="12">December</option>
                            </select></td>
                        <td width="20">&</td>
                        <td><select id="cc_exp_yyyy" name="cc_exp_yyyy">
                            <option value="2018">2018</option>
                            <option value="2019">2019</option>
                            <option value="2020">2020</option>
                            <option value="2021">2021</option>
                            <option value="2022">2022</option>
                            <option value="2023">2023</option>
                            <option value="2024">2024</option>
                            <option value="2025">2025</option>
                            <option value="2026">2026</option>
                            <option value="2027">2027</option>
                            <option value="2028">2028</option>
                            <option value="2029">2029</option>
                            <option value="2030">2030</option>
                            <option value="2031">2031</option>
                            <option value="2032">2032</option>
                            <option value="2033">2033</option>
                            <option value="2034">2034</option>
                            <option value="2035">2035</option>
                            <option value="2036">2036</option>
                            <option value="2037">2037</option>
                            <option value="2038">2038</option>
                            <option value="2039">2039</option>
                            <option value="2040">2040</option>
                            <option value="2041">2041</option>
                            <option value="2042">2042</option>
                            <option value="2043">2043</option>
                            <option value="2044">2044</option>
                            <option value="2045">2045</option>
                            <option value="2046">2046</option>
                            <option value="2047">2047</option>
                            <option value="2048">2048</option>
                            <option value="2049">2049</option>
                            <option value="2050">2050</option>
                            <option value="2051">2051</option>
                            <option value="2052">2052</option>
                            <option value="2053">2053</option>
                            <option value="2054">2054</option>
                            <option value="2055">2055</option>
                            </select>
                        </td>
                    </tr>
                </tbody></table>
            </dd>
            <dt>Security Code</dt>
            <dd>
                <input id="cvv" size="5" name="cvv" value="111" type="text">
            </dd>
            <dt>Bill Country</dt>
            <dd>
                <input id="bill_country" size="5" name="bill_country" type="text">
            </dd>
            <dt>Billing State/Locality</dt>
            <dd>
                <input id="bill_state_prov" size="30" name="bill_state_prov" type="text">
            </dd>
        </dl>
    </fieldset>
    <fieldset>
        <dl id="payMethodACH">
            <div class="Section_Header">
                <h2>
                    Billing Information 
                </h2>
            </div>
            <dt>bill_first_name</dt>
            <dd>
                <input id="bill_first_name" name="bill_first_name" value="" type="text">
            </dd>
            <dt>bill_middle_initial</dt>
            <dd>
                <input id="bill_middle_initial" name="bill_middle_initial" value="" type="text">
            </dd>
            <dt>bill_last_name</dt>
            <dd>
                <input id="bill_last_name" name="bill_last_name" value="" type="text">
            </dd>
            <dt>bill_company_name</dt>
            <dd>
                <input id="bill_company_name" name="bill_company_name" value="" type="text">
            </dd>
            <dt>bill_address1</dt>
            <dd>
                <input id="bill_address1" name="bill_address1" value="" type="text">
            </dd>
            <dt>bill_address2</dt>
            <dd>
                <input id="bill_address2" name="bill_address2" value="" type="text">
            </dd>
            <dt>bill_address3</dt>
            <dd>
                <input id="bill_address3" name="bill_address3" value="" type="text">
            </dd>
            <dt>bill_city</dt>
            <dd>
                <input id="bill_city" name="bill_city" value="" type="text">
            </dd>
            <dt>bill_locality</dt>
            <dd>
                <input id="bill_locality" name="bill_locality" value="" type="text">
            </dd>
            <dt>bill_state_prov</dt>
            <dd>
                <input id="bill_state_prov" name="bill_state_prov" value="" type="text">
            </dd>
            <dt>bill_country</dt>
            <dd>
                <input id="bill_country" name="bill_country" value="" type="text">
            </dd>
            <dt>bill_postal_cd</dt>
            <dd>
                <input id="bill_postal_cd" name="bill_postal_cd" value="" type="text">
            </dd>
            <dt>bill_phone</dt>
            <dd>
                <input id="bill_phone" name="bill_phone" value="" type="text">
            </dd>
            <dt>bill_phone_ext</dt>
            <dd>
                <input id="bill_phone_ext" name="bill_phone_ext" value="" type="text">
            </dd>
            <dt>bill_cell_phone</dt>
            <dd>
                <input id="bill_cell_phone" name="bill_cell_phone" value="" type="text">
            </dd>
            <dt>bill_work_phone</dt>
            <dd>
                <input id="bill_work_phone" name="bill_work_phone" value="" type="text">
            </dd>
            <dt>bill_work_phone_ext</dt>
            <dd>
                <input id="bill_work_phone_ext" name="bill_work_phone_ext" value="" type="text">
            </dd>
            <dt>bill_fax</dt>
            <dd>
                <input id="bill_fax" name="bill_fax" value="" type="text">
            </dd>
            <dt>bill_email</dt>
            <dd>
                <input id="bill_email" name="bill_email" value="" type="text">
            </dd>
            <dt>bill_birthdate</dt>
            <dd>
                <input id="bill_birthdate" name="bill_birthdate" value="" type="text">
            </dd>
            
        </dl>
    </fieldset>
    <fieldset>
        <dl id="payMethodACH">
            <div class="Section_Header">
                <h2>
                    <input name="formOfPayment" id="formOfPayment" value="ACH" type="radio">
                    Pay by ACH</h2>
            </div>
            <dt>Routing Number</dt>
            <dd>
                <input id="bank_routing_num" name="bank_routing_num" value="" type="text">
            </dd>
            <dt>Account Number</dt>
            <dd>
                <input id="bank_acct_num" name="bank_acct_num" value="" type="text">
            </dd>
        </dl>
    </fieldset>

    
    <fieldset>
        <dl>
            <dd class="button">
                <input name="submitPayment" id="submitPayment" value="Submit" type="submit">
            </dd>
        </dl>
    </fieldset>
</form>
<script src="https://secure.ariasystems.net/api/ariaCHD_EOM_Max.js"></script>
<script language="javascript">
aria.environmentId ="future.stage";
//aria.environmentId ="future.stage.cph";
//aria.environmentId ="prod";
</script>

</body></html>
  1. Back to top
  • Was this article helpful?

Recommended articles

  1. Page type
    Topic
  2. Tags
    This page has no tags.