Variable Price Payment Form

This script allows for variable price payment forms, in the case where you don’t want a fixed price payment.

  1. By default, in a Treepl payment form, we will have a price input field which expects a set value from a Liquid variable. Like so:

    <input type="text" id="Amount" name="Amount" value="{{paymentAmount}}" data-trp_price="{{paymentAmount}}"/>

    We can simply remove the {{paymentAmount}} Liquid from this line of code, allowing a user to type any amount into the field. However, this will not automatically update the data-trp_price value (which is required for the payment processing)

    For this we need a little bit of Javascript to dynamically update the data attribute whenever the input field is changed by the user.

    Add the below script underneath your <form> to achieve this.

    <!--Treehouse CODE v1.0.0-->
    window.onload = function() {
    	var amount = document.getElementById('Amount');
    	amount.addEventListener('blur', function() {
    		amount.setAttribute("data-trp_price", this.value); 

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