Recurly.js вставляет iFrames с гигантским пробелом

Question

Recurly.js вставляет iFrames с гигантскими пробелами. Нет ошибок с API-ключом, и я вставил " https://js.recurly.com/v4/recurly.js" в правильном месте. Все мои div'ы заменяются на iFrames, как и ожидалось, но они просто отображаются как пробелы. Пример того, что заменяется на.

<div data-recurly="number">
  <div class="recurly-hosted-field recurly-hosted-field-number">
    <iframe src="https://api.recurly.com/js/v1/field.html#config=%7B%22type%22%3A%22number%22%2C%22selector%22%3A%22%5Bdata-recurly%3Dnumber%5D%22%2C%22style%22%3A%7B%7D%2C%22recurly%22%3A%7B%22currency%22%3A%22USD%22%2C%22timeout%22%3A60000%2C%22publicKey%22%3A%22ewr1-bLIWZt0VgjgKdetoJyJ5yM%22%2C%22parent%22%3Atrue%2C%22parentVersion%22%3A%224.5.2%22%2C%22cors%22%3Atrue%2C%22fraud%22%3A%7B%22kount%22%3A%7B%22dataCollector%22%3Afalse%7D%2C%22litle%22%3A%7B%22sessionId%22%3Anull%7D%7D%2C%22api%22%3A%22https%3A%2F%2Fapi.recurly.com%2Fjs%2Fv1%22%2C%22fields%22%3A%7B%22all%22%3A%7B%22style%22%3A%7B%7D%7D%2C%22number%22%3A%7B%22selector%22%3A%22%5Bdata-recurly%3Dnumber%5D%22%2C%22style%22%3A%7B%7D%7D%2C%22month%22%3A%7B%22selector%22%3A%22%5Bdata-recurly%3Dmonth%5D%22%2C%22style%22%3A%7B%7D%7D%2C%22year%22%3A%7B%22selector%22%3A%22%5Bdata-recurly%3Dyear%5D%22%2C%22style%22%3A%7B%7D%7D%2C%22cvv%22%3A%7B%22selector%22%3A%22%5Bdata-recurly%3Dcvv%5D%22%2C%22style%22%3A%7B%7D%7D%7D%2C%22required%22%3A%5B%5D%7D%7D" border="0" frameborder="0" allowtransparency="true" scrolling="no" style="height: 100%; width: 100%; background: transparent;">
    </iframe>
  </div>
</div>

Не знаю, куда идти отсюда, потому что он не показывает никаких ошибок.

Answer 1

Я думаю, вам нужен их CSS, чтобы справиться с этим. Пытаться

.recurly-hosted-field {
  position: relative;
  width: 100%;
  height: 42px;
  border: 2px solid #c2c2c2;
  background: transparent;
  padding: 0.5rem;
  margin: 0 0 1rem;
  outline: none;
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  box-shadow: none;
  border-radius: 0;
  color: #c2c2c2;
  -webkit-appearance: none;
  -webkit-transition: border-color 0.3s;
  -moz-transition: border-color 0.3s;
  -ms-transition: border-color 0.3s;
  -o-transition: border-color 0.3s;
  transition: border-color 0.3s;
}
.recurly-hosted-field-focus {
  border-color: #2c0730;
  color: #2c0730;
  z-index: 10;
}