使用Recurly付款表单和React会产生大量空白iFrame。样式删除字段

Question

Recurly instructions on how to build a form

Github repository that demonstrates the problem.

我的表格：

<form id="recurly_form">

          <div data-recurly="number"></div>
          <div data-recurly="month"></div>
          <div data-recurly="year"></div>
          <div data-recurly="cvv"></div>
          <button onClick={this.handleFormSubmit} >
            Place order
          </button>
        </form>

我尽一切努力确保在安装完所有内容后进行configure调用：

componentDidMount() {
    $(() => {
      window.recurly.configure({
        publicKey: "ewr1-xxxxxxxxxxxxxxxxx"
      });
    });
  }

最终结果是一个带有按钮的高大黑屏：

Markup看起来像这样：

请注意，月份字段设置为visibility：hidden。另请注意，<div data-recurly="number"></div>为空。这是我尝试使用说明书中提供的样式进行样式设计的结果。

请告知缺少的内容。