Payments with SEPA direct debit fails after charge succeeds in Stripe Dashboard
Closed this issue · 12 comments
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
- Activate SEPA Direct Debit in Stripe Dashboard
- 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
--
Same issue here!
Any news on this?
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.
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!
Same Issue with "Sofort"
@nfourtythree Any news on this issues?
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!
@nfourtythree I still get the same issue. in my add payment source section, i still dont see Direct debit payment methods.
@amici-infotech Have you turned it on in your stripe dashboard under the default payment methods?
https://dashboard.stripe.com/settings/payment_methods/
Hey @lukeholder thanks for reply. Yes! i have it turned on. In fact, we are using it shows up if we use it in normal checkout flow (under PaymentIntents). that payment method not appear in SetupIntents.
@amici-infotech we have set automatic_payment_methods.enabled set to true so it should show all those that you enable in the Dashboard.
https://docs.stripe.com/api/payment_intents/create#create_payment_intent-automatic_payment_methods
The docs to say:
and that are compatible with this PaymentIntent’s other parameters.
Maybe this is referring to the fact that we set off_session to true.
https://docs.stripe.com/api/payment_intents/create#create_payment_intent-off_session
You could try turning that off with \craft\commerce\stripe\base\Gateway::EVENT_BUILD_SETUP_INTENT_REQUEST.
But I can't guarentee that future charged will work as we only want payment methods that we can charge later without the customer involved.
Context:
commerce-stripe/src/base/Gateway.php
Lines 675 to 693 in 2040d94
hey @lukeholder i tried that. in such case, it returns error from stripe.
{
"message": "Your account isn't configured to directly use SetupIntents to create Mandates for Bacs Direct Debits. See https://stripe.com/docs/payments/payment-methods/bacs-debit to learn more, or contact us through https://support.stripe.com/contact/."
}
Seems like Stripe charges you more if you want to use Direct Debit in Setup Intents. We have contacted their customer support and they said it will start if my client agree to pay fixed £50 monthly on top of 1% + 20p per transaction. I am waiting for my client to sign that off to see if that solves issue with SetupIntents.
Can't I just use PaymentIntents for Subscription? Is there a way i can achieve via custom plugin or so? Trying to save some money.