swell.payment.createElements does not respect seperateElements option

[VojtaSim]

I'd like to render separate elements for card's number, expiration and CVC. However when I use config for swell.payment.createElements mentioned in official docs it does not respect seperateElements option.

In browser I get this error message:

The selector you specified (#card-element) applies to no DOM elements that are currently on the page.
Make sure the element exists on the page before calling mount().

When I specify elementId directly for card and use it without !seperateElements: true` it works.

useEffect(() => {
    swell.payment.createElements({
      card: {
        seperateElements: true,
        cardNumber: {
          elementId: '#card-number',
        },
        cardExpiry: {
          elementId: '#card-expiry',
        },
        cardCvc: {
          elementId: '#card-cvc',
        }
      }
    })
  }, [])

return (
  <label>
    <span className="copy">Card Number</span>
    <div id="card-number" />
  </label>
  <div className="flex flex-between gap-20">
    <label className="flex-1">
      <span className="copy">Card Expiry</span>
      <div id="card-expiry" />
    </label>
    <label className="flex-1">
      <span className="copy">CVC</span>
      <div id="card-cvc" />
    </label>
  </div>
)

[vstudenichnik-insoft]

Hi @VojtaSim, we are working on a fix. As a temporary workaround, you can replace the DOM element IDs like this:

<div id="cardNumber-element" />
<div id="cardExpiry-element" />
<div id="cardCvc-element" />

[VojtaSim]

I pushed PR with the fix #99