fix: Stripe custom fonts do not work

[rickalday]

Bug Report

User Story

As a site admin, I want to be able to use custom fonts in Stripe cc fields to integrate with my site typography.

Details

Current Behavior

The font files do not load. Custom CSS works but the font file itself will not apply to the cc elements. I tested with custom fonts and Google Fonts.

Expected Behavior

I expect fonts to load.

Bug Type

• [ ] This bug describes functionality that once worked as expected in version X.X.X.
• [ ] This bug describes functionality that never worked as expected.
• [x] I am not sure whether this functionality ever worked as expected.

Steps to Reproduce

Followed this guide: https://givewp.com/documentation/add-ons/stripe-gateway/styling-stripe-elements-cc-fields/

Possible Solution

It seems that the Stripe array we output for the fonts is not in the correct format that Stripe requires. That's why it picks up the font styles but not the font file itself. I may this change in give/assets/dist/js/give-stripe.js to get it to work:

Related

https://secure.helpscout.net/conversation/1155811145/64617/

Acceptance Criteria

• [x] Custom fonts and Google fonts load correctly in Stripe cc fields

Environment

Operating System

• Platform: Mac OS X | Microsoft Windows | Linux | Android | iOS
• Version: X.X.X

Browser

• Name: Chrome | Firefox | Safari | IE | Edge
• Version: X.X.X

WordPress System Info

[rickalday]

https://secure.helpscout.net/conversation/1158495709/64870/

[sirschuyler]

Proposed fix loads custom Google Fonts initially, but breaks again when switching to another payment mode and back to Stripe CC again.

[mehul0810]

Here is a way to check whether the fonts are loading properly or not for the Stripe CC fields.

click over to the Computed tab next to styles in the chrome dev tools. scroll all the way to the bottom and you will see that Times (system font is what is actually loading

[sirschuyler]

@mehul0810 I think a better solution to check whether Google Fonts are loading is inspecting the Stripe CC element's iframe… when Google Fonts are actually loaded and implemented for the Stripe CC field (using the fix suggested by @rickalday) it adds the proper @font-face css to the <style> tag.

Like so…

It may also be important to distinguish that this is a "single" type Stripe CC field, as opposed to "multiple" type.

And again, fix only works initially, but breaks on switching back and forth between payment methods.

Another important note, the embedded iframe cannot be manipulated directly via js, css, outside of the Give plugin. Thus, the implementation of Google/Custom Fonts through Give's admin settings is the only means of customizing fonts properly.

[mehul0810]

@DevinWalker @ravinderk

There are 2 points which need to be resolved as a part of this issue:

1. With Give 2.6.3, the CC fields loaded doesn't load fonts. (This has been already resolved in Give 2.7.0)
2. With Give 2.7.0, the CC fields loaded are not loading fonts when we switch payment gateways because the Stripe elements are not called on switching the payment gateways.

To resolve point (2), it requires us to modify JS at multiple places which is not a quick fix. I would suggest working on this issue when we implement Legacy Stripe checkout using Stripe elements, as during that implementation we will be simplifying the JS for all the Stripe payment methods.

Here is the reference issue which we can convert to EPIC: https://github.com/impress-org/givewp/issues/4775

@DevinWalker Let me know what do you think?

Why point (2) is not a quick fix?

The reason is the Fix/Possible Solution suggested by @rickalday is based on the minified JS. So, changing into that JS will not work as development goes with different JS which is not a minified version.

@sirschuyler The @font-face implementation under the iframe you mentioned is the same thing I told as a @font-face will get rendered only when the fonts are rendered. So, when you follow my steps you will see whether the specific fonts are rendered or not. Hence, we both are suggesting the same way but different area in Inspect Element to test.

[mehul0810]

@DevinWalker This issue has been resolved as a part of https://github.com/impress-org/givewp/issues/4775

Commits: https://github.com/impress-org/givewp/commit/2939794997d6d06fe4a821d676b0f469ced5f069

We can close this issue once we merge PR of #4775 in coming weeks.

[canny[bot]]

This issue has been linked to a Canny post: Google Fonts do not load in the Stripe iframe fields :tada:

[JasonTheAdams]

This is old and Stripe has changed their API. The next time we make changes it will likely be to use the new Stripe Element which has new methods of styling.