Stripe Element get error when trying to apply Style

Question

I am creating an Element from stripe.js

My code is: Html part:

<div class="group">
    <label>
      <span>Card number</span>
      <div id="card-number" class="field"></div>
    </label>
    <label>
      <span>Expiry date</span>
      <div id="card-expiry" class="field"></div>
    </label>
    <label>
      <span>CVC</span>
      <div id="card-cvc" class="field"></div>
    </label>
  </div>

The JS relevent part:

var style = {
      base: {
        iconColor: '#666EE8',
        color: '#31325F',
        lineHeight: '40px',
        fontWeight: 300,
        fontFamily: 'Helvetica Neue',
        fontSize: '15px',
    
        '::placeholder': {
          color: '#CFD7E0',
        },
      },
    };
  
    var cardNumber = elements.create('cardNumber'/*, {style: style}*/);
    cardNumber.mount('#card-number');

    var cardExpiry = elements.create('cardExpiry'/*, {style: style}*/);
    cardExpiry.mount('#card-expiry');

    var cardCvc = elements.create('cardCvc'/*, {style: style}*/);
    cardCvc.mount('#card-cvc');

While I keep the {style: style} option commented, everything works fine, but as soon as i try to apply the style, i have the following error:

The last overload gave the following error.
Argument of type '"cardCvc"' is not assignable to parameter of type '"paymentRequestButton"'.
var cardCvc = elements.create('cardCvc', {style: style});

Note: I have this error for the 3 elements up there.

According to the documentation, this code should be valid. Can anyone enlighten me on this one?

Answer 1

I finaly found the mistake:

Checking the StripeElementStyle element, the fontWeight is a string meaning that the line: fontWeight: 300 made the variable style interpreted as an other interface.

I fixed that using fontWeight: '300'