diff --git a/docs/ff-integrations/payments/braintree.md b/docs/ff-integrations/payments/braintree.md index a2e58c55..17da4e57 100644 --- a/docs/ff-integrations/payments/braintree.md +++ b/docs/ff-integrations/payments/braintree.md @@ -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**. diff --git a/docs/resources/ui/widgets/built-in-widgets/creditcardform.md b/docs/resources/ui/widgets/built-in-widgets/creditcardform.md index e1e39f74..12ce6c78 100644 --- a/docs/resources/ui/widgets/built-in-widgets/creditcardform.md +++ b/docs/resources/ui/widgets/built-in-widgets/creditcardform.md @@ -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. - -
- -
-

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

+:::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.
-
-

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

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

+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 -
- -
-

\ No newline at end of file +- **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.