Accepting payments in Flutter Web

Question

I am creating an application in Flutter Web that needs to collect payment information to create subscription charges. My plan was to use Stripe to do this, however, after making all the necessary methods for Stripe, I found that Stripe only accepts card data through Stripe Elements. Upon further research, I saw that essentially all payment platforms do this to maintain PCI compliance.

Is there any method of embedding Stripe elements(or any equivalent) into my application or is there an easier method of accepting payments with Flutter Web?

Shinto

Answer 1

There's an unofficial Flutter Stripe package that might be what you're after: https://pub.dev/packages/stripe_payment

Antiphonal

Thanks, but it doesn't seem like this package has support for flutter web. – Shinto

I am in the same boat as you now @ChristopherMoore. What did you do at the end and how is flutter web working out for you? Any link I can see your work please? – Libeler

@Libeler I used an iFrame of a stripe elements site that I made separately. So I essentially did a normal web implementation of Stripe. Then I had the iframe site change a firestore variable upon payment success, which my flutter application watched with a stream. When my flutter application saw that variable change, I navigated to wherever I needed to go. This may not work for you if you're doing one-time payments instead of storing card info like I was. It was not a very elegant solution. – Shinto

Answer 2

There's a new package called stripe_sdk, that appears to have Web support. I haven't tried it yet, but it says Web support in the description and has a web demo aswell :)

Also the old packages for mobile won't work for web, because they rely on WebView, which is not supported (and wouldn't make much sense) on web.

Moyra

Answer 3

In case you're using Firebase as a backend, there's a stripe payments extension you can install in Firebase which makes it easy. How it works is you add a checkout_session in to a user collection and keep listening on the document. Stripe extension will update the document with a unique payments url and we just open that URL in a new tab to make the payment in the tab. We're using it in our web app, and it's working.

Something like :

buyProduct(Product pd) async {
setState(() {
  loadingPayment = true;
});
String userUid = FirebaseAuth.instance.currentUser!.uid;
var docRef = await FirebaseFirestore.instance
    .collection('users')
    .doc(userUid)
    .collection('checkout_sessions')
    .add({
  'price': pd.priceId,
  'quantity': pd.quantity,
  'mode': 'payment',
  'success_url': 'https://yourwebsite/purchase-complete',
  'cancel_url': 'https://yourwebsite/payment-cancelled',
});

docRef.snapshots().listen(
  (ds) async {
    if (ds.exists) {
      //check any error
      var error;

      try {
        error = ds.get('error');
      } catch (e) {
        error = null;
      }

      if (error != null) {
        print(error);
      } else {
        String url = ds.data()!.containsKey('url') ? ds.get('url') : '';

          if (url != '') {
            //open the url in a new tab
            if (!isStripeUrlOpen) {
              isStripeUrlOpen = true;
              setState(
                () {
                  loadingPayment = false;
                },
              );

              launchUrl(Uri.parse(url));
            }
          }
        } 
      }
    }
  },
);

}

Pierpont