Stripe Payment

Stripe can be used for accepting payment for any product inside your FlutterFlow app. You will be able to accept payments from users through credit cards, debit cards, Google Pay, and Apple Pay.


Before you add this action, you'll need to complete the Stripe setup on FlutterFlow.

Adding Stripe Payment Action

Follow the steps below to add this action to any widget.

  1. Select the Widget (e.g., Container, Button, etc.) on which you want to add the action.

  2. Select Actions from the Properties panel (the right menu), and click Open. This will open an Action Flow Editor in a new popup window.

  3. Click on the + Add Action.

  4. On the right side, search and select the Stripe Payment (under Integrations) action.

  5. Enter or use a variable for specifying the total payment amount under the Amount section. The value should be specified in the currency's smallest unit. For example, $24.99 should be passed as 2499 (as a round-off integer, otherwise it would be automatically rounded), whereas ¥1925 can be simply passed as 1925. For more information check out this page.

  6. Enter the Currency Code to be used for the amount, for example, USD, EUR, BRL. Make sure you enter a valid currency code otherwise, the transaction won't go through.

  7. Next, you need to specify the Customer Email (required) and Customer Name (optional) to be used for the transaction. You can either use a variable or enter the value for them. If you are using authentication, these two values can be retrieved from the Authenticated User.

  8. Specify a Description of the purchase for both your and the user's record.

  9. For enabling Google Pay or Apple Pay as the payment method, turn on the respective toggle. To use Apple Pay, you have to set up a Merchant ID by following the steps here.

  10. Select the Payment Sheet Theme among System Default, Light Theme, or Dark Theme.

  11. Specify the Primary Button Color and Button Text Color to be used on the payment dialog.

  12. Enter an Output Variable Name where the payment ID would be stored on a successful transaction. Later, you can use this variable elsewhere inside the page or pass it to a different page of the app.

Make sure the user is authenticated before triggering the Stripe Payment Action. Otherwise, it will result in an error. You can follow the steps on this page to set up Authentication.

Last Updated Date: February 1, 2024

Last updated