recurly.configure стиль не работает. Я скопировал точный пример из документов под номером Getting Started, и похоже, что идентификатор не применяется к полю в iframe.Recurly стиль ничего не делает
2
A
ответ
0
Вы должны применить идентификатор к DIV так:
<div data-recurly="number" id='recurly-number'></div>
Загвоздка в том, что она должна быть применена к каждому из дивы правильно или ни один из них не работает.
1
У меня была та же проблема. После разговора с поддержкой Recurly они обнаружили, что документы необходимо обновить.
Пример recurly.configure()
не будет работать. Вам не нужно включать fields:{}
в js. Таким образом, вы можете обновить его на что-то вроде этого:
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>
Смежные вопросы
- 1. кнопка отправки не делает ничего
- 2. exec() ничего не делает
- 3. BackupAgent не делает ничего
- 4. javascript ничего не делает
- 5. user_save ничего не делает?
- 6. Jcrop ничего не делает
- 7. PushViewController ничего не делает
- 8. JFrame.setsize() не делает ничего
- 9. принадлежитTo ничего не делает
- 10. ExecuteSQL ничего не делает
- 11. this.model.destroy ничего не делает
- 12. Task.Factory.StartNew ничего не делает
- 13. $ .isNumeric ничего не делает
- 14. Filechooser ничего не делает
- 15. Proguard ничего не делает
- 16. Кнопка ничего не делает
- 17. UILocalNotification ничего не делает
- 18. Jsoup ничего не делает
- 19. JScrollBar ничего не делает
- 20. toFixed ничего не делает
- 21. SetText ничего не делает
- 22. Javascript ничего не делает
- 23. dev_appserver.py ничего не делает
- 24. requestRecordPermission ничего не делает
- 25. Chrome.tabs.executeScript ничего не делает
- 26. Divide ничего не делает
- 27. Команда ничего не делает
- 28. MouseListener ничего не делает
- 29. PHP_NEW_EXTENSION() ничего не делает
- 30. requestPermissions() не делает ничего
Этот ответ представляется о ut-date - I_did_ необходимо заключить объект стилей внутри ключа 'fields'. Но похоже, что они применяют только значения стиля _some_? Я не могу изменить цвет границы входных элементов. Кто-нибудь понял это? – sameers