Drop-Down

This example code shows how to add a basic drop-down menu (list) to the Epayment form and how to assign it to specific fields depending on the placement of the drop-down. It assumes no other changes have been made to the payment form.

Overview

A drop-down can be added to any field in the form. It is important to always assign the drop-down menu to specific fields so that the transaction details will be transferred to the correct field. The image below shows an example using a drop-down menu to specify how much the customer is going to pay:

HTML

The first step is to decide where you want to place the drop down menu in your form. In this example, we will be using the UMamount field within the form. You can look up all the fields under the complete payment form documentation.

Once you have decided which field you would like to appear in a dropdown menu, find the row attached to the field within the form. Here is an example of what the UMamount row with the field looks like:

<div class="form-group">
  <span class="col-form-label col-sm-4 col-xs-12 ">Order Amount</span>
  <div class="col-md-8 col-xs-12 ">
    <input id="UMamount" name="UMamount" class="form-control displayonly" type="text"  readonly="readonly" placeholder="Order Amount" value="[UMamount]">
  </div>
</div>

Select the following line:

<input id="UMamount" name="UMamount" class="form-control displayonly" type="text"  readonly="readonly" placeholder="Order Amount" value="[UMamount]">

and replace it with the following HTML code:

<select name="UMamount" class="form-control">
  <option value="none">Select One</option>
  <option value="50.00">$50</option>
  <option value="100.00">$100</option>
</select>

The example shows what the code for a drop-down with two options would look. You can add as many options as you need. All you will have to do is repeat this cell <option value="abc">123</option>. You can change the wording of the first option value to whatever you want the drop-down to list; the example used here is Select One.

The value of each option goes between the quotation marks like abc in the following example: <option value="abc">123</option>, and the names of each option your customers will see goes between the angle brackets like 123 in the following example: <option value="abc">123</option>.