merchant:epaymentform:countryandstatelist

Add Drop-down Country & State List Dynamically

This is a simple international country and state drop down list that automatically repopulates the state section based on the country selected. All of this is done without reloading the page.

Instructions

1) Log into your USAePay merchant gateway. Go to “Settings”, then “Source Keys”. Select the source key you are using and click “Edit”. Click “Edit Customization to Epay Form”.

2) Insert this code into the document head between the following tags <head>…</head>:

    <script src="https://www.usaepay.com/content/js/epayform-utils.js"></script> 

3) Find State field:

 <tr>
  <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana" size="2">State:</font></td>
  <td bgcolor="#F0F0F0" width="450">
  <input type="text" name="UMbillstate" size="20" value="[UMbillstate]"></td>
 </tr>

and replace it with:

 <tr>
  <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana" size="2">State:</font></td>
  <td bgcolor="#F0F0F0" width="450">
  <select name ="UMbillstate" id ="state"><option selected="selected">Select State</option></select></td>
 </tr>

4) Find Country field:

 <tr>
  <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana" size="2">Country:</font></td>
  <td bgcolor="#F0F0F0" width="450">
  <input type="text" name="UMbillcountry" size="26" value="[UMbillcountry]"></td>
 </tr>

and replace it with:

 <tr>
  <td bgcolor="#F0F0F0" width="234" align="right"><font face="Verdana" size="2">Country:</font></td>
  <td bgcolor="#F0F0F0" width="450">
  <select id="country" name ="UMbillcountry"></select></td>
 </tr>

5) Add the following at the bottom of the form between </body>…</html>

    <script language="javascript">populateCountries("country", "state");</script>

What it looks like

merchant/epaymentform/countryandstatelist.txt · Last modified: 2015/07/03 08:17 by yura

Page Tools