Форматирование полей ввода Recurly.js

Я создаю форму для обработки платежа через Recurly. Поля non-recurly.js используют Bootstrap для своего макета.

Я могу стилизовать содержащий DIV, чтобы граница и радиус границы соответствовали полям Bootstrap, но Bootstrap устанавливает отступы для полей ввода:

padding: 6px 12px;

... Я считаю, что вы передаете стили для фактических полей ввода через рекурсивную настройку, поэтому я попробовал это:

style: {
        all: {
            fontFamily: 'Verdana',
            fontSize: '14px',
            fontWeight: 'normal',
            padding: '8px'
        },
        number: {
            placeholder: 'Credit card number'
        },
        month: {
            placeholder: 'Exp. Month (mm)'
        },
        year: {
            placeholder: 'Exp. Year (yy)'
        }
    }

... но он просто игнорирует заполнение. Есть ли где-нибудь список «поддерживаемых» параметров стиля для Recurly.js? Кто-нибудь понял, как получить отступы в поле ввода iFramed/injected?


twitter-bootstrap recurly
person Michael Fromin    schedule 27.05.2016    source источник
comment
Из Документов --› СТИЛИРОВАНИЕ ПОЛЕЙ КАРТОЧКИ   -  person vanburen    schedule 28.05.2016
comment
@vanburen - это (к сожалению) пример, но он не дает исчерпывающего списка того, что вы можете поместить в вызов configure ().   -  person Michael Fromin    schedule 28.05.2016

Ответы (1)


arrow_upward
2
arrow_downward

В Recurly есть несколько классов css, которые можно стилизовать. Я обнаружил, что это намного проще, чем пытаться использовать их стиль js.

Поэтому я стилизую эти классы с помощью css и игнорирую все параметры js.

.recurly-hosted-field        = Default styles for the div surrounding each field iframe.
.recurly-hosted-field-focus  = Applied when the user focuses on a field.
.recurly-hosted-field-number = Default styles for the div surrounding the month field iframe.
.recurly-hosted-field-month  = Default styles for the div surrounding the month field iframe.
.recurly-hosted-field-year   = Default styles for the div surrounding the year field iframe

Документы: https://dev.recurly.com/docs/getting-started-1 У них есть таблица внизу этой ссылки, в которой есть эти классы

person BHOLT    schedule 09.08.2016