Add support for Embedded Payment Element
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
@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.
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! 😄
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.
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.
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!
This is amazing work! I will look into testing the feature on both Android and iOS, and report here. :)
Any update on when the PR can be merged?
Hello @tara-pogancev-levi9-com have you been able to test and use these changes?
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 :(
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
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!
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?
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!
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.
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