Payments with SEPA direct debit fails after charge succeeds in Stripe Dashboard

[roccoe]

Description

We are currently creating a webshop for a customer. The customer would like to offer SEPA Direct Debit as a payment method for their end customers.

We have activated this payment method via the Stripe dashboard and it is also displayed as a payment method. If you now try to pay via SEPA in the checkout process, it aborts with an error, but we are not shown any error message (see screenshots). However, a payment attempt is displayed in the Stripe dashboard. The payment goes through correctly, the customer is charged accordingly and the returnUrl is set correctly. Nevertheless, Commerce does not recognize it and the order is never placed.

In addition, I cannot store a SEPA payment method as a payment source. In our "My Account"/"My Payment Methods" page, SEPA is not displayed as a payment method in the Stripe Elements form at all, instead two payment methods are displayed that we have explicitly deactivated (Bancontact & iDeal). I don't know if the bug is related to the one mentioned above, but I wanted to point it out.

We created the webshop using the example templates from Craft Commerce. So far we have only worked with the Stripe test mode, as the store has not yet been published.

I have added code samples of the templates where the Stripe form is embedded. If further information is required, I will be happy to provide it. Any help would be greatly appreciated.

Error message after trying to pay (tranlation would be "Payment error:")

Stripe payment form on checkout:

shop/checkout/payment.twig:

  ...
        <div class="mt-3">
          <form id="paymentForm" method="post" action="" class="form-group">
            {{ csrfInput() }}
            {{ actionInput('commerce/payments/pay') }}
            {{ redirectInput(siteUrl('/shop/customer/order', {
              number: cart.number,
              success: 'true'
            })) }}
            {{ hiddenInput('cancelUrl', siteUrl('/shop/checkout/payment')|hash) }}
            {{ hiddenInput('orderEmail', cart.email) }}

            {% if cart.gatewayId %}
              {{ hiddenInput('gatewayId', cart.gatewayId) }}
              {% set params = {} %}

              {# Special params for Paypal checkout #}
              {% if className(cart.gateway) == 'craft\\commerce\\paypalcheckout\\gateways\\Gateway' %}
                {% set params = { currency: cart.paymentCurrency } %}
              {% endif %}

              {% if className(cart.gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %}
                {% set params = {
                  appearance: {
                    theme: 'stripe'
                  },
                  elementOptions: {
                    layout: {
                      type: 'tabs',
                      defaultCollapsed: false,
                      radios: false,
                      spacedAccordionItems: false
                    }
                  },
                  submitButtonClasses: 'mt-4 mb-8 btn cursor-pointer text-primary px-2.5 py-1.5 rounded-full text-lg border-2 border-primary group-hover:bg-primary group-hover:text-white hover:border-primary hover:bg-primary hover:text-white active:bg-primary active:text-white',
                  submitButtonLabel: 'Pay',
                  errorMessageClasses: 'bg-red-200 text-red-600 my-2 p-2 rounded',
                } %}
              {% endif %}
              <div class="gateway-payment-form max-w-3/4">
                {% namespace cart.gateway.handle|commercePaymentFormNamespace %}
                    {{ cart.gateway.getPaymentFormHtml(params)|raw }}
                {% endnamespace %}
              </div>

              {% if cart.gateway.supportsPaymentSources() and currentUser %}
                <div class="checkbox">
                  <label>
                    {{ input('checkbox', 'savePaymentSource', 1, {
                      class: ['inline-block', 'mr-1']
                    }) }}
                    {{ 'Save card for future purchases'|t }}
                  </label>
                </div>
              {% endif %}
            {% else %}
              {{ cart.gateway.getPaymentConfirmationFormHtml({})|raw }}
            {% endif %}

            {{ include('shop/checkout/_includes/partial-payment') }}

            {% if cart.paymentSourceId or cart.gateway.showPaymentFormSubmitButton() %}
              <div class="mt-3 text-right">
                {{ tag('button', {
                  type: 'submit',
                  class: 'btn cursor-pointer text-primary px-2.5 py-1.5 rounded-full text-lg border-2 border-primary group-hover:bg-primary group-hover:text-white hover:border-primary hover:bg-primary hover:text-white active:bg-primary active:text-white',
                  text: 'Pay'|t
                }) }}
              </div>
            {% endif %}
          </form>
        </div>
  ...

  {% js %}
    var $paymentForm = document.querySelector('#paymentForm');
    if ($paymentForm) {
      // Only allow the payment form submit to be triggered once.
      $paymentForm.addEventListener('submit', function(ev) {
        if ($paymentForm.dataset.processing) {
          ev.preventDefault();
          return false;
        }

        $paymentForm.dataset.processing = true;
      });
    }
  {% endjs %}

Stripe payment form on "My Account" page:

shop/customer/cards.twig:

...
          <form id="gateway-{{ gateway.id }}"
                method="post"
                action=""
                class="form-horizontal max-w-md form-group"
          >
            {{ csrfInput() }}
            {{ actionInput('commerce/payment-sources/add') }}
            {{ hiddenInput('gatewayId', gateway.id) }}
            {{ hiddenInput('successMessage', 'Added payment source.'|hash) }}
            {{ hiddenInput('cancelUrl', '/shop/customer/cards'|hash) }}
            {{ redirectInput('/shop/customer/cards') }}

            {% set params = {} %}

            {% if className(gateway) == 'craft\\commerce\\stripe\\gateways\\PaymentIntents' %}
              {% set params = {
                paymentFormType: 'elements',
                appearance: {
                  theme: 'stripe'
                },
                elementOptions: {
                  layout: {
                    type: 'tabs',
                    defaultCollapsed: false,
                    radios: false,
                    spacedAccordionItems: false
                  }
                },
                submitButtonClasses: 'cursor-pointer rounded px-4 py-2 inline-block bg-blue-500 hover:bg-blue-600 text-white hover:text-white my-2',
                submitButtonText: 'Create',
                errorMessageClasses: 'bg-red-200 text-red-600 my-2 p-2 rounded',
              } %}
            {% endif %}

            <div>
              {{ input('text', 'description', '', {
                maxlength: 70,
                autocomplete: 'off',
                placeholder: 'Payment source description'|t,
                class: ['w-full', 'border border-gray-300 hover:border-gray-500 px-4 py-2 leading-tight rounded']
              }) }}
            </div>

            <div class="mt-4">
              <label>
                {{ input('checkbox', 'isPrimaryPaymentSource', 1) }} {{ 'Set as primary payment source?'|t }}
              </label>
            </div>

            <div class="gateway-payment-form max-w-3/4 mt-4">
              {% namespace gateway.handle|commercePaymentFormNamespace %}
                {{ gateway.getPaymentFormHtml(params)|raw }}
              {% endnamespace %}
            </div>

            {% if gateway.showPaymentFormSubmitButton() %}
              <div class="mt-4 text-right">
                {{ tag('button', {
                  type: 'submit',
                  class: 'btn cursor-pointer text-primary px-2.5 py-1.5 rounded-full text-lg border-2 border-primary group-hover:bg-primary group-hover:text-white hover:border-primary hover:bg-primary hover:text-white active:bg-primary active:text-white',
                  text: 'Add card'|t
                }) }}
              </div>
            {% endif %}
          </form>
...

Steps to reproduce

1. Activate SEPA Direct Debit in Stripe Dashboard
2. Select SEPA in checkout, use one of the Stripe Testing Account Numbers and try to pay

Additional info

• Craft CMS version: 4.5.10
• Stripe for Craft Commerce version: 4.0.1.1
• PHP version: 8.2.10
• Database driver & version: MySQL 5.7.43
• Plugins & versions:
  • Craft Commerce: 4.3.2
  • Contact Form: 3.0.1
  • Navigation: 2.0.22
  • Redactor: 3.0.4
  • SEO: 4.2.1
  • Vite: 4.0.6
    --

[mihob]

Same issue here!

[mihob]

Any news on this?

[roccoe]

Any update on this? This plugin is in this state not usable for European customers, credit cards are less common over here. And offering different payment options is the norm here. I'm quite frankly disappointed that we do not get any response on this issue, at least if somebody tried to reproduce it. We did implement this feature according to the documentation and Craft Commerce is not cheap, a little more support would be appreciated.

[nfourtythree]

Hi all

Apologies for the delay in response. Just dropping in to let you know that we are looking into and trying to replicate this issue.

We will update this thread as soon as possible with any further questions or information we have.

Thank you for your patience!

[mihob]

Same Issue with "Sofort"

[mihob]

@nfourtythree Any news on this issues?

[nfourtythree]

Thank you for reporting, we have pushed up a fix for this that has been included in the latest release of the plugin 4.1.0.

This version is now available.

This also requires an update to Commerce and the compatible version has been released.

Thanks!