<p>I'm the developer of Charge. </p>

<p>You need to go about the form setup a slightly different way. </p>

<p>By design there are <strong>2</strong> ways to define the value for a Charge, either </p>

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

<p>An example of this behaviour is included in the demo templates in <code>template/charge/donation.html</code> and is also visible here : <a href="http://demos.squarebit.co.uk/charge/donation" rel="nofollow">http://demos.squarebit.co.uk/charge/donation</a></p>

CC BY-SA 3.0
2016-06-12T12:34:42.777Z
A small follow up question, is it possible somehow to update the Pay button text with the amount? (This is the default behaviour when not using the dynamic option). I'm just worried someone will get the '.' in the wrong place and donate £5000!
André Goldstein
CC BY-SA 3.0
2016-06-13T13:02:45.833Z
Not directly no. The pay button text is set at the point of instantiation, of the js. If you needed it to update you'd need to add your own js triggers for that. Having said that, I can add it as an FR for a future release to dynamically inspect the planAmount for the button content.
Joel Bradbury
CC BY-SA 3.0
2016-06-10T16:18:25.297Z
2016-06-10T16:18:25.297Z
Joel Bradbury
<p>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.</p>

<p>You COULD, however, set a javascript variable with a Twig template.</p>

<pre><code>{% set planAmount = 99.99 %}

&lt;script type="text/template"&gt;
var planAmount = {{ planAmount }};
&lt;/script&gt;
</code></pre>

<p>And then elsewhere in your javascript, update the <code>planAmount</code> variable.</p>

CC BY-SA 3.0
2016-06-08T20:55:59.157Z
2016-06-08T20:55:59.157Z
TerryCB
<p>Put the form code in a separate template, and load it via ajax</p>

CC BY-SA 3.0
2016-06-08T20:50:01.757Z
2016-06-08T20:50:01.757Z
andrew.welch
<p>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.</p>

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

<p>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.</p>

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

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

<ajax><plugin-charge>
Is it possible to update a Twig variable based on user interaction without page refresh?
# Is it possible to update a Twig variable based on user interaction without page refresh?

(Asked by: username_0 on 2016-06-08)

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.

  
  {% set options = { 
    planAmount : 99.99, 
    description : 'This is an extra description', 
   checkout : {
     name: 'Acme Corp', 
   }} %}
  {{ craft.charge.setCheckoutOptions(options) }}


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)?

**Tags:** ajax, plugin-charge


---

## 3 answers

### Answer by username_1 on 2016-06-10. Score: 3 | Accepted answer

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>

> **Comments:**
> **username_0**: A small follow up question, is it possible somehow to update the Pay button text with the amount? (This is the default behaviour when not using the dynamic option). I'm just worried someone will get the '.' in the wrong place and donate £5000!  
> **username_1**: Not directly no. The pay button text is set at the point of instantiation, of the js. If you needed it to update you'd need to add your own js triggers for that. Having said that, I can add it as an FR for a future release to dynamically inspect the planAmount for the button content.  

---

### Answer by username_2 on 2016-06-08. Score: 1

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 %}



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


---

### Answer by username_3 on 2016-06-08. Score: 1

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


---

