Error when using the Card Field Widget

[Phelickz]

Error Encountered:

E/MethodChannel#flutter/platform_views(19580): Failed to handle method call
E/MethodChannel#flutter/platform_views(19580): android.view.InflateException: Binary XML file line #22 in com.crooz.ezze:layout/card_input_widget: Binary XML file line #22 in com.crooz.ezze:layout/card_input_widget: Error inflating class
E/MethodChannel#flutter/platform_views(19580): Caused by: android.view.InflateException: Binary XML file line #22 in com.crooz.ezze:layout/card_input_widget: Error inflating class
E/MethodChannel#flutter/platform_views(19580): Caused by: java.lang.reflect.InvocationTargetException
E/MethodChannel#flutter/platform_views(19580): at java.lang.reflect.Constructor.newInstance0(Native Method)
E/MethodChannel#flutter/platform_views(19580): at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
E/MethodChannel#flutter/platform_views(19580): at android.view.LayoutInflater.createView(LayoutInflater.java:854)
E/MethodChannel#flutter/platform_views(19580): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1010)
E/MethodChannel#flutter/platform_views(19580): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:961)
E/MethodChannel#flutter/platform_views(19580): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1140)
E/MethodChannel#flutter/platform_views(19580): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1101)
E/MethodChannel#flutter/platform_views(19580): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1143)
E/MethodChannel#flutter/platform_views(19580): at android.view.LayoutInflater.inflate(LayoutInflater.java:656)
E/MethodChannel#flutter/platform_views(19580): at android.view.LayoutInflater.inflate(LayoutInflater.java:534)
E/MethodChannel#flutter/platform_views(19580): at android.view.LayoutInflater.inflate(LayoutInflater.java:481)
E/MethodChannel#flutter/platform_views(19580): at com.stripe.android.databinding.CardInputWidgetBinding.inflate(CardInputWidgetBinding.java:88)
E/MethodChannel#flutter/platform_views(19580): at com.stripe.android.view.CardInputWidget.(CardInputWidget.kt:63)
E/MethodChannel#flutter/platform_views(19580): at com.stripe.android.view.CardInputWidget.(CardInputWidget.kt:57)
E/MethodChannel#flutter/platform_views(19580): at com.reactnativestripesdk.StripeSdkCardView.(StripeSdkCardView.kt:27)
E/MethodChannel#flutter/platform_views(19580): at com.reactnativestripesdk.StripeSdkCardViewManager.createViewInstance(StripeSdkCardViewManager.kt:47)
E/MethodChannel#flutter/platform_views(19580): at com.flutter.stripe.StripeSdkCardPlatformView.(StripeSdkCardPlatformView.kt:30)
E/MethodChannel#flutter/platform_views(19580): at com.flutter.stripe.StripeSdkCardPlatformViewFactory.create(StripeSdkCardPlatformViewFactory.kt:19)
E/MethodChannel#flutter/platform_views(19580): at io.flutter.plugin.platform.PlatformViewsController$1.createAndroidViewForPlatformView(PlatformViewsController.java:146)
E/MethodChannel#flutter/platform_views(19580): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.create(PlatformViewsChannel.java:101)
E/MethodChannel#flutter/platform_views(19580): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.onMethodCall(PlatformViewsChannel.java:59)
E/MethodChannel#flutter/platform_views(19580): at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:233)
E/MethodChannel#flutter/platform_views(19580): at io.flutter.embedding.engine.dart.DartMessenger.handleMessageFromDart(DartMessenger.java:85)
E/MethodChannel#flutter/platform_views(19580): at io.flutter.embedding.engine.FlutterJNI.handlePlatformMessage(FlutterJNI.java:818)
E/MethodChannel#flutter/platform_views(19580): at android.os.MessageQueue.nativePollOnce(Native Method)
E/MethodChannel#flutter/platform_views(19580): at android.os.MessageQueue.next(MessageQueue.java:336)
E/MethodChannel#flutter/platform_views(19580): at android.os.Looper.loop(Looper.java:174)
E/MethodChannel#flutter/platform_views(19580): at android.app.ActivityThread.main(ActivityThread.java:7386)
E/MethodChannel#flutter/platform_views(19580): at java.lang.reflect.Method.invoke(Native Method)
E/MethodChannel#flutter/platform_views(19580): at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
E/MethodChannel#flutter/platform_views(19580): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:980)
E/MethodChannel#flutter/platform_views(19580): Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.AppCompat (or a descendant).
E/MethodChannel#flutter/platform_views(19580): at com.google.android.material.internal.ThemeEnforcement.checkTheme(ThemeEnforcement.java:243)
E/MethodChannel#flutter/platform_views(19580): at com.google.android.material.internal.ThemeEnforcement.checkAppCompatTheme(ThemeEnforcement.java:213)
E/MethodChannel#flutter/platform_views(19580): at com.google.android.material.internal.ThemeEnforcement.checkCompatibleTheme(ThemeEnforcement.java:148)
E/MethodChannel#flutter/platform_views(19580): at com.google.android.material.internal.ThemeEnforcement.obtainTintedStyledAttributes(ThemeEnforcement.java:115)
E/MethodChannel#flutter/platform_views(19580): at com.google.android.material.textfield.TextInputLayout.(TextInputLayout.java:463)
E/MethodChannel#flutter/platform_views(19580): at com.google.android.material.textfield.TextInputLayout.(TextInputLayout.java:422)
E/MethodChannel#flutter/platform_views(19580): ... 31 more
I/System.out(19580): [socket]:check permission begin!
I/System.out(19580): [socket]:check permission begin!
E/flutter (19580): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: PlatformException(error, Binary XML file line #22 in com.crooz.ezze:layout/card_input_widget: Binary XML file line #22 in com.crooz.ezze:layout/card_input_widget: Error inflating class , null, android.view.InflateException: Binary XML file line #22 in com.crooz.ezze:layout/card_input_widget: Binary XML file line #22 in com.crooz.ezze:layout/card_input_widget: Error inflating class
E/flutter (19580): Caused by: android.view.InflateException: Binary XML file line #22 in com.crooz.ezze:layout/card_input_widget: Error inflating class
E/flutter (19580): Caused by: java.lang.reflect.InvocationTargetException
E/flutter (19580): at java.lang.reflect.Constructor.newInstance0(Native Method)
E/flutter (19580): at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
E/flutter (19580): at android.view.LayoutInflater.createView(LayoutInflater.java:854)
E/flutter (19580): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1010)
E/flutter (19580): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:961)
E/flutter (19580): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1140)
E/flutter (19580): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1101)
E/flutter (19580): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1143)
E/flutter (19580): at android.view.LayoutInflater.inflate(LayoutInflater.java:656)
E/flutter (19580): at android.view.LayoutInflater.inflate(LayoutInflater.java:534)
E/flutter (19580): at android.view.LayoutInflater.inflate(LayoutInflater.java:481)
E/flutter (19580): at com.stripe.android.databinding.CardInputWidgetBinding.inflate(CardInputWidgetBinding.java:88)
E/flutter (19580): at com.stripe.android.view.CardInputWidget.(CardInputWidget.kt:63)
E/flutter (19580): at com.stripe.android.view.CardInputWidget.(CardInputWidget.kt:57)
E/flutter (19580): at com.reactnativestripesdk.StripeSdkCardView.(StripeSdkCardView.kt:27)
E/flutter (19580): at com.reactnativestripesdk.StripeSdkCardViewManager.createViewInstance(StripeSdkCardViewManager.kt:47)
E/flutter (19580): at com.flutter.stripe.StripeSdkCardPlatformView.(StripeSdkCardPlatformView.kt:30)
E/flutter (19580): at com.flutter.stripe.StripeSdkCardPlatformViewFactory.create(StripeSdkCardPlatformViewFactory.kt:19)
E/flutter (19580): at io.flutter.plugin.platform.PlatformViewsController$1.createAndroidViewForPlatformView(PlatformViewsController.java:146)
E/flutter (19580): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.create(PlatformViewsChannel.java:101)
E/flutter (19580): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.onMethodCall(PlatformViewsChannel.java:59)
E/flutter (19580): at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:233)
E/flutter (19580): at io.flutter.embedding.engine.dart.DartMessenger.handleMessageFromDart(DartMessenger.java:85)
E/flutter (19580): at io.flutter.embedding.engine.FlutterJNI.handlePlatformMessage(FlutterJNI.java:818)
E/flutter (19580): at android.os.MessageQueue.nativePollOnce(Native Method)
E/flutter (19580): at android.os.MessageQueue.next(MessageQueue.java:336)
E/flutter (19580): at android.os.Looper.loop(Looper.java:174)
E/flutter (19580): at android.app.ActivityThread.main(ActivityThread.java:7386)
E/flutter (19580): at java.lang.reflect.Method.invoke(Native Method)
E/flutter (19580): at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:492)
E/flutter (19580): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:980)
E/flutter (19580): Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.AppCompat (or a descendant).
E/flutter (19580): at com.google.android.material.internal.ThemeEnforcement.checkTheme(ThemeEnforcement.java:243)
E/flutter (19580): at com.google.android.material.internal.ThemeEnforcement.checkAppCompatTheme(ThemeEnforcement.java:213)
E/flutter (19580): at com.google.android.material.internal.ThemeEnforcement.checkCompatibleTheme(ThemeEnforcement.java:148)
E/flutter (19580): at com.google.android.material.internal.ThemeEnforcement.obtainTintedStyledAttributes(ThemeEnforcement.java:115)
E/flutter (19580): at com.google.android.material.textfield.TextInputLayout.(TextInputLayout.java:463)
E/flutter (19580): at com.google.android.material.textfield.TextInputLayout.(TextInputLayout.java:422)
E/flutter (19580): ... 31 more
E/flutter (19580): )
E/flutter (19580): #0 StandardMethodCodec.decodeEnvelope
E/flutter (19580): #1 MethodChannel._invokeMethod
E/flutter (19580): <asynchron
E/flutter (19580): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: MissingPluginException(No implementation found for method requestFocus on channel flutter.stripe/card_field/1)
E/flutter (19580): #0 MethodChannel._invokeMethod
E/flutter (19580):
E/flutter (19580):
E/flutter (19580): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: MissingPluginException(No implementation found for method onPlaceholderChanged on channel flutter.stripe/card_field/1)
E/flutter (19580): #0 MethodChannel._invokeMethod

To Reproduce
Steps to reproduce the behavior:
Create a page with the CardField as a widget. Then navigate to that page

Expected behavior
Expected to see a Card form

Smartphone / tablet

• Device: [UMIDIGI A7S]
• OS: [Android 10]
• Package version: [e.g. 1.0.2]
• Flutter version [e.g. 2.0.1.]

[jamesblasco]

Please, make sure to follow all the requirements needed for Android
https://github.com/flutter-stripe/flutter_stripe#requirements

Probably your Android Theme is not of type Theme.AppCompact.

[Phelickz]

Yeah, I followed all the steps in the link and I still have that error.
And the payment sheet isn't showing up too..
It shows the loader and the dark sheet for a few seconds and throws a Platform Exception error message as null null.
PlatformException (PlatformException(Failed, , null, null))

So I am stuck. Cant use the card field and cant use the payment sheet also.
The card field just shows a text field that doesn't respond to tap, after it throws in the error I posted.

[jamesblasco]

Please, for the CardField check again your android Theme. The error you shared is explicitly saying:

Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.AppCompat (or a descendant).

Notice making changes on Native android does not work with hot reload/hot restart. So you have to rebuild the app

For the Payment Sheet, we are working on improving the error messages. But it probably is that the paymentIntentClientSecret you are creating for the server is not valid. If you could share the code from your server I would be happy to help.

[Phelickz]

My styles.xml file.
I already made the change according to what's on the readme file. Maybe you can have a look and see what I am doing wrong.
https://gist.github.com/Phelickz/87eb02e60b1b28c7047ddebde0990e97

For the payment sheet:
Server side:
https://gist.github.com/Phelickz/323b949df06240f934ad5fe9febff12d

Flutter side:
https://gist.github.com/Phelickz/3ec0cbb875cfa70ed7ffb97f4e1f9187

[jamesblasco]

Thanks for sharing all the code. Very helpful. It all looks good.

Could you check this?
For the card field, check the AndroidManifest that the theme is applied as expected like:

flutter_stripe/example/android/app/src/main/AndroidManifest.xml

Lines 17 to 19 in cf38b15

	<meta-data
	android:name="io.flutter.embedding.android.NormalTheme"
	android:resource="@style/NormalTheme"

And just to make sure, you have added the Stripe.publishableKey no?

I don't see anything wrong with the PaymentSheet. I am going to try to dig a bit more into the problem. Thank you

[Phelickz]

Yeah. I just checked the manifest file. And it has that block of code in exactly that format.
So I don't know what wrong.

And yeah, I added the publishableKey too.

[tan-nad]

In my case, after changing app theme to Theme.AppCompat in 2 files below and somehow it works

/android/app/src/main/res/values/styles.xml
/android/app/src/main/res/values-night/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">true</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

[Phelickz]

@jamesblasco
Doing what @tan-nad said fixed the Card field error for me.
I think it should be stated in the readme to change it for both files.

The payment sheet still doesn't work for me tho.
But I guess I'll just make do with the card field widget for now.
Thanks.

[jonasbark]

Documentation was added

[Lyba97]

In my case, after changing app theme to Theme.AppCompat in 2 files below and somehow it works

/android/app/src/main/res/values/styles.xml
/android/app/src/main/res/values-night/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">true</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

I added this but now I started getting this error: I have clean and build the app but still not able to get it working.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
   > Android resource linking failed
     AAPT: error: resource android:style/Theme.AppCompat.Light.NoTitleBar not found.
     error: resource android:style/Theme.AppCompat.Black.NoTitleBar not found.
     error: resource android:style/Theme.AppCompat.Light.NoTitleBar not found.
     error: resource android:style/Theme.AppCompat.Black.NoTitleBar not found.
     error: failed linking references.

[Lyba97]

In my case, after changing app theme to Theme.AppCompat in 2 files below and somehow it works

/android/app/src/main/res/values/styles.xml
/android/app/src/main/res/values-night/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Show a splash screen on the activity. Automatically removed when
             Flutter draws its first frame -->
        <item name="android:windowBackground">@drawable/launch_background</item>
        <item name="android:windowFullscreen">true</item>
    </style>
    <!-- Theme applied to the Android Window as soon as the process has started.
         This theme determines the color of the Android Window while your
         Flutter UI initializes, as well as behind your Flutter UI while its
         running.
         
         This Theme is only used starting with V2 of Flutter's Android embedding. -->
    <style name="NormalTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">?android:colorBackground</item>
    </style>
</resources>

I added this but now I started getting this error: I have clean and build the app but still not able to get it working.

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:processDebugResources'.
> A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
   > Android resource linking failed
     AAPT: error: resource android:style/Theme.AppCompat.Light.NoTitleBar not found.
     error: resource android:style/Theme.AppCompat.Black.NoTitleBar not found.
     error: resource android:style/Theme.AppCompat.Light.NoTitleBar not found.
     error: resource android:style/Theme.AppCompat.Black.NoTitleBar not found.
     error: failed linking references.

I just noticed It is not Theme.AppCompat.Black.NoTitleBar or Theme.AppCompat.Light.NoTitleBar

It should be this:

Theme.AppCompat.Light.NoActionBar