Cannot override the fonts used in Stripe Payment Element

[thisisjamessmith]

Description

The Stripe docs describe how to override the fonts used in their new Payment Element here: https://stripe.com/docs/js/elements_object/create#stripe_elements-options-fonts - however, this is not possible from Craft's Stripe plugin when using getPaymentFormHtml(). We have plenty of power to alter the design by using the appearance object, which works really well. But custom fonts do not work, not with cssSrc or a custom font source object.

Steps to reproduce

I would expect either of the following to work:

{% set stripeParams = {
    fonts: [{
        family: 'Avenir',
        src: 'url(https://my-domain.com/assets/avenir.woff)',
        weight: '500',
    }],
    appearance: {
        variables: {			
            fontFamily: 'Avenir',
            ...
        },
        ...
    }
} %}

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

or

{% set stripeParams = {
    fonts: [{
        cssSrc: 'https://fonts.googleapis.com/css2?family=Inter'
    }],
    appearance: {
        variables: {
            fontFamily: 'Inter',
            ...
        },
        ...
    }
} %}

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

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