Payment Sheet not displayed

[daptanque]

Describe the bug

I initialize the paymentSheet, but when it comes to display the payment form to add card data it doesn't work, it starts loading and stays on the same page, the errors given are in the Stacktrace.

I've contacted Stripe to validate if it was something related with the keys, but it's all good, the request reaches Stripe without any problem, the only situation is that is Incomplete (user doesn't add card details, because that form is not displayed).

https://imgur.com/a/nhXvwbm

Stacktrace:
W/ActivityResultRegistry(21660): Dropping pending result for request fragment_d011f606-31f2-4468-b043-186e0d616040_rq#0: ActivityResult{resultCode=RESULT_OK, data=Intent { (has extras) }}
I/FIAM.Display(21660): Unbinding from activity: io.flutter.embedding.android.FlutterFragmentActivity
I/FIAM.Headless(21660): Removing display event component
I/FIAM.Display(21660): Binding to activity: com.stripe.android.paymentsheet.PaymentSheetActivity
I/FIAM.Headless(21660): Setting display event component
D/DecorView(21660): [DecorView][notifyViewAdded] token = android.view.ViewRootImpl$WEx@a2ad6de
I/TouchFilterInputStageHelper(21660): [needTouchEventFilter] Displayid : 0
D/HandGripFilter(21660): getdisplaysize, x : 1080 y : 2460
I/FIAM.Display(21660): Unbinding from activity: com.stripe.android.paymentsheet.PaymentSheetActivity
I/FIAM.Headless(21660): Removing display event component
I/FIAM.Display(21660): Binding to activity: io.flutter.embedding.android.FlutterFragmentActivity
I/FIAM.Headless(21660): Setting display event component
E/flutter (21660): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: StripeException(error: LocalizedErrorMessage(code: FailureCode.Failed, localizedMessage: Invalid Payment Intent client secret: sk_test_---, message: Invalid Payment Intent client secret: sk_test_---, stripeErrorCode: null, declineCode: null, type: null))
E/flutter (21660): #0 MethodChannelStripe._parsePaymentSheetResult (package:stripe_platform_interface/src/method_channel_stripe.dart:333:11)
E/flutter (21660): #1 MethodChannelStripe.presentPaymentSheet (package:stripe_platform_interface/src/method_channel_stripe.dart:227:12)
E/flutter (21660):
E/flutter (21660): #2 Stripe.presentPaymentSheet (package:flutter_stripe/src/stripe.dart:466:12)
E/flutter (21660):
E/flutter (21660): #3 PaymentVirtualTourPageState.displayPaymentSheet (package:travel_hour/pages/paymentvirtualtour.dart:135:7)
E/flutter (21660):
E/flutter (21660):

To Reproduce
Steps to reproduce the behavior:

1. Tapping the Make Payment button.
2. Observe a failure with exception

Expected behavior
When click the button see a form like this:

Smartphone / tablet

• Device: LG Wing
• OS: Android 12
• Flutter version: 1.8.21

Additional context
Code:

import 'dart:convert';
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:flutter_stripe/flutter_stripe.dart';

import '../models/place.dart';

class PaymentVirtualTourPage extends StatefulWidget {
  const PaymentVirtualTourPage({Key? key, required this.collectionName, required this.virtualTour, required this.placeData}) : super(key: key);

  final Place? placeData;
  final String collectionName;
  final String? virtualTour;

  @override
  PaymentVirtualTourPageState createState() => PaymentVirtualTourPageState();
}

class PaymentVirtualTourPageState extends State<PaymentVirtualTourPage> {
  Map<String, dynamic>? paymentIntent;


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('Stripe Payment'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              child: const Text('Make Payment'),
              onPressed: () async {
                await setupPayment();

              },
            ),
          ],
        ),
      ),
    );
  }


  setupPayment() async {

    WidgetsFlutterBinding.ensureInitialized();
    Stripe.publishableKey = 'pk_test_--------';


    await Stripe.instance
        .initPaymentSheet(
        paymentSheetParameters: SetupPaymentSheetParameters(
            paymentIntentClientSecret: 'sk_test_-------',
            style: ThemeMode.dark,
            allowsDelayedPaymentMethods: true,
            merchantDisplayName: 'LALALAND',
            customFlow: false,
            googlePay: const PaymentSheetGooglePay(merchantCountryCode: '--'),

        ))
        .then((value) {});

    await Stripe.instance.applySettings().whenComplete(() => makePayment());
  }


  Future<void> makePayment() async {
    try {

      paymentIntent = await createPaymentIntent('100', 'USD');


      displayPaymentSheet();
    } catch (err) {
      throw Exception(err);
    }
  }

  createPaymentIntent(String amount, String currency) async {
    try {
      //Request body
      Map<String, dynamic> body = {
        'amount': calculateAmount(amount),
        'currency': currency,
      };

      //Make post request to Stripe
      var response = await http.post(
        Uri.parse('https://api.stripe.com/v1/payment_intents'),
        headers: {
          'Authorization': 'Bearer sk_test_------',
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: {
          'amount': calculateAmount(amount),
          'currency': 'eur',
          'receipt_email': '[email protected]'
        },
      );
      return json.decode(response.body);
    } catch (err) {
      throw Exception(err.toString());
    }
  }

  calculateAmount(String amount) {
    final calculatedAmout = (int.parse(amount)) * 100;
    return calculatedAmout.toString();
  }

  displayPaymentSheet() async {
    try {
      await Stripe.instance.presentPaymentSheet().then((value) {
        showDialog(
            context: context,
            builder: (_) => AlertDialog(
              content: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.check_circle,
                    color: Colors.green,
                    size: 100.0,
                  ),
                  SizedBox(height: 10.0),
                  Text("Payment Successful!"),
                ],
              ),
            ));

        paymentIntent = null;
      }).onError((error, stackTrace) {
        throw Exception(error);
      });
    } on StripeException catch (e) {
      print('Error is:---> $e');
      AlertDialog(
        content: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: const [
                Icon(
                  Icons.cancel,
                  color: Colors.red,
                ),
                Text("Payment Failed"),
              ],
            ),
          ],
        ),
      );
    } catch (e) {
      print('$e');
    }
  }

  

}