No way to make payment fields required

[petehjfd]

Description The template that outputs the credit card fields when using cart.gateway.getPaymentFormHtml() uses Craft's text input helper to generate the inputs. It passes required: true to the include, but the include doesn't actually use that property.

So there's currently no way to make the First Name and Last Name fields in the payment form required. Which means that the user can submit the form without entering that data.

Additional info

• Craft version: 3.5.15.1
• Commerce version: 3.2.11
• PHP version: 7.4.2
• Database driver & version: MySQL 5.7.29
• Other Plugins & versions:

Additional context We're using the Stripe payment gateway.

[lukeholder]

You should be able to add/remove rules to the paymentForm model using EVENT_DEFINE_RULES event:

https://craftcms.com/docs/3.x/extend/extending-system-components.html#custom-validation-rules

This wouldn't add them to the form but would validate them.

Would that work for you?

[pdaleramirez]

So if you are using Custom Gateway with Custom payment form that you can't define it's rule validation. You could do something like this

        Event::on(CustomPaymentFormModel::class, CustomPaymentFormModel::EVENT_DEFINE_RULES, function(DefineRulesEvent $e) {
            
            $e->rules[] = [
                    ['firstName', 'lastName'], 
                    'required',
                    'message' => '{attribute} is required'
            ];
        });

[petehjfd]

Thanks. So I need to create a custom module for this? Would it not make more sense to fix the bug?

[lukeholder]

The base credit card payment form model requires the first and last name but the stripe gateway (which extends this form model) does not. We need to clean this up so it is clearer. Added it to the list.

[petehjfd]

Is it worth considering adding the option to override the _creditCardFields.html template? Because to be honest the required field issue is not the only problem with that template. The lack of input labels is a problem for accessibility. And the grid and item classes are also conflicting with existing CSS components (I imagine that would be the case for a lot of people as grid is quite a common class name).

[lukeholder]

This will be fixed in Commerce 4.3 and Stripe plugin 4.0, which will be out soon. It uses the Stripe elements form with full design configuration and accessibility built in. Thanks.