Форма для банковской карты

Виджет CreditCardForm позволяет пользователям вводить данные своей кредитной карты, такие как номер карты, срок действия и CVV.

Вы можете использовать этот виджет, когда хотите принимать оплату по кредитной карте, используя метод оплаты Braintree.

Вот пример того, как вы можете добавить виджет CreditCardForm в свой проект:

• Сначала перетащите виджет CreditCardForm с вкладки Form Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• При вводе номер карты становится непонятным (число превращается в -, т.е. точку). Чтобы отключить эту функцию и позволить пользователям видеть полный номер, перейдите на панель свойств, найдите переключатель Obscure Card Number и выключите его.

Вы можете настроить поведение и внешний вид этого виджета с помощью различных свойств, доступных на панели свойств.

По умолчанию номер CVV виден при вводе. Необходимо скрыть его (число превращается в -, т.е. ставится точка).
Чтобы скрыть CVV:

• Выберите виджет CreditCardForm в дереве виджетов или в области холста.
• Перейдите на панель свойств, найдите переключатель Obscure CVV и включите его.

Чтобы изменить стиль текста:

• Выберите виджет CreditCardForm в дереве виджетов или в области холста.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела «Стиль текста«.
• Найдите свойство Theme Text Style и измените стиль в соответствии с инструкциями здесь.

Чтобы изменить цвет фона полей:

• Выберите CreditCardForm в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Свойства оформления ввода.
• Найдите переключатель Fill и включите его.
• Теперь найдите свойство Fill Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите на Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопки Палитра и Просто.

Чтобы настроить границы вокруг полей кредитной карты:

• Выберите CreditCardForm в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Свойства оформления ввода.
• Выберите в раскрывающемся списке Тип границы ввода.
  • Выберите Outline, чтобы установить границу вокруг всего поля.
  • Выберите Подчеркивание, чтобы установить границу только в нижней части поля.
  • Выберите Нет, чтобы стереть границу.
• Прокрутите страницу вниз, чтобы найти свойство Border Color (Цвет границы), нажмите на поле рядом с уже выбранным цветом, выберите цвет, а затем нажмите Use Color (Использовать цвет) или нажмите на уже выбранный цвет и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопки Палитра и Просто.
• Найдите ниже свойство Border Width (Ширина границы) и введите нужное значение.
• Теперь найдите свойство Радиус границы и введите значение 50. По умолчанию значение 50 будет установлено для всех углов, а именно TL (верхний левый), TR (верхний правый), BL (нижний левый) и BR (нижний правый). Нажмите на значок замка (), чтобы изменить каждый угол отдельно.

Подшивка содержимого добавляет пространство между текстом поля и границей.

Чтобы добавить подложку для содержимого:

• Выберите CreditCardForm в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Свойства оформления ввода.
• Найдите свойство Content Padding и введите значения для полей ввода L(слева), T(сверху), R(справа) и B(снизу).

Возможно, вам захочется уменьшить высоту поля, чтобы оно соответствовало вашему дизайну. Используя свойство dense, вы можете уменьшить высоту поля до заданного размера.

Чтобы уменьшить высоту поля:

• Выберите CreditCardForm в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Свойства оформления ввода.
• Найдите переключатель Плотность и включите его.

Здесь приведены инструкции по добавлению подкладок.

Здесь приведены инструкции по настройке выравнивания.

Посмотрите, как установить цвет из переменной в любое свойство цвета этого виджета.

Инструкции по отображению/скрытию виджета находятся здесь.