定期.js插入带有巨大空白的 iFrame

Question

定期.js插入带有巨大空格的iFrame。API 密钥没有错误，我在正确的位置插入了"https://js.recurly.com/v4/recurly.js"。我所有的div都按预期被iFrame替换，但它们只是显示为空白。替换内容的示例。

<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;
}