Flutter Web - Dialog Popup for Stripe Integration

Question

I'm trying to integrate Stripe Payment in my Flutter website and I am using the stripe_payment 0.1.0 package (earlier version that appears to support Web). I've configured Stripe credentials in the initState:

initState() {
    super.initState();

    StripePayment.setSettings(StripeSettings(
        publishableKey: "pk_test_**REAL CREDENTIAL HERE**",
        merchantIdentifier: "Test",
        androidProductionEnvironment: false));
  }

I call the following function when the user clicks "Add Card" and hope for a popup to appear for the user to present credentials. Unfortunately, nothing is happening and no error message prints.

StripePayment.addSource().then((token) {
                      Firestore.instance.collection('cards').document(widget.userID).collection('tokens').add({'tokenID': token}).then((val) {
                        print('saved');
                      });
                    }).catchError((e) {
                      print(e);
                    });

Any idea why this is not working? Do I need to implement a dialog box? Are there better ways to generate a Stripe token on flutter for web?

Answer 1

Here's a good example of Stripe Integration on Flutter Web App as well as Mobile App.

Step by step guide https://fidev.io/stripe-checkout-in-flutter-web/

Source code. (need to change apiKey, secretKey, and price id on constant.dart file) https://github.com/MarcinusX/flutter_stripe_demo

I have added {CHECKOUT_SESSION_ID} for successUrl in stripe_checkout_web.dart as following.

void redirectToCheckout(BuildContext _) async {
  final stripe = Stripe(apiKey);

  stripe.redirectToCheckout(CheckoutOptions(
    lineItems: [
      LineItem(price: nikesPriceId, quantity: 1),
    ],
    mode: 'payment',
    successUrl: 'http://localhost:8081/#/success/{CHECKOUT_SESSION_ID}',
    cancelUrl: 'http://localhost:8081/#/cancel',
  ));
}