Is it possible to update a Twig variable based on user interaction without page refresh?

Question

I'm currently trying to use the excellent "Charge" plugin to set up a simple Stripe checkout form for charity donations. The basic example provided in the docs works nicely.

<form method="post">
  <input type="hidden" name="action" value="charge/charge"/>
  {% set options = { 
    planAmount : 99.99, 
    description : 'This is an extra description', 
   checkout : {
     name: 'Acme Corp', 
   }} %}
  {{ craft.charge.setCheckoutOptions(options) }}
</form>

However I'm trying to update the 99.99 to use an amount that can be chosen by the client. My attempt at doing this involved having a separate form with a select box which when updated needs to update the planAmount.

I tried to do this using craft.request.getPost('name') tying up to a jQuery post submit but I'm not sure if I'm even going about this the right way?

Is there any other way to update a variable in Craft/Twig through JS (or other user interaction)?

Answer 1

I'm the developer of Charge.

You need to go about the form setup a slightly different way.

By design there are 2 ways to define the value for a Charge, either

1. Setting the planAmount variable in your twig template, and passing it to the setCheckoutOptions/setPaymentOptions method.
2. Passing the allowDynamic : true setting to the setCheckoutOptions/setPaymentOptions method. With the allowDynamic option passed, you can then pass the planAmount as a hidden or visible input in your payment form, named planAmount. This can be directly updated by your users, and is explicitly designed for variable amount and charity donation form setups.

An example of this behaviour is included in the demo templates in template/charge/donation.html and is also visible here : http://demos.squarebit.co.uk/charge/donation

Answer 2

Put the form code in a separate template, and load it via ajax

Answer 3

Twig variables are set on the server, and then compiled into HTML. Without a page refresh, I don't see how you can update a variable in a Twig template.

You COULD, however, set a javascript variable with a Twig template.

{% set planAmount = 99.99 %}

<script type="text/template">
var planAmount = {{ planAmount }};
</script>

And then elsewhere in your javascript, update the planAmount variable.