Add support for Embedded Payment Element

[programmeraditya]

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]

@jonasbark I am working on this myself. I am using this PR as source: #2235 as it has been synced with v0.53.1.

[tara-pogancev]

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! 😄

[programmeraditya]

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]

Here's the PR.
#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]

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: #2239
Thanks!

[tara-pogancev-levi9-com]

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

[programmeraditya]

Any update on when the PR can be merged?

[programmeraditya]

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

[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 :(

[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 :(

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

[tara-pogancev-levi9-com]

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!

[programmeraditya]

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?