How to create a payment method with custom card details about flutter_stripe HOT 20 CLOSED

Hello @anmentone, could you check if the theme inside your android app is a Theme.AppCompact descendant like the example one?

The native stripe library makes use of AppCompact components and therefore it is required to use it.

Let us know if that solves your problem

from flutter_stripe.

@OliverNarramore can you outline why you can't use the CardField component? And are you aware that this would affect your PCI compliance reporting: https://stripe.com/docs/security/guide

from flutter_stripe.

I'm using:

• Flutter version Flutter version 2.0.4
• Xcode 12.4
• iphone 8 (Ios simulator running ios 14.5)

I have added the following to a stateful widget:

CardFieldInputDetails _card;

and the card field inside a Column widget

CardField(onCardChanged: (card) {
                         setState(() {
                           _card = card;
                         });
}),

I am aware of PCI DSS requirements, but the app i'm trialing this on is currently for testing purposes and will never be live. The app was originally designed around the stripe_payment package, which did allow for custom card entry primarily for testing purposes.

The reason for not using the CardField component, is firstly that it's not working on my build. Secondly, I wished to hardcode for testing purposes the various test cards that trigger different scenarios i.e., 3d secure, rejection, risk levels rather than typing them out each time, as is possible with other stripe packages. For example, the stripe_payment package, there has been the following option:

 StripePayment.createPaymentMethod(
                  PaymentMethodRequest(
                    card: testCard,
                  ),

with test card being:

 final CreditCard testCard = CreditCard(
    number: '4000002760003184',
    expMonth: 12,
    expYear: 21,
  );

from flutter_stripe.

I've the same problem. @jonasbark
Unable to digit with CardField widget on a physical device.
I got this error:

E/MethodChannel#flutter/platform_views( 5090): Failed to handle method call
E/MethodChannel#flutter/platform_views( 5090): android.view.InflateException: Binary XML file line #22 in com.anmentone.example:layout/card_input_widget: Binary XML file line #22 in com.anmentone.example:layout/card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout
E/MethodChannel#flutter/platform_views( 5090): Caused by: android.view.InflateException: Binary XML file line #22 in com.anmentone.example:layout/card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout
E/MethodChannel#flutter/platform_views( 5090): Caused by: java.lang.reflect.InvocationTargetException
E/MethodChannel#flutter/platform_views( 5090): 	at java.lang.reflect.Constructor.newInstance0(Native Method)
E/MethodChannel#flutter/platform_views( 5090): 	at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
E/MethodChannel#flutter/platform_views( 5090): 	at android.view.LayoutInflater.createView(LayoutInflater.java:852)
E/MethodChannel#flutter/platform_views( 5090): 	at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1004)
E/MethodChannel#flutter/platform_views( 5090): 	at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:959)
E/MethodChannel#flutter/platform_views( 5090): 	at android.view.LayoutInflater.rInflate(LayoutInflater.java:1121)
E/MethodChannel#flutter/platform_views( 5090): 	at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1082)
E/MethodChannel#flutter/platform_views( 5090): 	at android.view.LayoutInflater.rInflate(LayoutInflater.java:1124)
E/MethodChannel#flutter/platform_views( 5090): 	at android.view.LayoutInflater.inflate(LayoutInflater.java:654)
E/MethodChannel#flutter/platform_views( 5090): 	at android.view.LayoutInflater.inflate(LayoutInflater.java:532)
E/MethodChannel#flutter/platform_views( 5090): 	at android.view.LayoutInflater.inflate(LayoutInflater.java:479)
E/MethodChannel#flutter/platform_views( 5090): 	at com.stripe.android.databinding.CardInputWidgetBinding.inflate(CardInputWidgetBinding.java:88)
E/MethodChannel#flutter/platform_views( 5090): 	at com.stripe.android.view.CardInputWidget.<init>(CardInputWidget.kt:63)
E/MethodChannel#flutter/platform_views( 5090): 	at com.stripe.android.view.CardInputWidget.<init>(CardInputWidget.kt:57)
E/MethodChannel#flutter/platform_views( 5090): 	at com.reactnativestripesdk.StripeSdkCardView.<init>(StripeSdkCardView.kt:27)
E/MethodChannel#flutter/platform_views( 5090): 	at com.reactnativestripesdk.StripeSdkCardViewManager.createViewInstance(StripeSdkCardViewManager.kt:47)
E/MethodChannel#flutter/platform_views( 5090): 	at com.flutter.stripe.StripeSdkCardPlatformView.<init>(StripeSdkCardPlatformView.kt:30)
E/MethodChannel#flutter/platform_views( 5090): 	at com.flutter.stripe.StripeSdkCardPlatformViewFactory.create(StripeSdkCardPlatformViewFactory.kt:19)
E/MethodChannel#flutter/platform_views( 5090): 	at io.flutter.plugin.platform.PlatformViewsController$1.createAndroidViewForPlatformView(PlatformViewsController.java:146)
E/MethodChannel#flutter/platform_views( 5090): 	at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.create(PlatformViewsChannel.java:101)
E/MethodChannel#flutter/platform_views( 5090): 	at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.onMethodCall(PlatformViewsChannel.java:59)
E/MethodChannel#flutter/platform_views( 5090): 	at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:233)
E/MethodChannel#flutter/platform_views( 5090): 	at io.flutter.embedding.engine.dart.DartMessenger.handleMessageFromDart(DartMessenger.java:85)
E/MethodChannel#flutter/platform_views( 5090): 	at io.flutter.embedding.engine.FlutterJNI.handlePlatformMessage(FlutterJNI.java:818)
E/MethodChannel#flutter/platform_views( 5090): 	at android.os.MessageQueue.nativePollOnce(Native Method)
E/MethodChannel#flutter/platform_views( 5090): 	at android.os.MessageQueue.next(MessageQueue.java:335)
E/MethodChannel#flutter/platform_views( 5090): 	at android.os.Looper.loop(Looper.java:183)
E/MethodChannel#flutter/platform_views( 5090): 	at android.app.ActivityThread.main(ActivityThread.java:7656)
E/MethodChannel#flutter/platform_views( 5090): 	at java.lang.reflect.Method.invoke(Native Method)
E/MethodChannel#flutter/platform_views( 5090): 	at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
E/MethodChannel#flutter/platform_views( 5090): 	at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)
E/MethodChannel#flutter/platform_views( 5090): 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( 5090): 	at com.google.android.material.internal.ThemeEnforcement.checkTheme(ThemeEnforcement.java:243)
E/MethodChannel#flutter/platform_views( 5090): 	at com.google.android.material.internal.ThemeEnforcement.checkAppCompatTheme(ThemeEnforcement.java:213)
E/MethodChannel#flutter/platform_views( 5090): 	at com.google.android.material.internal.ThemeEnforcement.checkCompatibleTheme(ThemeEnforcement.java:148)
E/MethodChannel#flutter/platform_views( 5090): 	at com.google.android.material.internal.ThemeEnforcement.obtainTintedStyledAttributes(ThemeEnforcement.java:115)
E/MethodChannel#flutter/platform_views( 5090): 	at com.google.android.material.textfield.TextInputLayout.<init>(TextInputLayout.java:463)
E/MethodChannel#flutter/platform_views( 5090): 	at com.google.android.material.textfield.TextInputLayout.<init>(TextInputLayout.java:422)
E/MethodChannel#flutter/platform_views( 5090): 	... 31 more

I've tried with your example app and it works.

flutter doctor -v
[✓] Flutter (Channel stable, 2.0.6, on Linux, locale en_GB.UTF-8)
    • Flutter version 2.0.6 at /home/anmentone/lib/flutter
    • Framework revision 1d9032c7e1 (3 weeks ago), 2021-04-29 17:37:58 -0700
    • Engine revision 05e680e202
    • Dart version 2.12.3

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /home/anmentone/Android/Sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /usr/local/android-studio/jre/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+0-b944-P17168821)
    • All Android licenses accepted.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Android Studio
    • Android Studio at /usr/local/android-studio
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • android-studio-dir = /usr/local/android-studio
    • Java version OpenJDK Runtime Environment (build 11.0.8+0-b944-P17168821)

[✓] IntelliJ IDEA Community Edition (version 2021.1)
    • IntelliJ at /usr/local/idea-IC-211.7142.45
    • Flutter plugin version 56.0.5
    • Dart plugin version 211.7233

[✓] VS Code (version 1.56.2)
    • VS Code at /usr/share/code
    • Flutter extension version 3.22.0

[✓] Connected device (2 available)
    • POT LX1 (mobile) • 39V4C19A18025168 • android-arm64  • Android 10 (API 29)
    • Chrome (web)     • chrome           • web-javascript • Google Chrome 90.0.4430.212

• No issues found!

from flutter_stripe.

Uhh I see, could you add a custom background color? theme.scaffoldBackgroundColor should work. It is now transparent by default and we are not sending the opacity to the native view. Will work on it thanks

from flutter_stripe.

Regarding the CardField: can you tell us which Flutter version you're using, which device (Android, iOS, OS Version)?

from flutter_stripe.

@OliverNarramore about the problem you are having on the CardField, I think it is related to the simulator and the mac hardware keyboard. It should work correctly with the software keyboard both on the simulator and a real device.

Let me know if this works for you.

from flutter_stripe.

Thank you for your reply @jamesblasco . I missed Theme.AppCompact.
Right now I've got no error from the debug console but I still have the problem, no keyboard appears, no chance to focus on the card field.

Image

from flutter_stripe.

Could be a problem if I'm using right now no null-safety in my application?
The widget was not working properly because several exceptions were raised regarding some null properties.
For example, I was not giving to the widget constructor those two properties here:
textErrorColor: theme.inputDecorationTheme.errorStyle?.color ?? theme.errorColor, placeholderColor: theme.inputDecorationTheme.hintStyle?.color ?? theme.hintColor,

The stranger thing is that the console didn't tell me anything about it. When I copied the contents of card_field.dart and imported the widget from the copied file instead of using it directly from your library, I was able to get all these errors.
But why the operator ?? is not working properly?

I got another error also on this assertion:
assert(constraints == null || constraints.debugAssertIsValid()), constraints = (width != null || height != null) ? constraints.tighten(width: width, height: height) ?? BoxConstraints.tightFor(width: width, height: height) : constraints, super(key: key);

Also in this case another null exception: constraints.tighten(width: width, height: height)
The method tighten is called on null.

Maybe the operator ?? did not work because the value of the property was not null but the object on which it was called, and this raised an exception.
But if there is an unhandled exception why isn't the console telling me?

from flutter_stripe.

It is weird indeed, I would also expect that this throws a run-time exception. When working on null-safety libraries in a no-null-safety application I would recommend that you enable null-safety for the file where you will use the library, to avoid unexpected errors.

This is quite easy to do by adding //@dart=2.12 in the header of the file where you want to enable null safety.

Could you also try to debug it with all exceptions selected for breakpoints?

Did you make the card field appear after those changes? It definitely looks there is some error as the native view is not appearing in the image you attached

from flutter_stripe.

Thank you for the reply and the tip about enable null safety in a single file.
I'm now using the widget without modification and it seems to work fine if I give to the constructor the decoration field even if it is not quite required, although with that black background it's not very pretty :)

Image

I will try with these breakpoints in debug mode.

from flutter_stripe.

Hi Guys,
Am having an issue with my CardFiel, is giving me a funny error below. I have already used the Theme.AppCompat.Light.NoActionBar on the style.xml but the issue continues;
Here is the error:

Exception has occurred.
MissingPluginException (MissingPluginException(No implementation found for method clearFocus on channel flutter.stripe/card_field/0))

Thanks in advance.

from flutter_stripe.

Hi @harguilar, could you post the full error log?

from flutter_stripe.

Hi @jamesblasco,
Thanks for a quick feedback, Below is the full error log. Sorry the the amount of versobity into it.
`E/MethodChannel#flutter/platform_views(22089): Failed to handle method call
E/MethodChannel#flutter/platform_views(22089): android.view.InflateException: Binary XML file line #22 in com.example.gooddollarsmarketplace:layout/card_input_widget: Binary XML file line #22 in com.example.gooddollarsmarketplace:layout/card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout
E/MethodChannel#flutter/platform_views(22089): Caused by: android.view.InflateException: Binary XML file line #22 in com.example.gooddollarsmarketplace:layout/card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout
E/MethodChannel#flutter/platform_views(22089): Caused by: java.lang.reflect.InvocationTargetException
E/MethodChannel#flutter/platform_views(22089): at java.lang.reflect.Constructor.newInstance0(Native Method)
E/MethodChannel#flutter/platform_views(22089): at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
E/MethodChannel#flutter/platform_views(22089): at android.view.LayoutInflater.createView(LayoutInflater.java:864)
E/MethodChannel#flutter/platform_views(22089): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1016)
E/MethodChannel#flutter/platform_views(22089): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:971)
E/MethodChannel#flutter/platform_views(22089): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1133)
E/MethodChannel#flutter/platform_views(22089): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1094)
E/MethodChannel#flutter/platform_views(22089): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1136)
E/MethodChannel#flutter/platform_views(22089): at android.view.LayoutInflater.inflate(LayoutInflater.java:666)
E/MethodChannel#flutter/platform_views(22089): at android.view.LayoutInflater.inflate(LayoutInflater.java:536)
E/MethodChannel#flutter/platform_views(22089): at android.view.LayoutInflater.inflate(LayoutInflater.java:483)
E/MethodChannel#flutter/platform_views(22089): at com.stripe.android.databinding.CardInputWidgetBinding.inflate(CardInputWidgetBinding.java:88)
E/MethodChannel#flutter/platform_views(22089): at com.stripe.android.view.CardInputWidget.(CardInputWidget.kt:63)
E/MethodChannel#flutter/platform_views(22089): at com.stripe.android.view.CardInputWidget.(CardInputWidget.kt:60)
E/MethodChannel#flutter/platform_views(22089): at com.reactnativestripesdk.StripeSdkCardView.(StripeSdkCardView.kt:33)
E/MethodChannel#flutter/platform_views(22089): at com.reactnativestripesdk.StripeSdkCardViewManager.createViewInstance(StripeSdkCardViewManager.kt:57)
E/MethodChannel#flutter/platform_views(22089): at com.flutter.stripe.StripeSdkCardPlatformView.(StripeSdkCardPlatformView.kt:31)
E/MethodChannel#flutter/platform_views(22089): at com.flutter.stripe.StripeSdkCardPlatformViewFactory.create(StripeSdkCardPlatformViewFactory.kt:1

E/MethodChannel#flutter/platform_views(22089): at com.google.android.material.textfield.TextInputLayout.(TextInputLayout.java:422)
E/MethodChannel#flutter/platform_views(22089): ... 31 more
E/flutter (22089): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: PlatformException(error, Binary XML file line #22 in com.example.gooddollarsmarketplace:layout/card_input_widget: Binary XML file line #22 in com.example.gooddollarsmarketplace:layout/card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout, null, android.view.InflateException: Binary XML file line #22 in com.example.gooddollarsmarketplace:layout/card_input_widget: Binary XML file line #22 in com.example.gooddollarsmarketplace:layout/card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout
E/flutter (22089): Caused by: android.view.InflateException: Binary XML file line #22 in com.example.gooddollarsmarketplace:layout/card_input_widget: Error inflating class com.google.android.material.textfield.TextInputLayout
E/flutter (22089): Caused by: java.lang.reflect.InvocationTargetException
E/flutter (22089): at java.lang.reflect.Constructor.newInstance0(Native Method)
E/flutter (22089): at java.lang.reflect.Constructor.newInstance(Constructor.java:343)
E/flutter (22089): at android.view.LayoutInflater.createView(LayoutInflater.java:864)
E/flutter (22089): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:1016)
E/flutter (22089): at android.view.LayoutInflater.createViewFromTag(LayoutInflater.java:971)
E/flutter (22089): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1133)
E/flutter (22089): at android.view.LayoutInflater.rInflateChildren(LayoutInflater.java:1094)
E/flutter (22089): at android.view.LayoutInflater.rInflate(LayoutInflater.java:1136)
E/flutter (22089): at android.view.LayoutInflater.inflate(LayoutInflater.java:666)
E/flutter (22089): at android.view.LayoutInflater.inflate(LayoutInflater.java:536)
E/flutter (22089): at android.view.LayoutInflater.inflate(LayoutInflater.java:483)
E/flutter (22089): at com.stripe.android.databinding.CardInputWidgetBinding.inflate(CardInputWidgetBinding.java:88)
E/flutter (22089): at com.stripe.android.view.CardInputWidget.(CardInputWidget.kt:63)
E/flutter (22089): at com.stripe.android.view.CardInputWidget.(CardInputWidget.kt:60)
E/flutter (22089): at com.reactnativestripesdk.StripeSdkCardView.(StripeSdkCardView.kt:33)
E/flutter (22089): at com.reactnativestripesdk.StripeSdkCardViewManager.createViewInstance(StripeSdkCardViewManager.kt:57)

E/flutter (22089): at io.flutter.plugin.platform.PlatformViewsController$1.createAndroidViewForPlatformView(PlatformViewsController.java:146)
E/flutter (22089): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.create(PlatformViewsChannel.java:101)
E/flutter (22089): at io.flutter.embedding.engine.systemchannels.PlatformViewsChannel$1.onMethodCall(PlatformViewsChannel.java:59)
E/flutter (22089): at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:233)
E/flutter (22089): at io.flutter.embedding.engine.dart.DartMessenger.handleMessageFromDart(DartMessenger.java:85)
E/flutter (22089): at io.flutter.embedding.engine.FlutterJNI.handlePlatformMessage(FlutterJNI.java:818)
E/flutter (22089): at android.os.MessageQueue.nativePollOnce(Native Method)
E/flutter (22089): at android.os.MessageQueue.next(MessageQueue.java:363)
E/flutter (22089): at android.os.Looper.loop(Looper.java:173)
E/flutter (22089): at android.app.ActivityThread.main(ActivityThread.java:8178)
E/flutter (22089): at java.lang.reflect.Method.invoke(Native Method)
E/flutter (22089): at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:513)
E/flutter (22089): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1101)
E/flutter (22089): Caused by: java.lang.IllegalArgumentException: The style on this component requires your app theme to be Theme.AppCompat (or a descendant).
E/flutter (22089): at com.google.android.material.internal.ThemeEnforcement.checkTheme(ThemeEnforcement.java:243)
E/flutter (22089): at com.google.android.material.internal.ThemeEnforcement.checkAppCompatTheme(ThemeEnforcement.java:213)
E/flutter (22089): at com.google.android.material.internal.ThemeEnforcement.checkCompatibleTheme(ThemeEnforcement.java:148)
E/flutter (22089): at com.google.android.material.internal.ThemeEnforcement.obtainTintedStyledAttributes(ThemeEnforcement.java:115)
E/flutter (22089): at com.google.android.material.textfield.TextInputLayout.(TextInputLayout.java:463)
E/flutter (22089): at com.google.android.material.textfield.TextInputLayout.(TextInputLayou
E/flutter (22089): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: MissingPluginException(No implementation found for method requestFocus on channel flutter.stripe/card_field/0)
E/flutter (22089): #0 MethodChannel._invokeMethod
package:flutter/…/services/platform_channel.dart:156
E/flutter (22089):
E/flutter (22089):
E/flutter (22089): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: MissingPluginException(No implementation found for method onPlaceholderChanged on channel flutter.stripe/card_field/0)
E/flutter (22089): #0 MethodChannel._invokeMethod
package:flutter/…/services/platform_channel.dart:156
E/flutter (22089):
E/flutter (22089):
`

from flutter_stripe.

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

This line suggests that the correct theme isn't applied correctly. Please check the android section again https://github.com/flutter-stripe/flutter_stripe#android, specifically applying the style change to the night theme as well.

from flutter_stripe.

Hi Jonasbark,
Thanks for the feedback,
Am newbie into this, could you please explain to me where to I go to change my app theme to match Theme.AppCompat. So far, what I have done is to copy the style.xml as the on you have and replace my one in file within res folder. Or if you have any reference where I can go and change that I would also appreciate it.
thanks

from flutter_stripe.

@harguilar

could you please explain to me where to I go to change my app theme to match Theme.AppComp

https://github.com/flutter-stripe/flutter_stripe scroll down to requirements and click on the example to change all requirement files..
for Theme.AppComp inside your app folder android/app/src/main/res/values/styles.xml and android/app/src/main/res/values-night/

from flutter_stripe.

In version 1.2.0 we added facilities for custom design. Be aware of the big implications of this by reading the docs properly.

from flutter_stripe.

I managed to fix it with:
Using this script in style.xml

<style name="NormalTheme" parent="Theme.MaterialComponents">
    <item name="android:windowBackground">?android:colorBackground</item>
</style>

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

Example:
https://github.com/flutter-stripe/flutter_stripe/blob/main/example/android/app/src/main/res/values/styles.xml
https://github.com/flutter-stripe/flutter_stripe/blob/main/example/android/app/src/main/res/values-night/styles.xml

from flutter_stripe.

I've tried all the "fixes" but I still get this error on the latest version which is 9.3.0. It works fine on iOS though!

from flutter_stripe.