Flutter Stripe Web: issues with confirm payment

[willxie]

Describe the bug

Since last week I had been getting new errors on flutter stripe web without any code changes.

The following code is what's triggering the error after a payment intent is created

      await Stripe.instance.confirmPayment(
        paymentIntentClientSecret: paymentData.client_secret,
        data: PaymentMethodParams.card(
          paymentMethodData: PaymentMethodData(
            billingDetails: billingDetails,
          ),
        ),
        options: const PaymentMethodOptions(
          setupFutureUsage: PaymentIntentsFutureUsage.OffSession,
        ),
      );

Error:

`cashapp` is not one of the supported values: acssDebit, affirm, afterpayClearpay, alipay, auBecsDebit, bacsDebit, bancontact, blik, boleto, card, cardPresent, customerBalance, eps, fpx, giropay, grabpay, ideal, interacPresent, klarna, konbini, link, oxxo, p24, paynow, pix, promptpay, sepaDebit, sofort, usBankAccount, wechatPay

It looks like the wrong payment method is selected incorrectly for web js implementation of this function. I only tested this using 4242... card as well as a real credit card in production. Since it was working before just last week and same payment flutter code still works on android and iOS, I suspect there could be a bug or a API update that broke the implementation.

To Reproduce

See above, I am using:

  flutter_stripe: ^10.0.0
  flutter_stripe_web: ^5.0.0 

Expected behavior
Payment should go through like in iOS and Android without errors.

[jonasbark]

Please post the full stacktrace - right now I'm not sure if it's a server-side or client-side issue

[willxie]

Invalid argument(s): `cashapp` is not one of the supported values: acssDebit, affirm, afterpayClearpay, alipay, auBecsDebit, bacsDebit, bancontact, blik, boleto, card, cardPresent, customerBalance, eps, fpx, giropay, grabpay, ideal, interacPresent, klarna, konbini, link, oxxo, p24, paynow, pix, promptpay, sepaDebit, sofort, usBankAccount, wechatPay
└───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
│ #0    _pay
├┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄
│ ⚠️ dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 297:3            throw_
│ ⚠️ packages/json_annotation/src/enum_helpers.dart 83:5                                    $36enumDecode
│ ⚠️ packages/stripe_js/src/api/payment_intents/payment_intent.g.dart 58:28                 <fn>
│ ⚠️ dart-sdk/lib/internal/iterable.dart 425:31                                             elementAt
│ ⚠️ dart-sdk/lib/internal/iterable.dart 354:26                                             moveNext
│ ⚠️ dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 1140:20      next
│ ⚠️ dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 555:14                     of
│ ⚠️ dart-sdk/lib/internal/iterable.dart 224:7                                              toList
│ ⚠️ packages/stripe_js/src/api/payment_intents/payment_intent.g.dart 58:69                 _$36$36_PaymentIntentFromJson
│ ⚠️ packages/stripe_js/src/api/payment_intents/payment_intent.freezed.dart 892:7           fromJson
│ ⚠️ packages/stripe_js/src/api/payment_intents/payment_intent.freezed.dart 18:25           _$36PaymentIntentFromJson
│ ⚠️ packages/stripe_js/src/api/payment_intents/payment_intent.dart 275:7                   fromJson
│ ⚠️ packages/stripe_js/src/api/payment_intents/payment_intent_response.g.dart 13:27        _$36$36_PaymentIntentResponseFromJson
│ ⚠️ packages/stripe_js/src/api/payment_intents/payment_intent_response.freezed.dart 151:7  fromJson
│ ⚠️ packages/stripe_js/src/api/payment_intents/payment_intent_response.freezed.dart 19:33  _$36PaymentIntentResponseFromJson
│ ⚠️ packages/stripe_js/src/api/payment_intents/payment_intent_response.dart 18:7           fromJson
│ ⚠️ packages/stripe_js/src/js/utils/parse_intent_response.dart 15:32                       parseIntentResponse
│ ⚠️ dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50                     <fn>
│ ⚠️ dart-sdk/lib/async/zone.dart 1661:54                                                   runUnary
│ ⚠️ dart-sdk/lib/async/future_impl.dart 162:18                                             handleValue
│ ⚠️ dart-sdk/lib/async/future_impl.dart 838:44                                             handleValueCallback
│ ⚠️ dart-sdk/lib/async/future_impl.dart 867:13                                             _propagateToListeners
│ ⚠️ dart-sdk/lib/async/future_impl.dart 643:5                                              [_completeWithValue]
│ ⚠️ dart-sdk/lib/async/future_impl.dart 713:7                                              callback
│ ⚠️ dart-sdk/lib/async/schedule_microtask.dart 40:11                                       _microtaskLoop
│ ⚠️ dart-sdk/lib/async/schedule_microtask.dart 49:5                                        _startMicrotaskLoop
│ ⚠️ dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7                     <fn>
│ ⚠️ 

[diegoveloper]

Same issue on mobile, tested using flutter_stripe: ^9.6.0 and 10.0.0 :

flutter: Unhandled error Invalid argument(s): `CashApp` is not one of the supported values: AfterpayClearpay, Card, CashAppPay, Alipay, Grabpay, Ideal, Fpx, CardPresent, SepaDebit, AuBecsDebit, BacsDebit, Giropay, P24, Eps, Bancontact, Oxxo, PayPal, Sofort, Upi, USBankAccount, RevolutPay, Unknown occurred in Instance of 'AddPaymentAccountDrawerBloc'.
#0      $enumDecode (package:json_annotation/src/enum_helpers.dart:83:5)
#1      _$$SetupIntentImplFromJson.<anonymous closure> (package:stripe_platform_interface/src/models/setup_intent.g.dart:18:23)
#2      MappedListIterable.elementAt (dart:_internal/iterable.dart:425:31)
#3      ListIterator.moveNext (dart:_internal/iterable.dart:354:26)
#4      new _GrowableList._ofEfficientLengthIterable (dart:core-patch/growable_array.dart:189:27)
#5      new _GrowableList.of (dart:core-patch/growable_array.dart:150:28)
#6      new List.of (dart:core-patch/array_patch.dart:39:18)
#7      ListIterable.toList (dart:_internal/iterable.dart:224:7)
#8      _$$Set<…>
flutter: 
#0      BlocBase.onError.<anonymous closure> (package:bloc/src/bloc.dart:743:7)

When we call:

 final SetupIntent response = await _stripe.confirmSetupIntent(
      paymentIntentClientSecret: clientSecret,
      params: data,
    );

[siherrmann]

I have the same issue on web (I use flutter_stripe: ^10.0.0 and flutter_stripe_web: ^5.0.0 and try to confirm a payment intent from a newly created subscription). I further narrowed it down. I'll try to explain it as detailed as I can:
I am creating payment intents in our go backend with the official stripe library. I am creating payment intents for subscriptions, which should have card, paypal and sepa_debit as available payment methods.

My code in the backend looks something like that:

paymentSettings := &stripe.SubscriptionPaymentSettingsParams{
	SaveDefaultPaymentMethod: stripe.String("on_subscription"),
	PaymentMethodTypes:       stripe.StringSlice([]string{"card", "paypal", "sepa_debit"}),
}

subscriptionParams := &stripe.SubscriptionParams{
	Customer: stripe.String(requestData.CustomerID),
	Items: []*stripe.SubscriptionItemsParams{
		{
			Price:    stripe.String(requestData.PriceID),
			Quantity: stripe.Int64(int64(requestData.Quantity)),
		},
	},
	PaymentSettings: paymentSettings,
	PaymentBehavior: stripe.String("default_incomplete"),
}
subscriptionParams.AddExpand("latest_invoice.payment_intent")

newSubscription, err := subscription.New(subscriptionParams)
if err != nil {
		... handling error
}

Everything works fine in this part, payment intents get created with all the payment methods.

If I now try to use the created payment intent in flutter web with card input it throws the error:

Invalid argument(s): `paypal` is not one of the supported values: acssDebit, affirm, afterpayClearpay, alipay, auBecsDebit, bacsDebit, bancontact, blik, boleto, card, cardPresent, customerBalance, eps, fpx, giropay, grabpay, ideal, interacPresent, klarna, konbini, link, oxxo, p24, paynow, pix, promptpay, sepaDebit, sofort, usBankAccount, wechatPay

The same happens when I remove paypal from the payment intent creation:

Invalid argument(s): `sepaDebit` is not one of the supported values: acssDebit, affirm, afterpayClearpay, alipay, auBecsDebit, bacsDebit, bancontact, blik, boleto, card, cardPresent, customerBalance, eps, fpx, giropay, grabpay, ideal, interacPresent, klarna, konbini, link, oxxo, p24, paynow, pix, promptpay, sepaDebit, sofort, usBankAccount, wechatPay

Here we can see the first weird thing: sepaDebit is not what I created the payment intent with (I used sepa_debit).

The second interesting thing is that the payment goes through if I put in either paypal or sepa_debit alone in the payment intent. It looks like the stripe backend only wants one payment method element in the payment_method_types map. The second one always throws an error.

Now on stripes side I get these logs (everything is test data so I don't blur anything):
This is the case with paypal removed from the payment intent creation:

Now the case where paypal alone is added as a payment method on payment intent creation which works:

Probably we only have to give stripe the selected payment method from the payment element?
Furthermore somewhere on the way the payment methods seems to be converted, and sepaDebit is not the officially supported naming for sepa_debit.

I hope this information helps resolving the problem.

[garylevansjr]

Same issue with us_bank_account

[LWIdevteam]

Yes, we've run into this issue as well. Would love to see a fix pushed soon!

[remonh87]

fix wil be released coming week

[siherrmann]

Thank you for your work but the fix (version stripe_js 3.4.0) didn't change anything for me. Please refer to my comment what exactly the breaking case was.

I have the same issue on web (I use flutter_stripe: ^10.0.0 and flutter_stripe_web: ^5.0.0 and try to confirm a payment intent from a newly created subscription). I further narrowed it down. I'll try to explain it as detailed as I can:

Error was still:

Invalid argument(s): `sepa_debit` is not one of the supported values: acssDebit, affirm, afterpayClearpay, alipay, auBecsDebit, bacsDebit, bancontact, blik, boleto, card, cashapp, cardPresent, customerBalance, eps, fpx, giropay, grabpay, ideal, interacPresent, klarna, konbini, link, oxxo, p24, paynow, pix, promptpay, sepaDebit, sofort, usBankAccount, wechatPay

Issue occurs on confirming a payment element created with two or more payment methods and there is still the error that sepaDebit is not the officially supported value by stripe and I get sepa_debit from the newly (and correctly) created payment intent.

[siherrmann]

Could we please reopen the issue? It is not solved and a quick solution would be very helpful. Or should I open a new issue?

[mminhlequang]

fix wil be released coming week

hello, which version please

[PavloKonopadaDev]

Hello does anyone know how to implement Revolut payments in flutter

[Nicola-Cestaro]

I'm still getting this issue

[siherrmann]

The fix from Fix #1681 is not released yet, I'm waiting for the fix too. Seems to be a bigger problem with probably more connected issues, don't know.

[Nicola-Cestaro]

The fix from Fix #1681 is not released yet, I'm waiting for the fix too. Seems to be a bigger problem with probably more connected issues, don't know.

Were you able to find a workaround? Seems strange to me that a breaking issue has not been fixed in months.

[siherrmann]

We built a seperate payment method selection page in front of the payment page and in the server we then create a payment intent only for the given payment method, but obviously that's not as nice as directly selecting the pyament method in the payment sheet. I hope that helps, for us it does work that way.

I hope the above mentioned fix works, but as it is not released yet, I wasn't able to test it (didn't have the time to manually get the fix into my build).