Multiple card fields using web-payments API

I’m getting multiple card payment fields generated when using the web_payments api. Can you tell me what causes this? The script is only calling

window.Square.payments(appId, locationId);

once on the page load (addEventListener()).

The ‘#card-container’ generated is:

<div id="card-container"><div id="single-card-wrapper-177c7fc3-5771-3e7d-1f74-247de265cc1e" class="sq-card-wrapper"><div class="sq-card-iframe-container" style="height: 48px;"><iframe frameborder="0" height="48px" name="single-card-177c7fc3-5771-3e7d-1f74-247de265cc1e" scrolling="no" src="https://sandbox.web.squarecdn.com/1.8.2/single-card-element-iframe.html" width="100%" class="sq-card-component"></iframe></div><span class="sq-card-message"></span></div><div id="single-card-wrapper-0b4446d6-03de-853b-80e9-067fb9cbd09f" class="sq-card-wrapper"><div class="sq-card-iframe-container" style="height: 48px;"><iframe frameborder="0" height="48px" name="single-card-0b4446d6-03de-853b-80e9-067fb9cbd09f" scrolling="no" src="https://sandbox.web.squarecdn.com/1.8.2/single-card-element-iframe.html" width="100%" class="sq-card-component"></iframe></div><span class="sq-card-message"></span></div></div>