How can I create custom payments in FlutterFlow?

Before you Begin:

Before starting to follow these steps ensure that you have the following requirements:

• Flutterflow project/ application already set up.
• Ensure Flutter SDK is installed in your machine.
• A text editor like VS Code or Android Studio for code editing.
• Stripe account already set up.

Without further ado, let's begin:

Setting up the Payment Gateway:

Step 1: Setting up Stripe Webhook

In the Stripe Dashboard, navigate to the Developers section and click on Webhooks. Click on the button to add a new endpoint, and enter the URL provided by FlutterFlow in the URL field. Ensure that the Event to send is set as 'checkout.session.completed', then click on 'Add endpoint'.

Step 2: Take note of Signing Secret

After creating the webhook, Stripe will provide a Signing Secret. You will need to input this into FlutterFlow, so ensure to keep it handy.

Step 3: Setup FlutterFlow

Navigate to the Settings tab in your project in FlutterFlow. Under the Stripe Configuration section, input your Publishable Key and Secret Key (found in your Stripe API keys), along with the Webhook Signing Secret obtained in the previous step.

Creating the Custom Payment:

Step 4: Add the Stripe Package

Navigate to pubspec.yaml in your Flutter project and add the following package:

dependencies:
  stripe_sdk: ^4.0.2

Then, run flutter pub get to get the package.

Step 5: Initializing Stripe

You need to initialize Stripe before using it in your Flutter application. The recommended place to do this is in the main() method.

import 'package:stripe_sdk/stripe_sdk.dart';

void main() {
  Stripe.init('your-publishable-key');
  runApp(MyApp());
}

Remember to replace 'your-publishable-key' with your actual Publishable Key.

Step 6: Create a Payment Intent

The next step involves creating a Payment Intent. This will return a client secret that will be used to confirm the payment. The Payment Intent can be created from the client (Flutter App) or from the server. Depending on where you decide to create the Payment Intent from, the ways are:

Creating a Payment Intent on the client (Flutter App):

const stripe = Stripe(‘pk_test_…’); //use your publishable key
final paymentMethod = await stripe.paymentMethods.create(PaymentMethod()..card = Card(‘4242 4242 4242 4242’, month: 12, year: 2021));

final intent = await stripe.paymentIntents.confirm(
    PaymentIntent()
      ..paymentMethodId = paymentMethod.id
      ..amount = 500 // amount in cents
      ..currency = 'usd'
  );

or

Creating a Payment Intent from the server:

You should make a request to your server that communicates with the Stripe backend to create a Payment Intent.

Step 7: Confirm the Payment

After creating the Payment Intent and getting a client secret, you can confirm the payment by calling the confirmStripePayment method.

bool paymentStatus = confirmStripePayment(intentClientSecret);

You can wrap this method in a try-catch block to handle any exceptions that may occur during the confirmation of the payment.

Step 8: Providing Feedback

After confirming the payment, provide feedback to the user. This could be by updating the UI or providing a toast message. It could be something as simple as:

if (paymentStatus) {
  print("Payment successful");
} else {
  print("Payment failed");
}

Congratulations! You have just created and confirmed a custom payment in FlutterFlow. Remember to thoroughly test the entire flow to verify that it works as expected.