Credit Card Form

Credit Card Form — готовая форма для ввода данных банковской карты: номер, срок действия и код CVV. Нужна, когда оплата принимается через интеграцию с Braintree.

Сама по себе форма платёж не проводит — она только собирает данные, которые нужны платёжному потоку. Списывает деньги действие Braintree Payment.

внимание

Данные карты

Не сохраняйте номер карты, срок действия и CVV — ни в состоянии приложения, ни в базе, ни в логах, ни в аналитике. Платёж настраивается и проводится через Braintree.

Во вкладке Form Elements в Widget Palette найдите виджет CreditCardForm и перетащите его на холст.
Выделите форму и настройте в панели свойств:
- Obscure Card Number — скрывать ли номер карты точками по мере ввода.
- Obscure CVV — скрывать ли код CVV. Три цифры с обратной стороны карты подсматриваются через плечо не хуже пароля, так что скрывать их стоит.
- Line Spacing — расстояние между строками формы по вертикали.

Как использовать

Пройдите настройку Braintree в проекте.
Положите на страницу форму карты и кнопку оплаты.
Повесьте на кнопку действие Braintree Payment и выберите Credit Card как способ оплаты.

Дальше действие само возьмёт из формы то, что ввёл пользователь, и проведёт платёж.

Текст

Раздел Text Style задаёт шрифт, размер, начертание, цвет и выравнивание текста в полях формы.

Поля ввода

Input Border Type — вид рамки: Outline (вокруг всего поля), Underline (только линия снизу) или None.
Filled — залить поля фоном.
Border Color — цвет рамки.
Fill Color — цвет фона, когда включён Filled.
Border Width — толщина рамки.
Border Radius — скругление углов: одно значение на все четыре или каждый угол отдельно.
Content Padding — отступы между содержимым поля и рамкой: L (слева), T (сверху), R (справа), B (снизу).
Dense — сжимает поля по высоте; пригодится, когда форма не помещается в макет.