Building a WooCommerce Mobile App with Flutter

WooCommerce powers a huge share of the web’s small and mid-size stores, and most of those merchants eventually want a mobile app. The good news: WooCommerce ships a capable REST API, so a Flutter app can reuse the existing store, inventory, and orders without a rewrite.

Authenticating Against the REST API

WooCommerce exposes two credential styles. For read-only catalog data over HTTPS, consumer key/secret pairs are the simplest. For anything touching a customer account (orders, addresses), pair the WooCommerce REST API with the JWT Authentication for WP REST API plugin so users log in with their store credentials.

Generate a key in WooCommerce → Settings → Advanced → REST API, then send it with each request. Always require HTTPS; sending keys over plain HTTP is a leak waiting to happen.

class WooClient {
  WooClient(this._dio, this.baseUrl, this._key, this._secret);
  final Dio _dio;
  final String baseUrl, _key, _secret;

  Future<List<Product>> products({int page = 1, int perPage = 20}) async {
    final res = await _dio.get(
      '$baseUrl/wp-json/wc/v3/products',
      queryParameters: {
        'consumer_key': _key,
        'consumer_secret': _secret,
        'page': page,
        'per_page': perPage,
        'status': 'publish',
      },
    );
    return (res.data as List)
        .map((json) => Product.fromJson(json as Map<String, dynamic>))
        .toList();
  }
}

For production, put the consumer secret behind your own thin backend proxy rather than shipping it in the app binary. A Cloudflare Worker or small serverless function that injects credentials keeps them off the device.

Modeling the Catalog

WooCommerce product JSON is large and inconsistent — prices arrive as strings, some products are variable with child variations, and images come as an array. Map only what the UI needs:

• id, name, price (parse the string to a number once)
• images → take the first as the thumbnail
• type → simple vs variable changes the add-to-cart flow
• stock_status → gate the buy button on instock

Cache the catalog locally (Hive or Isar) and paginate. A store with 2,000 SKUs should never block the first screen on a full sync.

A Cart That Survives Restarts

The cart is the highest-stakes piece of state in the app. Keep it client-side and persistent so a dropped connection or app kill never loses the user’s selections. Store cart lines as {productId, variationId, quantity} and re-resolve prices at checkout to avoid stale totals.

Future<Order> placeOrder(List<CartLine> lines, Address shipping) async {
  final body = {
    'payment_method': 'stripe',
    'set_paid': false,
    'shipping': shipping.toJson(),
    'line_items': lines
        .map((l) => {'product_id': l.productId, 'quantity': l.quantity})
        .toList(),
  };
  final res = await _dio.post(
    '$baseUrl/wp-json/wc/v3/orders',
    queryParameters: {'consumer_key': _key, 'consumer_secret': _secret},
    data: body,
  );
  return Order.fromJson(res.data as Map<String, dynamic>);
}

Creating an order with set_paid: false reserves it in an pending state; you flip it to paid after the payment gateway confirms.

Checkout and Payments

Do not try to collect card numbers inside your Flutter widgets — that drags you into PCI compliance you don’t want. Instead:

• Create the WooCommerce order first to get an order ID and total.
• Hand the total to a native payment SDK: Stripe, or platform wallets via pay (Apple Pay / Google Pay).
• On the gateway’s success callback, mark the order paid through your backend, not the client.

This keeps sensitive data in audited SDKs and your app focused on UX. Wallets in particular lift conversion dramatically on mobile because they remove manual card entry.

Handling the Rough Edges

• Rate limits — Batch and cache. The REST API is not built for a request per scroll frame.
• Variations — Fetch /products/{id}/variations lazily when a variable product is opened, not up front.
• Coupons — Apply them server-side at order creation so the discount logic stays in WooCommerce.
• Webhooks — Subscribe to order.updated so the app reflects fulfillment and refunds without polling.

A WooCommerce Flutter app is less about clever code and more about respecting boundaries: the store owns pricing and inventory, the payment SDK owns card data, and the app owns a fast, offline-tolerant experience. Get those seams right and you ship a native storefront that merchants can trust with real revenue.