Multiple prices in payment web form

CMS > Content Modules Forms
1

I need to create a payment web form where the purchaser can select one of three prices instead of having one price hard-wired into the Accept Payment input field. The default code for the payment input field is:

<input type="hidden" name="paymentData"/>
	<label for="Amount">Amount</label>
	{% if paymentAmount == null %}
		{% assign paymentAmount = params.price | default: 0 %}
	{% endif %}
	<input type="text" id="Amount" name="Amount" value="{{paymentAmount}}" data-trp_price="{{paymentAmount}}"/>

When there is just one price, I’ve replaced {{paymentAmount}} with that price and the form works well. But if I replace this field with a field, I can’t work out how to pass on the price of the selected item. This code does not work:

<select name="Amount" data-trp_price="{{paymentAmount}}">
  <option value="50.00">$50 Gift voucher</option>
  <option value="95.00">$95 Gift voucher</option>
  <option value="190.00">$190 Gift voucher</option>
</select>
2

Hi @hopestew. It’s because the data-trp_price="{{paymentAmount}}" needs to update as well.
In your code this value will remain at the original hard-wired price.

You’ll need to use some Javascript to change the data attribute value on change of the select element.

3

Thanks @Adam.Wilson I was hoping there was a non-JavaScript way. :slightly_smiling_face:

4

Something like this should work… I haven’t tested it though:
(assuming you’re using jQuery)

$('select[name="Amount"]').change(function(){
  var newPrice = $(this).children('option:selected').value();
    $(this).data('trp_price', newPrice);
});
5

Because I had to get it live quickly, I ended up making three separate gift voucher purchase forms which, at the moment, might actually be the better way to go in this instance. However, I’m sure I’ll need this code in the near future (maybe even next week!). Thanks as usual @Adam.Wilson