FlutterFlow Docs
Search…
⌃K

CreditCardForm

The CreditCardForm widget allows users to enter their credit card details such as card number, expiry date, and CVV.
You can use this widget when you want to accept payment via credit card while using the Braintree payment method.
CreditCardForm widget

Adding CreditCardForm widget

Here's an example of how you can add the CreditCardForm widget to your project:
  • First, drag the CreditCardForm widget from the Form Elements tab (in the Widget Panel) or add it directly from the widget tree.
  • When you type in, the card number gets obscured (number becomes •, i.e., dot). To disable this feature and allows users to see the full number, move to the properties panel, find the Obscure Card Number toggle and turn it off.
Adding CreditCardForm widget

Customizing

You can customize the behavior and appearance of this widget using the various properties available under the properties panel.

Obscuring CVV

By default, the CVV number is visible when you type in. It's essential that you obscure (number becomes •, i.e. dot) it.
To obscure the CVV:
  • Select the CreditCardForm widget from the widget tree or the canvas area.
  • Move to the properties panel, find the Obscure CVV toggle and turn it on.
Obscuring CVV

Styling text

To change text style:
  • Select the CreditCardForm widget from the widget tree or the canvas area.
  • Move to the properties panel (on the right side of your screen) and scroll down to the Text Style section.
  • Find the Theme Text Style property and change the style as per instructions here.
Styling text

Adding background color

To change the background color of the fields:
  • Select CreditCardForm from the widget tree or the canvas area.
  • Move to the Properties panel and scroll down to the Input Decoration Properties section.
  • Find the Fill toggle and turn it on.
  • Now find the Fill Color property, click on the box next to Unset, select the color, and then click Use Color or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple buttons.
Adding background color

Customizing border

To customize the border around the credit card fields:
  • Select CreditCardForm from the widget tree or the canvas area.
  • Move to the Properties panel and scroll down to the Input Decoration Properties section.
  • Select from the Input Border Type dropdown.
    • Choose Outline to place a border around the entire field.
    • Choose Underline to place a border only on the bottom of the field.
    • Choose None to eradicate the border.
  • Scroll down a bit to find the Border Color property, click on the box next to the already selected color, select the color, and then click Use Color or click on an already selected color and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple buttons.
  • Find the Border Width property below, and enter the desired value.
  • Now, Enter the Border Radius property and enter the value as 50. By default, the value 50 will be set for all corners, which are TL (Top left), TR (top right), BL (bottom left), and BR (bottom right). Click on the lock icon (
    ) to change each corner separately.
Customizing border

Add content padding

Content padding adds space between the field text and the border.
To add the content padding:
  • Select CreditCardForm from the widget tree or the canvas area.
  • Move to the Properties panel (on the right side of your screen) and scroll down to the Input Decoration Properties section.
  • Find the Content Padding property and enter the values for L(left), T(top), R(right), and B(bottom) input boxes.
Add content padding

Reducing field height

You might want to reduce the field height to match your design. Using the dense property, you can reduce the field height to a predefined size.
To reduce the field height:
  • Select CreditCardForm from the widget tree or the canvas area.
  • Move to the Properties panel (on the right side of your screen) and scroll down to the Input Decoration Properties section.
  • Find the Dense toggle and turn it on.
Reducing field height

Add padding

Here are the instructions on how to add padding.

Adjust alignment

Here are the instructions on adjusting the alignment.

Set color dynamically

See how to set a color from variable to any color property of this widget.

Show/hide widget

Please find the instructions to show/hide the widget here.