Stripe Payment Element should not ask for country and postcode when the cart already knows them

[thisisjamessmith]

Description

When using getPaymentFormHtml() with the new Stripe Payment Element UI, there seems to be no practical way to instruct Stripe to hide and prepopulate its country and postcode fields if Craft's cart already has those details.

Steps to reproduce

1. Have a Commerce cart that collects billingAddress.countryCode and billingAddress.postalCode. Choose UK as billing country.
2. Output the Stripe Payment Element UI via gateway.getPaymentFormHtml(stripeParams)|raw
3. Notice that the UI includes some blank fields for country and postcode.

As a workaround, we can at least prepopulate those values by passing the following parameters to getPaymentFormHtml:

{% set stripeParams = {
	...
	...
    elementOptions: {
        defaultValues: {
            billingDetails: {
                name: cart.customer.fullName ?? null,
                email: cart.email ?? null,
                phone: cart.billingAddress ? cart.billingAddress.addressPhone ?? null,
                address: {
                    line1: cart.billingAddress ? cart.billingAddress.addressLine1 ?? null,
                    line2: cart.billingAddress ? cart.billingAddress.addressLine2 ?? null,
                    city: cart.billingAddress ? cart.billingAddress.locality ?? null,
                    state: cart.billingAddress ? cart.billingAddress.locality ?? null,
                    postal_code: cart.billingAddress ? cart.billingAddress.postalCode ?? null,
                    country: cart.billingAddress ? cart.billingAddress.countryCode ?? null,
                }
            }
        }
    }
} %}

{% set gateway = craft.commerce.gateways.getGatewayById(1) %}
{{ gateway.getPaymentFormHtml(stripeParams)|raw }}

At a minimum, I would definitely expect Commerce to do that for us automatically, but having full control over Stripe's config would be even better.

This is a problem not only because the customer is confused why we're asking for some of their billing details again, but more importantly, it creates a potential inconsistency between the data we have collected and stored with that which the customer may have submitted in the final payment step. The billing info collected earlier by Commerce may be used in different circumstances, and creates a paper trail and accurate receipts and email notifications for both customer and store admins.

I understand that it's possible to "go manual" by not using getPaymentFormHtml() and writing all of our own code from scratch to instantiate the Payment Element, but I'm sure you'd agree that that's quite a significant undertaking, and Commerce already does a good job of getting us 90% of the way there - it's just not quite good enough yet.

Additional info

• Craft CMS version: 4.5.6.1
• Craft Commerce version: 4.3.0
• Stripe for Craft Commerce version: 4.0.0
• PHP version: 8.1
• Database driver & version: MySQL 8

[johanneshakonsen]

Any chance you could post the entirety of your stripeParams? I can't get any response from stripe for the life of me except "Invalid payment or order". Almost like it's trying to do a payment on the initial connection to stripe

[thisisjamessmith]

I don't think that would really be relevant to this issue - better to ask in Discord, or open a new issue I think.

[joelzerner]

I've managed to hide the country and postcode fields by using the following code:

{% set params = { elementOptions: { fields: { billingDetails: { address: { country: 'never', postalCode: 'never' } } } } } %}

However I then get the following error when trying to submit a payment:

paymentForm.js?v=1698326315:266 Uncaught (in promise) IntegrationError: You specified "never" for fields.billing_details.address.country when creating the payment Element, but did not pass confirmParams.payment_method_data.billing_details.address.country when calling stripe.confirmPayment(). If you opt out of collecting data via the payment Element using the fields option, the data must be passed in when calling stripe.confirmPayment().

@lukeholder Could you advise the best way to integrate the default data here? We usually like to pass as much of the customer data to Stripe as possible - name, email, address etc.

This documentation for Stripe outlines adding a form event listener but not sure how we can do that in this instance:
https://stripe.com/docs/js/elements_object/create_payment_element#payment_element_create-customized_fields-fields

Craft Commerce Stripe documentation has some events to listen to but again not sure if these will do the trick. I've tried playing around with them but can't get past the error I am seeing.
https://github.com/craftcms/commerce-stripe#creating-a-stripe-payment-form

[lukeholder]

I will look to allow address to be passed into the payment form. I'll update here once it's ready.

[philipboomy]

Yeah passing in the name is important as Stripe uses this in their antifraud when they compare name to email. Right now we are getting a warning/message on all payment that name is missing etc.

Any update on this?

[lukeholder]

I'll look at this today and let you all know what we come up with.

[joelzerner]

@lukeholder Any update or eta on this one?

[lukeholder]

We have a potential fix for this in this PR #274

Stay tuned for the merge and release. I will update here once released.

[eshopsoftware]

We have a potential fix for this in this PR #274

Stay tuned for the merge and release. I will update here once released.

Well anticipated. Thank you!

[nfourtythree]

Hi All

We have pushed up a fix for this that has been included in the latest release of the plugin 4.1.0.

The README has been updated with instructions on how to pass the order (cart) to the payment form to get all the new functionality working.

Thanks!