[Web] CardField displaying as blank input

[guidotheelen]

I'm getting an UnimplementedError() error when building the CardField or CardFormField on Web.

Browser: Chrome - Version 125.0.6422.142 (Official Build) (arm64)

Package version: flutter_stripe: 10.0.0 flutter_stripe_web: 5.1.0

Flutter version: 3.19.6

What are the plans for implementing these widgets?

[guidotheelen]

CardField is not throwing an UnimplementedError()

But instead displaying as an unresponsive blank input:

[jamesblasco]

Hi @guidotheelen, CardField is implemented for Flutter Web. There is no Stripe CardFormField component in their js sdk so we can not implement it either.

Make sure you have added both dependencies to your project and build it again. Is there any other error besides UnimplementedError?

You can see the example project:

[guidotheelen]

Thanks for reaching out @jamesblasco! I added both dependencies but it's still blank.

Could these warnings have anything to do with it?

Height of Platform View type: [stripe_card] may not be set. Defaulting to `height: 100%`.
Set `style.height` to any appropriate value to stop this message.

The platformViewRegistry getter is deprecated and will be removed in a future release. Please import it from `dart:ui_web` instead.

[guidotheelen]

Just tried the CardField in a new Flutter project. This gives the same result...

Flutter 3.19.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 54e66469a9 (8 weeks ago) • 2024-04-17 13:08:03 -0700
Engine • revision c4cd48e186
Tools • Dart 3.3.4 • DevTools 2.31.1

flutter_stripe:
    dependency: "direct main"
    description:
      name: flutter_stripe
      sha256: bee4046750d813dc77ef1cdc954c8a0d70a21a7e089b86edf3929aebe33921fe
      url: "https://pub.dev"
    source: hosted
    version: "10.1.1"
flutter_stripe_web:
    dependency: "direct main"
    description:
      name: flutter_stripe_web
      sha256: bcadbce717cacae1c9ade225394c08a15eda682b3579e50adab7f04fcd16d837
      url: "https://pub.dev"
    source: hosted
    version: "5.1.0"

@override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: CardField(),
      ),
    );
  }

[guidotheelen]

@jamesblasco @remonh87 Do you have any clue on what's causing this issue?

[marwfair]

I am experiencing the same issue. CardField is working fine for me locally, but is blank when deployed. I see the warnings in both environments.

[Virenvkj]

hi @guidotheelen ,

I am experiencing the same issue and its quite a blocker now. This error severely obstructs the functionality of our application, rendering crucial payment features unusable on this platform.

When are we fixing it ?

[egonm12]

The card field will be blank on the web when the publishable key is not set and settings are not applied yet. If we call this before showing the CardField, you can interact with it.

Stripe.publishableKey = stripePublishableKey;
await Stripe.instance.applySettings();

However, we stumbled into our next problem: the CardFieldInputDetails fields are null where we expect a value. Reproducible on the Stripe example app. This seems to be the same bug reported here: https://github.com/flutter-stripe/flutter_stripe/issues/1377

[guidotheelen]

I just tried the PaymentElement but the CardFieldInputDetails fields in the onCardChanged are null as well:

CardFieldInputDetails(
  complete: false, 
  last4: null, 
  expiryMonth: null, 
  expiryYear: null, 
  postalCode: null, 
  brand: null, 
  number: null, 
  cvc: null, 
  validExpiryDate: CardValidationState.Unknown, 
  validCVC: CardValidationState.Unknown, 
  validNumber: CardValidationState.Unknown
)

@jamesblasco @remonh87 Is this a known issue?

[remonh87]

Can you try this with the new flutter_stripe plugin? we totally changed the jsinterop there.