递归风格不做任何事情

Question

recurly.configure 样式不起作用。我已经从 Getting Started 下的文档中复制了确切的示例并且该 ID 似乎未应用于 iframe 中的字段。

Answer 1

我遇到了同样的问题。在与 Recurly 的支持人员交谈后，他们发现文档需要更新。

示例 recurly.configure() 将不起作用。您不需要在 js 中包含 fields:{}。所以你可以把它更新成这样:

  recurly.configure({
    publicKey: 'PUBLIC_KEY',
    style: {
      all: {
        fontFamily: 'Open Sans',
        fontSize: '1rem',
        fontWeight: 'bold',
        fontColor: '#2c0730'
      },
      number: {
        placeholder: ''
      },
      month: {
        placeholder: 'mm'
      },
      year: {
        placeholder: 'yy'
      }
    }
  });

他们还向我发送了一个包含基本工作示例的链接: https://github.com/recurly/recurly-js-examples/blob/master/public/minimal/index.html

示例内容如下:

      // Configure recurly.js
      recurly.configure({
        publicKey: 'PUBLIC_KEY',
        style: {
          all: {
            fontFamily: 'Open Sans',
            fontSize: '1rem',
            fontWeight: 'bold',
            fontColor: '#2c0730'
          },
          number: {
            placeholder: '0000-0000-0000-0000'
          },
          month: {
            placeholder: 'mm'
          },
          year: {
            placeholder: 'yy'
          }
        }
      });

      // When a customer hits their 'enter' key while in a field
      recurly.on('field:submit', function (event) {
        $('form').submit();
      });

      // On form submit, we stop submission to go get the token
      $('form').on('submit', function (event) {

        // Prevent the form from submitting while we retrieve the token from Recurly
        event.preventDefault();

        // Reset the errors display
        $('#errors').text('');
        $('input').removeClass('error');

        // Disable the submit button
        $('button').prop('disabled', true);

        var form = this;

        // Now we call recurly.token with the form. It goes to Recurly servers
        // to tokenize the credit card information, then injects the token into the
        // data-recurly="token" field above
        recurly.token(form, function (err, token) {

          // send any errors to the error function below
          if (err) error(err);

          // Otherwise we continue with the form submission
          else form.submit();

        });
      });

      // Reconfigure font size based on window size
      $(window).on('resize init', function (event) {
        if ($(this).width() < 600) {
          recurly.configure({
            style: {
              all: {
                fontSize: '0.9rem'
              }
            }
          });
        } else {
          recurly.configure({
            style: {
              all: {
                fontSize: '1rem'
              }
            }
          });
        }
      }).triggerHandler('init');

      // A simple error handling function to expose errors to the customer
      function error (err) {
        $('#errors').text('The following fields appear to be invalid: ' + err.fields.join(', '));
        $('button').prop('disabled', false);
        $.each(err.fields, function (i, field) {
          $('[data-recurly=' + field + ']').addClass('error');
        });
      }

      // runs some simple animations for the page
      $('body').addClass('show');

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: -webkit-linear-gradient(-30deg, #e1e3e6, #ebeff8);
  background: -moz-linear-gradient(-30deg, #e1e3e6, #ebeff8);
  background: -ms-linear-gradient(-30deg, #e1e3e6, #ebeff8);
  background: -o-linear-gradient(-30deg, #e1e3e6, #ebeff8);
  background: linear-gradient(-30deg, #e1e3e6, #ebeff8);
  font-family: 'Open Sans', Helvetica, sans-serif;
  text-align: center;
}

section {
  margin: 0 auto;
  max-width: 16rem;
}

section:first-child {
  overflow: auto;
}

form {
}

label {
  display: block;
  text-align: left;
  width: 100%;
  margin: 0 0 0.2rem;
  color: #2c0730;
  font-size: 0.8rem;
  font-weight: bold;
  text-transform: uppercase;
  clear: left;
}

input {
  position: relative;
  width: 100%;
  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;
}

input:focus {
  border-color: #2c0730;
  color: #2c0730;
  z-index: 10;
}

input.error {
  border-color: #e43c29;
}

div.error .recurly-hosted-field {
  border: 2px solid #e43c29;
}

div.date {
  display: inline-block;
  width: 4.5rem;
  float: left;
  text-align: left;
  margin-right: -2px;
}

div.date label {
  display: inline-block;
  clear: none;
}

div.date input {
  display: inline-block;
}

button {
  border: none;
  width: 100%;
  background: #2c0730;
  outline: none;
  padding: 1rem;
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.15rem;
  color: #f5f5f5;
  cursor: pointer;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  -ms-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

button:disabled {
  opacity: 0.6;
}

figure {
  margin: 0;
}

figure.logo {
  width: 9rem;
  height: 9rem;
  background: #f5f5f5;
  border-radius: 100px;
  margin: 2rem auto;
  line-height: 9rem;
  letter-spacing: 0.1rem;
  font-size: 1.5rem;
  color: #2c0730;
  -webkit-transition: border-radius 0.5s, width 0.5s, height 0.5s, margin 0.5s, line-height 0.5s;
  -moz-transition: border-radius 0.5s, width 0.5s, height 0.5s, margin 0.5s, line-height 0.5s;
  -ms-transition: border-radius 0.5s, width 0.5s, height 0.5s, margin 0.5s, line-height 0.5s;
  -o-transition: border-radius 0.5s, width 0.5s, height 0.5s, margin 0.5s, line-height 0.5s;
  transition: border-radius 0.5s, width 0.5s, height 0.5s, margin 0.5s, line-height 0.5s;
}

figure.logo .term {
  line-height: 1em;
  font-size: 0.5em;
  margin-left: -0.25rem;
}

figure.success {
  width: 100%;
  background: #30af3b;
  padding: 1rem;
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: bold;
  letter-spacing: 0.15rem;
  color: #f5f5f5;
  opacity: 0;
  position: relative;
  top: 4rem;
  -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -moz-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -ms-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -o-transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transition: opacity 0.5s 0.25s, top 1s;
  -moz-transition: opacity 0.5s 0.25s, top 1s;
  -ms-transition: opacity 0.5s 0.25s, top 1s;
  -o-transition: opacity 0.5s 0.25s, top 1s;
  transition: opacity 0.5s 0.25s, top 1s;
}

@media screen and (max-height: 599px) {
  figure.logo {
    width: 100%;
    height: 3rem;
    margin: 2rem auto 1rem;
    border-radius: 0;
    line-height: 3rem;
  }
}

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

<script src="https://js.recurly.com/v4/recurly.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<section>
      <figure class="logo">
        <span class="price">$10</span>
        <span class="term">monthly</span>
      </figure>
    </section>

    <section id="errors"></section>

    <section>
      <form method="post" action="/api/subscriptions/new">
        <div>
          <label for="number">Card Number</label>
          <div data-recurly="number" id="number"></div>
        </div>

        <div class="date">
          <label for="month">Month</label>
          <div data-recurly="month" id="month"></div>
        </div>

        <div class="date">
          <label for="year">Year</label>
          <div data-recurly="year" id="year"></div>
        </div>

        <div>
          <label for="first_name">First Name</label>
          <input type="text" data-recurly="first_name" id="first_name" name="first-name">
        </div>

        <div>
          <label for="last_name">Last Name</label>
          <input type="text" data-recurly="last_name" id="last_name" name="last-name">
        </div>

        <button id="subscribe">Subscribe</button>

        <input type="hidden" data-recurly="token" name="recurly-token">
      </form>
    </section>