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

[lukeholder]

@thisisjamessmith do you get an error or are you saying it's just not working? I would have thought the reference to the font would be enough but you would need to load the font yourself into the page?

[franck-thorck]

@lukeholder I have the same issue here.

I tried with site loaded fonts directly without the fonts option in gateway params, but it does not work. And I try to add the fonts option in gateway params as @thisisjamessmith explains, and it does not work neither.

{% set params = { order: cart, fonts: { family: 'Nexa', src: 'url({{ baseUrl }}dist/fonts/Nexa-Book.woff2)', weight: '400', }, appearance: { variables: { colorPrimary: '#0570de', colorBackground: '#ffffff', colorText: '#30313d', colorDanger: '#df1b41', fontFamily: 'Nexa', spacingUnit: '2px', borderRadius: '4px', }, } } %}

This is the current code I have, and I have no error or warning in the console, it just does not work.

When I move the fonts option into appearance options, I have this warning:

[Stripe.js] Unrecognized elements-inner-loader-ui.html parameter: fonts is not a recognized parameter. This may cause issues with your integration in the future

Hope it helps

[lukeholder]

I see the issue, although the fonts can be declared in the appearance variables, they need to be passed into the elements group. I have fixed it for the next release.

To get the fix early, change your craftcms/commerce-stripe requirement in composer.json to:

"require": {
  "craftcms/commerce-stripe": "5.x-dev#8dca6a9dc31afea0b3bf745f2eb87ee5453ef34e as 5.0.7",
  "...": "..."
}

Then run composer update.

We will update this ticket once the release is out.

You should be able to add fonts to your payment form like this:

{% 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 }}

[franck-thorck]

@lukeholder I have updated the commerce-stripe plugin with the version you gave us.

The fonts are still not working. With this code:

{% set params = {
    order: cart,
    fonts: [{
        family: 'Nexa',
        src: 'url(https://nureka.t-k.dev/dist/fonts/Nexa-Book.woff)',
        weight: '300',
    }],
    appearance: {
        variables: {
            fontFamily: 'Nexa',
        },
    },
} %}

{% namespace gateway.handle|commercePaymentFormNamespace %}
    {{ gateway.getPaymentFormHtml(params)|raw }}
{% endnamespace %}

But the font does not change.

[lukeholder]

Commerce 5.1.0 is now released with this fix. Could you try again?