Skip to content

Update Credit Card Widget #566

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
johnbhiggins7 merged 1 commit into from
Aug 24, 2026
Merged

Update Credit Card Widget #566

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/ff-integrations/payments/braintree.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,10 +180,10 @@ Make sure the user is authenticated before triggering the Braintree Payment Acti

#### Using Credit Card

If you want to keep only the Credit Card option on your checkout page, you'll need to add the **CreditCardFrom** widget to the page. Follow the steps below:
If you want to keep only the Credit Card option on your checkout page, you'll need to add the **Credit Card Form** widget to the page. Follow the steps below:

1. Select the **Payment Method** as ***Credit Card***.
2. Drag and drop the [**CreditCardFrom**](../../resources/ui/widgets/built-in-widgets/creditcardform.md) widget onto the canvas.
2. Drag and drop the [**Credit Card Form**](../../resources/ui/widgets/built-in-widgets/creditcardform.md) widget onto the canvas.
3. You can modify the design of the form widget as per your app's needs.
4. Again select the **checkout button** to complete defining the Action.
5. Enter the **Currency Code** and you can define the optional attributes like **Tax Rate Percentage** and **Shipping Cost**.
Expand Down
231 changes: 40 additions & 191 deletions docs/resources/ui/widgets/built-in-widgets/creditcardform.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,105 +1,39 @@
---
slug: credit-card-form
title: CreditCardForm
title: Credit Card Form
tags: [Form Elements]
description: Learn how to add CreditCardForm in your FlutterFlow app.
description: Learn how to add, use, and customize a Credit Card Form widget in your FlutterFlow app.
---
# CreditCardForm
The CreditCardForm widget allows users to enter their credit card details such as card number, expiry date, and CVV.

:::tip[Widget State]
Before diving into form widgets, check out our guide on [**Widget States**](../../../../ff-concepts/state-management/widget-state.md) to efficiently manage the state and behavior of your form elements.
:::

## Adding CreditCardForm widget

Here's an example of how you can add the CreditCardForm widget to your project:

1. First, drag the **CreditCardForm** widget from the **Form Elements** tab (in the Widget Panel) or add it directly from the widget tree.
2. 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.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/6Dts9CnoGLcjV7yfd18t?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

## Customizing

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

### Obscuring CVV
# Credit Card Form

By default, the CVV number is visible when you type in. It's essential that you obscure (number becomes •, i.e. dot) it.
The **Credit Card Form** widget lets users enter a card number, expiration date, and card verification value (CVV). Use it when accepting credit card payments through the [**Braintree integration**](../../../../ff-integrations/payments/braintree.md).

To obscure the CVV:
The form collects the card details required by the payment flow, but it does not process a payment on its own. To complete the transaction, use it with the **Braintree Payment** action.

1. Select the **CreditCardForm** widget from the widget tree or the canvas area.
2. Move to the properties panel, find the **Obscure CVV** toggle and turn it on.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/I2IW77H5hutQeJ3lb1M2?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>
:::warning[Sensitive payment information]
Do not store card numbers, expiration dates, or CVVs in app state, databases, logs, or analytics. Configure and process the payment through the [**Braintree payment workflow**](../../../../ff-integrations/payments/braintree.md).
:::

### Adding background color
## Adding a Credit Card Form Widget

To change the background color of the fields:
To add a Credit Card Form widget:

1. Select **CreditCardForm** from the widget tree or the canvas area.
2. Move to the Properties panel and scroll down to the **Input Decoration Properties** section.
3. Find the **Fill** toggle and turn it on.
4. 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.
1. From **Form Elements** in the **Widget Palette**, add the widget listed as **CreditCardForm**.
2. Select the widget, then configure the following settings as needed in the **Properties Panel**.
- **Obscure Card Number:** Controls whether the card number remains masked during entry.
- **Obscure CVV:** Controls whether the CVV remains masked during entry.
- **Line Spacing:** Sets the vertical space between the form's input rows.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
paddingBottom: 'calc(56.67989417989418% + 41px)',
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/ljPUAPoTnnzbIuHmY36Z?embed&show_copy_link=true"
title=""
width: '100%'
}}>
<iframe
src="https://demo.arcade.software/sezH4YZ9dUj58oVedQ3T?embed&show_copy_link=true"
title="Add a Credit Card Form widget"
style={{
position: 'absolute',
top: 0,
Expand All @@ -108,124 +42,39 @@ To change the background color of the fields:
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
frameBorder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### Customizing border

To customize the border around the credit card fields:

1. Select **CreditCardForm** from the widget tree or the canvas area.
2. Move to the Properties panel and scroll down to the **Input Decoration Properties** section.
3. Select from the **Input Border Type** dropdown.
1. Choose **Outline** to place a border around the entire field.
2. Choose **Underline** to place a border only on the bottom of the field.
3. Choose **None** to eradicate the border.
4. 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.
5. Find the **Border Width** property below, and enter the desired value.
6. 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.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/DITM2NAdDCig4ROcCNBb?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>

### Add content padding

Content padding adds space between the field text and the border.
## Using the Credit Card Form

To add the content padding:
To use the Credit Card Form:

1. Select **CreditCardForm** from the widget tree or the canvas area.
2. Move to the Properties panel (on the right side of your screen) and scroll down to the **Input Decoration Properties** section.
3. Find the **Content Padding** property and enter the values for L(left), T(top), R(right), and B(bottom) input boxes.

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/yo2Ed2Vh5ekDiTi9D3XK?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>
1. Complete the [**Braintree setup**](../../../../ff-integrations/payments/braintree.md#1-setup-payments-integration) for your project.
2. Add the Credit Card Form and a checkout button to the same page.
3. Add the [**Braintree Payment**](../../../../ff-integrations/payments/braintree.md#3-trigger-payment-action) action to the button and select **Credit Card** as the payment method.

### Reducing field height
The Braintree Payment action uses the details entered in the form to process the transaction.
## Customizing the Credit Card Form Widget

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.
### Text Style

To reduce the field height:
Use **Text Style** to control the font, size, weight, color, and alignment of text in the card fields.

1. Select **CreditCardForm** from the widget tree or the canvas area.
2. Move to the Properties panel (on the right side of your screen) and scroll down to the **Input Decoration Properties** section.
3. Find the **Dense** toggle and turn it on.
### Input Decoration Properties

<div style={{
position: 'relative',
paddingBottom: 'calc(56.67989417989418% + 41px)', // Keeps the aspect ratio and additional padding
height: 0,
width: '100%'}}>
<iframe
src="https://demo.arcade.software/S8XU621PWxQIEyiuPe8Q?embed&show_copy_link=true"
title=""
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
colorScheme: 'light'
}}
frameborder="0"
loading="lazy"
webkitAllowFullScreen
mozAllowFullScreen
allowFullScreen
allow="clipboard-write">
</iframe>
</div>
<p></p>
- **Input Border Type:** Sets the border type to **Outline**, **Underline**, or **None**.
- **Filled:** Adds a background fill to the input fields.
- **Border Color:** Sets the border color.
- **Fill Color:** Sets the input background color when **Filled** is enabled.
- **Border Width:** Sets the border thickness.
- **Border Radius:** Rounds the field corners. Apply one value to all corners or configure each corner separately.
- **Content Padding:** Sets the left, top, right, and bottom spacing between the field content and its border.
- **Dense:** Reduces the vertical space used by the input fields for a more compact form.
Loading