flutter_stripe icon indicating copy to clipboard operation
flutter_stripe copied to clipboard

Add support for Embedded Payment Element

Open programmeraditya opened this issue 6 months ago • 15 comments

Is your feature request related to a problem? (please describe) No.

Describe the solution you'd like React Native SDK v0.46.0 added support for Embedded Payment Element, but it's not yet implemented in the Flutter SDK.

Describe alternatives you've considered N/A

Additional context Docs: https://docs.stripe.com/payments/elements/in-app-payment-element

programmeraditya avatar Oct 08 '25 18:10 programmeraditya

@jonasbark I am working on this myself. I am using this PR as source: https://github.com/flutter-stripe/flutter_stripe/pull/2235 as it has been synced with v0.53.1.

programmeraditya avatar Oct 12 '25 19:10 programmeraditya

Hello @programmeraditya ! I see that this PR has been merged. May I ask if this now means we will be able to use the Payment Element, with all additional supported payment types out of the box (e.g. PayPal, CashApp, etc.) along with cards and Google/Apple payment we had thus far? If so, do you know when would the new package version be available to use?

Thank you for your contribution! 😄

tara-pogancev avatar Oct 13 '25 07:10 tara-pogancev

Hello @tara-pogancev ! The PR is not related to the changes I am working on. To be more specific, when I started working on it, the PR was not merged, the main branch had synced up to React Native SDK version v0.46.0 only, so I started making changes on the sync branch (which the PR was from) as it already synced with version v0.53.1.

Regarding the progress, I am happy to share I was able to get it working on Flutter, and it supports all payment methods that the React Native SDK supports. There are some layout and design issues as which I am working on. I will create a PR soon.

programmeraditya avatar Oct 13 '25 08:10 programmeraditya

Here's the PR. https://github.com/flutter-stripe/flutter_stripe/pull/2239

Note that I only tested the iOS implementation properly. The Android integration may not work as it is. I would appreciate if anyone helps finish the Android side.

programmeraditya avatar Oct 13 '25 21:10 programmeraditya

Android implementation is also complete. With this the embedded payment element feature has been mirrored fully from the React Native SDK. Would appreciate feedback. PR: https://github.com/flutter-stripe/flutter_stripe/pull/2239 Thanks!

programmeraditya avatar Oct 17 '25 05:10 programmeraditya

This is amazing work! I will look into testing the feature on both Android and iOS, and report here. :)

tara-pogancev-levi9-com avatar Oct 17 '25 11:10 tara-pogancev-levi9-com

Any update on when the PR can be merged?

programmeraditya avatar Nov 14 '25 10:11 programmeraditya

Hello @tara-pogancev-levi9-com have you been able to test and use these changes?

programmeraditya avatar Nov 24 '25 21:11 programmeraditya

Hello @tara-pogancev-levi9-com have you been able to test and use these changes?

Hello! I've tried running it locally, but wasn't able to get it to build. I assume it was some mistake on my end, as I havent tried running any version of flutter_stripe on my machine before. I did follow everything from readme though. Other than the small PR comment I have left, I wasnt able to identify what was causing the issue. Sorry for not being able to help more :(

tara-pogancev-levi9-com avatar Nov 25 '25 06:11 tara-pogancev-levi9-com

Hello @tara-pogancev-levi9-com have you been able to test and use these changes?

Hello! I've tried running it locally, but wasn't able to get it to build. I assume it was some mistake on my end, as I havent tried running any version of flutter_stripe on my machine before. I did follow everything from readme though. Other than the small PR comment I have left, I wasnt able to identify what was causing the issue. Sorry for not being able to help more :(

No problem at all! What error did it show when trying to build it? Maybe I can help. Also, you could try replacing the path to flutter_stripe in another project's pubspec.yaml and use the git path of this fork or your machine's path of the clone.

Example:

flutter_stripe:
    git:
      url: https://github.com/Quibli-Development/flutter_stripe.git
      ref: sync
      path: packages/stripe

programmeraditya avatar Nov 25 '25 11:11 programmeraditya

Thats a great tip! Thank you for letting me know! :) With this change, I was able to add the library version to the app im working on; and it compiled successfully. However, when I added the PaymentElement like it the example code; I wasn't able to see anything.

The space for the widget appears blank, in the height of maybe 2/3 of the screen (like an empty SizedBox). Nothing inside is clickable; and nothing appears in the debug console. I tried this on iOS simulator and a real device (iPhone 16 Pro).

I also tried running it on Android, however, it appears it was incompatible with the project due to this Compose error: `FAILURE: Build failed with an exception.

  • What went wrong: A problem occurred configuring project ':stripe_android'.

com.android.builder.errors.EvalIssueException: Starting in Kotlin 2.0, the Compose Compiler Gradle plugin is required when compose is enabled. See the following link for more information: https://d.android.com/r/studio-ui/compose-compiler `

If you know what I could do differently, please let me know. 😄 I'd love to help any way I can with getting this to work!

tara-pogancev-levi9-com avatar Nov 25 '25 13:11 tara-pogancev-levi9-com

Let me ask a few questions so that I can provide better help.

  • Is the widget inside a ListView or a Column? If so, can you try loading the widget in a separate screen without any other UI component?
  • To debug better, please try running the app from Xcode. There any native side logs will be displayed.
  • Can you also implement and add logs to onLoadingFailed: (error) {..} callback of EmbeddedPaymentElement? Maybe you should try this first if not already as any Stripe related errors will be showed here.

Haven't got the Android error yet, the kotlinVersion is set to 2.0.0 on the project. What is the version you are using?

programmeraditya avatar Nov 25 '25 17:11 programmeraditya

Thanks for the great feedback! I hadn't recognized onLoadingFailed, and it helped a lot with debugging! Some of the secrets I was passing were incorrect, and I was able to fix a couple of mistakes that way. The error I am curretly on is the following: "The provided key 'XYZ' does not have the required permissions for this endpoint on account 'XYZ2'. I feel this doesn't have anything to do with the plugin itself, but rather Stripe endpoint configuration. I'd like to check this out with the BE developers, so that I can get the correct info for this case. I will update on it as soon as possible!

As for Android, i am still unable to make it work:

A problem occurred configuring project ':stripe_android'.

com.android.builder.errors.EvalIssueException: Starting in Kotlin 2.0, the Compose Compiler Gradle plugin is required

In my own project, I use the latest version of Flutter - 3.38.1, Android SDK version 35.0.0. "org.jetbrains.kotlin.android" version "2.1.20", "com.android.application" version '8.11.1', Java 17. I hope any of this info provides further insight into launching on Android. Let me know if I am missing something! :) Thank you kindly for your help and responsiveness so far!

tara-pogancev avatar Nov 26 '25 09:11 tara-pogancev

Hello @tara-pogancev, did you manage to get it working on iOS? Are you passing an ephemeral key to load customer's saved payment methods?

As for Android, I haven't yet tried the version 2.1.20, it looks like for versions above 2.0.0, that error appears. I will try upgrading it and solving that error.

programmeraditya avatar Dec 05 '25 18:12 programmeraditya

Hello! 😄 Yes! I was able to get it working on iOS! The issue was completely on my side; with the params I was passing; but after some BE work I got it to render properly.

I can confirm that on iOS:

  • The form renders well
  • Selects link payment as the first option by default
  • onPaymentOptionChanged, onLoadingFailed and onFormSheetConfirmComplete work correctly
  • confirmHandler is called correctly

tara-pogancev avatar Dec 08 '25 10:12 tara-pogancev