Flutter web Stripe Error: WebUnsupportedError: initPaymentSheet is not supported for Web

Viewed 122

I am trying to implement Stripe inside my application, but I do get this error.

  1. The error I get is Error: WebUnsupportedError:

initPaymentSheet is not supported for Web i don't know how to make it work on the web.

    WidgetsFlutterBinding.ensureInitialized();
    Get.put(MenuController());
    Get.put(NavigationController());
    await initialization;
    Stripe.publishableKey =
        'pk_test_5555851KuZKPKYrgcm5L1......';
    Stripe.merchantIdentifier = 'merchant.flutter.stripe.test';
    Stripe.urlScheme = 'flutterstripe';
    await Stripe.instance.applySettings();
    
    runApp((MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (context) => ApplicationState(),
          builder: (context, _) => MyApp(),
        )
      ],
      // child: MyApp(),
    )));
    }
    Future<void> makePayment(String amount, String currency) async {
      try {
        paymentIntentData = await createPaymentIntent(amount, currency);
        await Stripe.instance.initPaymentSheet(
            paymentSheetParameters: SetupPaymentSheetParameters(
                paymentIntentClientSecret: paymentIntentData!['client_secret'],
                applePay: true,
                googlePay: true,
                merchantCountryCode: 'US',
                merchantDisplayName: 'KasaiMart'));
        displayPaymentSheet();
      } on StripeException catch (e) {
        print('Exeption ${e.toString()}');
      }
    }
    
    displayPaymentSheet() async {
      try {
        await Stripe.instance.presentPaymentSheet();
        paymentIntentData = null;
        Get.defaultDialog(
            title: 'Select project to contribute to',
            middleText: 'Paid Sucessfully');
      } catch (e) {
        print('Exeption ${e.toString()}');
      }
    }
    
    createPaymentIntent(String amount, String currency) async {
      try {
        Map<String, dynamic> body = {
          'amount': calculateAmount(amount),
          'currency': currency,
          'payment_method_types[]': 'card'
        };
        var response = await http.post(
            Uri.parse('https://api.stripe.com/v1/payment_intents'),
            body: body,
            headers: {
              'Authorization':
                  'pk_test_51K......',
              'Content-Type': 'application/x-www-form-urlencoded'
            });
        return jsonDecode(response.body.toString());
      } catch (e) {
        print('Exeption ${e.toString()}');
      }
    }
  1. I am struggling to display the initPaymentSheet?

In which method am I doing something wrong? is it possible to fix this issue or is it from package itself?

2 Answers

initPaymentSheet doesn't work on the web. Stripe's React Native SDK is exclusive to iOS/Android.

If you want to present something similar to the Payment Sheet via the web, you might consider using the Payment Element instead: https://stripe.com/docs/payments/payment-element

Related