Recurly style doesn't do anything

Question

recurly.configure style does not work. I've copied the exact example from the docs under Getting Started and it looks like the id is not getting applied to the field in the iframe.

Answer 1

Thats correct. It doesnt do anything. Recurly inputs don't even let you change the BACKGROUND COLOR of the input. The individual inputs are basically a waste of your time. Use the CardElement or nothing at all.

Answer 2

I had the same issue. After speaking to Recurly's support, they found that the docs needed to be updated.

The example recurly.configure() won't work. You don't need to include the fields:{} in the js. So you can update it to something like this:

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

They also sent me a link with a basic working example: https://github.com/recurly/recurly-js-examples/blob/master/public/minimal/index.html

Here's the content of the example:

      // 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>

Answer 3

You need to apply the id to the div like so:

<div data-recurly="number" id='recurly-number'></div>

The catch is that it needs to be applied to each of the divs correctly or none of them work.