Exploring the `flutter_stripe` Package: Revolutionizing Payment Experiences in Flutter Apps

Introduction

The `flutter_stripe` package is a powerful tool that enables seamless payment experiences within native Android and iOS apps developed using Flutter. This package offers a range of customizable UI screens and elements designed to effortlessly collect users' payment details.

In today's digital landscape, providing secure and hassle-free payment options is paramount for any mobile application. This article will delve into the features, installation requirements, recommended usage, and various methods for handling payments using the `flutter_stripe` package.

Features Of `Flutter_stripe`

Simplified Security

The package simplifies the process of collecting sensitive data like credit card numbers while ensuring PCI compliance. This means that the sensitive data is directly transmitted to Stripe, bypassing the need to pass through your server.

   ```dart

   // Example Code

   Future<void> collectPaymentDetails() async {

       // Code to securely collect sensitive data

   }

   ```

For further information, refer to our Integration Security Guide.

Apple Pay Integration

The package seamlessly integrates with Apple Pay, providing a smooth payment experience for iOS users.

   ```dart

   // Example Code

   Future<void> processApplePay() async {

       // Code for Apple Pay integration

   }

   ```

Google Pay Integration

It offers easy integration with Google Pay through the Pay plugin. Adding your Stripe publishable key to the payment profile is all that's required.

   ```dart

   // Example Code

   Future<void> processGooglePay() async {

       // Code for Google Pay integration

   }

   ```

Diverse Payment Methods

Accepting a wide range of payment methods expands your business's global reach and enhances checkout conversion rates.

   ```dart

   // Example Code

   Future<void> acceptMorePaymentMethods() async {

       // Code for accepting various payment methods

   }

   ```

Sca Compliance

The package automatically handles 3D Secure authentication to comply with European Strong Customer Authentication regulations.

   ```dart

   // Example Code

   Future<void> handleSCA() async {

       // Code for 3D Secure authentication

   }

   ```

Native Ui Elements

It provides native screens and elements for securely collecting payment details on both Android and iOS platforms.

   ```dart

   // Example Code

   Future<void> useNativeUI() async {

       // Code for utilizing native UI elements

   }

   ```

Pre-Built Payments Ui

 Introducing the Payment Sheet, a pre-built UI for accepting cards, Apple Pay, and Google Pay. It also supports card saving and reuse.

   ```dart

   // Example Code

   Future<void> usePaymentSheet() async {

       // Code for integrating Payment Sheet

   }

   ```

Recommended Usage

When it comes to in-app purchases, consider using the app store's in-app purchase APIs for specific scenarios. For other payment processing needs, `flutter_stripe` is a robust solution.

```dart

// Example Code

void handleInAppPurchases() {

    // Code for handling in-app purchases

}

```

Installation Requirements

Android

- Android version 5.0 (API level 21) and above

- Kotlin version 1.5.0 and higher

- Using a descendant of Theme.AppCompat for your activity

- Up-to-date Android gradle build tools and gradle version

- Switching to `FlutterFragmentActivity` for compatibility

```dart

// Example Code

void configureAndroidRequirements() {

    // Code for configuring Android requirements

}

```

Ios

- Compatible with apps targeting iOS 13 or higher

- Update deployment target to 13.0 in Xcode or project.pbxproj

- Update Podfile with `platform :ios, '13.0'`

```dart

// Example Code

void configureiOSRequirements() {

    // Code for configuring iOS requirements

}

```

Web (Experimental)

- Web support is experimental with limited features

- Required to add `flutter_stripe_web` in your pubspec file

```dart

// Example Code

void configureWebRequirements() {

    // Code for configuring web requirements

}

```

Handling Card Payments

Payment Sheet

- Easy implementation with localization, animations, and error handling.

- [Implementation Documentation](https://example.com/payment-sheet-docs)

```dart

// Example Code

Future<void> handlePaymentSheet() async {

    // Code for using Payment Sheet

}

```

Cardfield

- Medium difficulty with a single-line cardfield.

- Balancing flexibility with built-in functionality.

- [Implementation Documentation](https://example.com/cardfield-docs)

```dart

// Example Code

Future<void> handleCardfield() async {

    // Code for using Cardfield

}

```

Card Form

- Similar to cardfield but with multi-line entry fields.

- [Implementation Documentation](https://example.com/card-form-docs)

```dart

// Example Code

Future<void> handleCardForm() async {

    // Code for using Card Form

}

```

Financial Connections Support

Refer to the documentation for setting up financial connections.

Initializing Stripe

Use the Stripe base class for initialization. Available parameters include `publishableKey`, `stripeAccountId`, `threeDSecureParams`, and `merchantIdentifier`. Only `publishableKey` is mandatory.

```dart

// Example Code

void initializeStripe() {

    // Code for initializing Stripe

}

```

Dart Api Methods

Explore a list of methods for handling stripe-related actions along with their purposes and potential use cases.

- `createPaymentMethod(...)`

- `handleNextAction(...)`

- `confirmPayment(...)`

- `configure3dSecure(...)`

- `isApplePaySupported()`

- `presentApplePay(...)`

- `confirmApplePayPayment(...)`

- `confirmSetupIntent(...)`

- `retrievePaymentIntent(...)`

- `createTokenForCVCUpdate(...)`

- `initPaymentSheet(...)`

- `presentPaymentSheet(...)`

- `confirmPaymentSheetPayment()`

Pay Plugin Support

Integrate Stripe as a payment processor for Google/Apple Pay using the Pay plugin from the Google Pay team.

```dart

// Example Code

Future<void> onGooglePayResult(paymentResult) async {

    // Code for processing Google Pay result

}

```

Running The Example App

Follow these steps to run the provided example app within the package:

1. Navigate to the example folder: `cd example`

2. Install the dependencies: `flutter pub get`

3. Set up environment variables for the flutter app and a local backend.

4. Get your test Stripe API keys.

5. Copy `lib/.env.example.dart` to `lib/.env.dart` and set your Stripe publishable key.

6. Copy `server/.env.example` to `server/.env` and set the variable values in your newly created `.env` file.

7. Install the server dependencies in the server directory: `cd server`, then `npm install` or `yarn --cwd "server"`.

8. Start the example:

   - Terminal 1:

     - Move to the server directory: `cd server`

     - Run npm or yarn: `npm start` or `

yarn --cwd "server" start`

   - Terminal 2:

     - Move to the lib directory: `cd lib`

     - Run flutter: `flutter run`

Additional Steps For Webhook Forwarding

To set up webhook forwarding, follow these instructions using the stripe-cli:

1. Install the stripe-cli.

2. Run `stripe listen --forward-to localhost:4242/webhook`.

Contributing To The `Flutter_stripe` Package

We encourage community involvement through issue reporting and pull requests. Your contributions can help make this project even better.

Setup And Useful Commands

This project utilizes melos for managing packages within the repository. Follow these steps to get started:

1. Install melos: `dart pub global activate melos`

2. Set up melos in your local folder: `melos bootstrap`

Useful commands for managing the package:

- Format: `melos run format`

- Analyze: `melos run analyze`

- Test: `melos run unittest`

- Pub get: `melos run get`

Installation Requirements For The `Flutter_stripe` Package

To start utilizing the powerful capabilities of the `flutter_stripe` package for seamless payment experiences, it's essential to ensure that your development environment meets the necessary requirements for Android, iOS, and web platforms.

Android Platform

For Android, follow these steps to set up the `flutter_stripe` package:

Android Version Compatibility

Ensure that your project is using Android version 5.0 (API level 21) or higher.

Kotlin Version

The package requires Kotlin version 1.5.0 and above. Make sure your project is using a compatible Kotlin version.

Theme Configuration

Use a descendant of `Theme.AppCompat` for your activity. This ensures compatibility with the Android Stripe SDK.

Gradle Updates

Make sure you're using an up-to-date Android gradle build tools version and an up-to-date gradle version according to the Stripe SDK's requirements.

Activity Configuration

In `MainActivity.kt`, use `FlutterFragmentActivity` instead of `FlutterActivity` for compatibility.

Rebuild The App

After making the above changes, rebuild your app as these changes may not take effect with hot reload.

If you encounter any difficulties during the setup process, consider joining the discussion for additional support.

iOS Platform

For iOS, make sure your project meets the following requirements:

Ios Version Compatibility

The `flutter_stripe` package is compatible with apps targeting iOS 13 or higher.

Upgrade Deployment Target

 If your project is not already targeting iOS 13.0, you can upgrade the deployment target in Xcode under your Build Settings. Alternatively, you can modify `IPHONEOS_DEPLOYMENT_TARGET` in your `project.pbxproj` directly.

Update Podfile

Update your `Podfile` with the following line:

   ```ruby

   platform :ios, '13.0'

   ```

Web Platform (Experimental)

Web support for the `flutter_stripe` package is currently in the experimental phase and offers a subset of features. These include:

- Creating payment methods

- Confirming payment intent

- Confirming setup intent

- Creating tokens

- Confirming payment element (recommended for handling payments on the web)

To use Stripe on the web with Flutter, it's required to add `flutter_stripe_web` to your `pubspec.yaml` file.

By ensuring your development environment meets these platform-specific requirements, you'll be well-prepared to integrate the `flutter_stripe` package into your Flutter application and provide seamless payment experiences to your users.

Conclusion

The `flutter_stripe` package provides a comprehensive solution for implementing secure and seamless payment experiences in Flutter apps. With features like simplified security, native UI elements, and pre-built payments UI, developers can create delightful payment flows for their users. Explore this package and enhance your app's payment capabilities today!