Charge plugin not showing errors on payment fail

Question

I am using the Charge plugin. They payment process happens in a modal. If I enter in a bad number from one of the stripe test numbers and submit, when the payment fails the modal goes away and no errors are shown. The errors are not getting loaded into the div set for payment errors. I do get the errors before form submit but that doesn't help with a bad card or something.

I am getting the error in the cp and can see it but I cannot find anything in their documentation to log this to the view.

I have read here quite a bit and also viewed thier example and I am not doing anything different. But for some reason I cannot get the declined error to show on the entry page once it returns.

this is the script

<script>
  (function () {
    Stripe.setPublishableKey('{{ craft.charge.getPublicKey() }}');
    $(this).charge('#charge-form', '#payment-errors', '.charge-indicator');
  })();
</script>

Form is almost exactly the same as their example except that I have a few custom fields (those are not the fields with errors in them).

If anyone has any experience with this plugin that can shed some light on how to return a declined card error or any errors that occur after form submission it would be greatly appreciated.

I see this in the cp

Answer 1

This is how I got the errors to show:

{% if charge is defined and (charge.getErrors or charge.user) %}
    <div>
        {% if charge.getErrors %}
            {% for error in charge.getErrors('general') %}
                {{ error }}
            {% endfor %}
            {% for key, error in charge.getErrors %}
                {% if key != 'general' %}
                    {{ error[0] }}
                {% endif %}
            {% endfor %}
        {% endif %}
        {% if charge.user %}
            {% for key, error in charge.user.getErrors %}
                {% if key != 'general' %}
                    {{ error[0] }}
                {% endif %}
            {% endfor %}
        {% endif %}
    </div>
{% endif %}

And then included:

<div id="payment-errors"></div>

Before the submit button (as they are loaded using JS)

Answer 2

You have to insert this below your textfields

{% if charge is defined %}
    {% for error in charge.getErrors('FieldNameHere') %}
        <ul class="errors"><li>{{ error }}</li></ul>
    {% endfor %}
{% endif %}