CODE

Arbitrary Payment Form

Allow the user to input an arbitrary price value in a generic payment form, such as donation forms or general invoice/service payment forms.

Adam Wilson's:
CODE Items Profile

v1.0.0

1. By default, the “Generic” Treepl payment forms are configured to collect a fixed payment amount. However, with just a few adjustments to the form layout you can accept variable amounts based on user input, a preset dropdown, a javascript calculated amount, or any other method your application determines.

   NOTE: This method is for “Generic” type payment forms only. Treepl payment forms, not set to type “Generic”, that collect an amount directly relating to the purchase of an item (such as Event registrations, Products, Secure Zones, etc.) cannot accept a price value other than the value of the item/s being purchased (except where discount codes and/or gift vouchers are used).

   The Default Form Elements

   The default payment form generated via the Treepl form builder will output form code something like pictured below.

   

   The two input elements we want to look at are:

   <input type="hidden" name="Payment_Amount" value="{{this.paymentAmount}}"/>
   

   and

   <input type="text" disabled="disabled" id="PaymentTotalCost" value="{{this.paymentAmount}}"/>
   

2. Form Adjustments

   The first input noted above, with the name="Payment_Amount" is the input we need to keep, while the other one is just for display purposes and can be removed. But we want the currently hidden input to become a visible user input field, so we’ll move it in place of the disabled input and change it like so:

   <input type="text" id="PaymentTotalCost" value="{{this.paymentAmount}}"/>
   

   That’s it!
   This will give you an input that can be changed as needed and will also default to an amount if one is provided via the Form’s component tag, eg:

   {% component type: "form", alias: "YOUR_FORM_ALIAS", price: "25.95" %}
   

   Important Note
   The Treepl payment scripts will add a data attribute with the price value to the Payment_Amount input element whenever the elements change event is triggered in the DOM. So, if you are programmatically adjusting the price value (ie: via jQuery, Javascript...), be sure to trigger a change event on the element after any price change and double-check (via the browser’s dev tools) that the data-attribute is being updated - otherwise, the incorrect value may be charged.

3. Optional Customisations

   We can take all this a little further to better control the input and provide a better experience for the user.

   As a regular text field, users can enter any text - not just a price value. We can fix this by changing the input type to number and we also don’t want any negative values, so we can add min="0" to help restrict this (at least when the number steppers are used).

   We can even add suggested amounts the user can select from by adding a datalist.

   Putting all this together will give us this:

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   <input type="number" min="0" list="suggestedPrices" name="Payment_Amount" value="{{this.paymentAmount}}"/>
   <datalist id="suggestedPrices">
       <option value="10.00"></option>
       <option value="15.00"></option>
       <option value="25.00"></option>
       <option value="40.00"></option>
       <option value="90.00"></option>
   </datalist>
   

   For more info and options for the number input type, see the mdn web docs here.

   Or, maybe you only want the user to select from preset amounts. We can change this input to a dropdown select element like this:

   {% comment %}<!-- Treehouse CODE v1.0.0 -->{% endcomment %}
   <select name="Payment_Amount">
       <option value="10.00"></option>
       <option value="15.00"></option>
       <option value="25.00"></option>
       <option value="40.00"></option>
       <option value="90.00"></option>
   </select>
   

Comments or questions? Head over to the Treepl CMS forum to discuss with the community.