Member Avatar for KillerFrost

I'd like to incorporate a payment gateway into flutter web. Payment UI is loaded in flutter web, but I'm not sure how to get callbacks from it.

  • 3 Contributors
  • 3 Replies
  • 194 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Dani

Dani AI

Generated

Short answer for : there are three reliable callback patterns for a Flutter web single-page app — in-page messaging (JS widget or iframe), popup/window messaging, and redirect + server-side webhook. Pick the one the payment provider supports, use the provider’s client library where available (as suggested), and treat any client-side return as convenience only — confirm final status via a server webhook (as hinted, these APIs can be the tricky part).

If the payment UI runs inside your page (widget or iframe), the provider will usually either expose a JS callback or send a postMessage. In Flutter web use dart:html to listen and validate the origin and payload before updating app state:

import 'dart:html' as html;

html.window.onMessage.listen((html.MessageEvent event) {
  if (event.origin != 'https://trusted-provider.example') return;
  final data = event.data; // validate schema and signature
  // call backend to confirm or update app state
  print('payment callback: $data');
});

If the provider opens a popup or performs a full-page redirect, use a short-lived token/return_url plus a server-side verification step. Have the return_url redirect back to your SPA with a token in the query or fragment, parse it in Dart, then exchange that token with your backend to get authoritative status. The popup can communicate back with window.opener.postMessage so the main window can close it and show final UI.

import 'dart:html' as html;

final uri = Uri.parse(html.window.location.href);
final token = uri.queryParameters['token'] ?? '';
// send token to your backend to verify final payment status

Security & troubleshooting notes: always use HTTPS; verify webhook signatures server-side; never accept client-only signals as final; favor tokenization to stay out of PCI scope; watch for X-Frame-Options/CSP that block iframes; use idempotency keys and server logging; test webhooks via a tunnel in dev. For UX, show a pending state, poll server only when necessary, and surface clear retry/error states.

Recommended Answers

All 3 Replies

Member Avatar for Dani

I'm not familiar with Payment UI. Is it a specific payment system or are you just generically referring to something such as Braintree or Stripe?

It seems like you might want something such as https://pub.dev/packages/flutter_stripe?

Member Avatar for sf_910

I've done web API work with PayPal for shopping carts and subscriptions; it was a complicated API, but it was well documented. (This is something you'd expect from third-party digital banking tools.) I'm sure this will be a major undertaking. You could use Webviews from a web app instead, which would be much easier.

Member Avatar for Dani

I also have a lot of experience with the PayPal API, but I also have experience with Braintree's API, which is on a whole different level, as it is designed for you to directly store credit card and customer information in your own database. As mentioned, Stripe is a competitor to Braintree, although Braintree is owned by PayPal.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.