How to display payment gateway error message only

Question

I am trying to display the error message coming from the payment gateway ONLY. I know I can use

{% set message = craft.app.session.getFlash('error') %}
{{ message|length ? message }}

but commerce returns to me a vague error like this

Unable to update cart.

If anything happens to the cart, even if it is not the payment. I don't know what the error is, nor does the customer. So is there a way to catch payment errors of the cart only?

Answer 1

You mean the errors of your form? You can access those via paymentForm

{% for attribute, error in paymentForm %}
    {{ attribute }}: {{ dump(error) }}
{% endfor %}

Answer 2

When submitting a payment form to the commerce/payments/pay controller action there are three potential sources of error messages.

If you are submitting via a normal form submission (not ajax) you will be able to get access to the errors in the following manner from your template.

General Errors

{% set flashError = craft.app.session.getFlash('error') %} For general errors e.g. requireBillingAddressAtCheckout is set to true and there is no billing address on the order.

---

Order Save Errors

{% set orderErrors = order.getErrors() %} The order is recalculated and saved during the pay process to make sure something has not changed elsewhere. The order is validated and therefore errors will be returned if there are validation issues.

---

Payment Form Errors

{% set paymentFormErrors = paymentForm.getErrors() %} The payment form errors will contain any errors related to the payment form and, dependant on gateway, may also return payment gateway errors.

Answer 3

I was able to use the "flash message" that's included in their demo templates (shop/_layout/main)

{% set flashNotice = craft.app.session.getFlash('notice') %}

{% if flashNotice %}
    <div class="bg-blue text-white">
        <div class="container mx-auto px-6 py-4">
            {{ flashNotice }}
        </div>
    </div>
{% endif %}

{% set flashError = craft.app.session.getFlash('error') %}

{% if flashError %}
    <div class="bg-red text-white">
        <div class="container mx-auto px-6 py-4">
            {{ flashError }}
        </div>
    </div>
{% endif %}

{% if cart.errors|length %}
    <div class="bg-red text-white">
        <div class="container mx-auto px-6 py-4">
            {% for attribute, errors in cart.errors %}
                {% if loop.first %}<ul>{% endif %}
                {% for key, error in errors %}
                    <li>{{ attribute }}: {{ error }}</li>
                {% endfor %}
                {% if loop.last %}</ul>{% endif %}
            {% endfor %}
        </div>
    </div>
{% endif %}