wpformsでstripe導入した時にCSSのフォント指定がエラーの原因だった

worddpressのフォームプラグイン wpformsのアドオンでstripeを導入する時に下記のエラーがでた

Uncaught IntegrationError: Invalid style configuration value: -apple-system, system-ui, "Helvetica Neue", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", メイリオ, Meiryo, "MS Pゴシック", sans-serif. This value contains invalid characters.
    at new t (https://js.stripe.com/v3/fingerprinted/js/shared-327b8fb2bc89e85cd4a896a50f3aac71.js:1:108253)
    at ce (https://js.stripe.com/v3/fingerprinted/js/ui-shared-1b1ccab5d3a3533ae6ad0cff0fb15327.js:1:184034)
    at https://js.stripe.com/v3/fingerprinted/js/ui-shared-1b1ccab5d3a3533ae6ad0cff0fb15327.js:1:186730
    at Array.reduce (<anonymous>)
    at https://js.stripe.com/v3/fingerprinted/js/ui-shared-1b1ccab5d3a3533ae6ad0cff0fb15327.js:1:186585
    at https://js.stripe.com/v3/fingerprinted/js/ui-shared-1b1ccab5d3a3533ae6ad0cff0fb15327.js:1:188013
    at Array.reduce (<anonymous>)
    at Oe (https://js.stripe.com/v3/fingerprinted/js/ui-shared-1b1ccab5d3a3533ae6ad0cff0fb15327.js:1:187850)
    at https://js.stripe.com/v3/fingerprinted/js/shared-327b8fb2bc89e85cd4a896a50f3aac71.js:1:81971
    at https://js.

エラーの原因を調べるとCSSのフォント指定がstripeのフォームにかかるとエラーが表示されるようで、

たとえば、

*{ font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue", }

だとエラー。

h1, h2, h3, h4, h5, h6, .heading-font, .off-canvas-center .nav-sidebar.nav-vertical > li > a,p,li,small,label{ font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue", 'Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,'MS Pゴシック',sans-serif;}

だとエラーなし。

エラーを起こすとstripeのカード入力ができない。

ちなみに、正常にstripeが動いてる画面はこちら

CSSの指定でアドオンが動かないことってあるんだって驚いたので、備忘録としてかいてみました。