Missing PaymentElementOptions for PaymentElement in flutter_stripe_web

[vishal-cw]

Description I'm currently using the flutter_stripe_web package to integrate Stripe payments into my Flutter web application. I'm specifically using the PaymentElement widget to provide a streamlined payment experience. As per the Stripe documentation, we can customize the fields collected by the PaymentElement by providing a PaymentElementOptions object. This allows us to avoid collecting unnecessary details like billing information.

However, I've noticed that the flutter_stripe_web package doesn't currently provide a way to pass PaymentElementOptions to the PaymentElement widget. This makes it difficult to achieve the desired customization.

Expected behavior The flutter_stripe_web package should allow developers to customize the fields collected by the PaymentElement widget using PaymentElementOptions. This should include options for billing details, email, shipping, and name.

Requested Solution I would like to request the addition of a PaymentElementOptions property to the PaymentElement widget in the flutter_stripe_web package. This would allow developers to customize the fields collected by the PaymentElement based on their specific requirements.

Please mention if there is any workaround for this. or am doing anything wrong here.

Relevant Code Snippet:

PaymentElement(
  clientSecret: clientSecret,
  onCardChanged: (_) {},
);

Additional info

• Package version: 6.0.0
• Flutter version 3.24.1

[remonh87]

The payment element creates the payment options for you based on the parameters that you inject. Are there specific config options that you are missing. Also please check FlutterStripe6.1.0 as this contains some fixes related to parameters for the payment element.

[blaneyneil]

I think he might be referring to PaymentElement options like:

appearance: ElementAppearance(),
terms: PaymentElementOptionsTerms(),
fields: PaymentElementFields(),

those objects aren't exposed in flutter_stripe_web.dart so you can't actually set them. Only

style: CardStyle()

can be set, and that doesn't seem to do anything. In my own particular case, I have no way (as far I can tell) of setting darkmode colors/theme, so my darkmode PaymentElement looks like the attached.

[remonh87]

You should not use the cardstyle but the element appearance:

return PaymentElement(
      autofocus: true,
      enablePostalCode: true,
      onCardChanged: (_) {},
      appearance: ElementAppearance(theme: ElementTheme.night),
      clientSecret: clientSecret ?? '',
    );

[remonh87]

the other ones are added in version 6.1.0 so I will close it for now

[blaneyneil]

i'm using:

flutter_stripe: ^11.1.0 flutter_stripe_web: ^6.1.0

and importing both of them on the page in question, but both ElementAppearance and ElementTheme are undefined. where are they imported from?

[remonh87]

https://github.com/flutter-stripe/flutter_stripe/blob/dac2181eb0bfc2b9ec5025237253e621c05b4cc5/packages/stripe_web/lib/src/widgets/payment_element.dart#L54

[blaneyneil]

I mean the property appearance is there, but object/models required for that param is not. Which is also the case with terms and fields.

[remonh87]

yes that is fixed in version 6.2.0 that I shipped now.

[blaneyneil]

really appreciate it. it works as expected now.