Stripe Payment
Stripe can be used for accepting payment for any product inside your FlutterFlow app. You will be able to accept payment from users through credit cards, debit cards, Google Pay and Apple Pay.
Before you start defining the Action for Stripe Payment, you'll need to complete the Stripe setup on FlutterFlow. Follow the steps present on this page.
You need to create a payment or checkout UI to show the payment information to the users. Follow the steps below to create the page:
- 1.
- 2.Enter a name for the new page (eg. PaymentPage) and use any checkout template from the E-commerce section (you can modify this template as per your app's requirement or design the entire checkout page by selecting Blank Page).
- 3.Select the button that would use for triggering the payment (you can modify the button as per your requirement).
Next, you need to define an action to process the payment using Stripe.
To add an action for triggering Stripe payment follow the steps below:
- 1.Make sure you have the button selected on which you want to apply the Action.
- 2.
- 3.Click + Add Action button.
- 4.Choose the On Tap gesture from the dropdown.
- 5.Select the Action Type as Stripe Payment.
- 6.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.
- 7.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.
- 8.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 as the Source, and selecting Email and Display Name respectively present under the Available Options.
- 9.Specify a Description of the purchase for both your and the user's record.
- 10.For enabling Google Pay or Apple Pay as the payment method, check the respective checkboxes present beside them. To use Apple Pay, you have to set up a Merchant ID by following the steps here.
- 11.Select the Payment Sheet Theme among System Default, Light Theme, or Dark Theme. This sheet will be presented to the users for entering their payment details or selecting a payment mode.
- 12.Specify the Primary Button Color to be used on the payment sheet buttons.
- 13.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 would result in an error. You can follow the steps on this page to set up Authentication.
The light and dark theme of the payment sheet looks like this:
To run and test your app with payments, you have to download the app code (by going to Developer Menu > Download Code) and run it locally. Alternatively, you can generate an APK by clicking on the Build APK button present on the Tool Bar. Install the APK on your Android device to test the app.
Last modified 8d ago