反復スタイルは何もしません

Question

再発的に構成スタイルが動作しません。正確な例をGetting Startedの下にあるドキュメントからコピーしました。そのIDがiframeのフィールドに適用されていないようです。

Answer 1

あなたはそうのようなdiv要素にIDを適用する必要があります。

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

キャッチは、それが正しくdiv要素のそれぞれに適用する必要があるか、それらのどれも動作しないということです。

Answer 2

私は同じ問題がありました。 Recurlyのサポートに話をした後、彼らはドキュメントを更新する必要があることを発見しました。

例recurly.configure()は機能しません。あなたはjsにfields:{}を含める必要はありません。ここで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>

彼らはまた、私の基本的な実施例とのリンクを送っ

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

：だから、このような何かにそれを更新することができます