3

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

3

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

  • 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 Jun 12 '16 at 12:34
  • 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 Jun 13 '16 at 13:02
1

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

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

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.