WalletConnect Pay SDK - Flutter

flutter pub add walletconnect_pay

import 'package:walletconnect_pay/walletconnect_pay.dart';

// Initialize WalletConnect Pay. Either apiKey or appId must be passed
final payClient = WalletConnectPay(
  apiKey: 'YOUR_API_KEY', // Optional
  appId: 'YOUR_WCP_ID', // Optional
  clientId: 'OPTIONAL_CLIENT_ID', // Optional
  baseUrl: 'https://api.pay.walletconnect.com', // Optional
);

// Initialize the SDK
try {
  await payClient.init();
} on PayInitializeError catch (e) {
  // Handle initialization error
}

dependencies:
  webview_flutter: ^4.10.0
  url_launcher: ^6.1.0

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';

class PayDataCollectionWebView extends StatefulWidget {
  final String url;
  final VoidCallback onComplete;
  final ValueChanged<String> onError;

  const PayDataCollectionWebView({
    super.key,
    required this.url,
    required this.onComplete,
    required this.onError,
  });

  @override
  State<PayDataCollectionWebView> createState() =>
      _PayDataCollectionWebViewState();
}

class _PayDataCollectionWebViewState extends State<PayDataCollectionWebView> {
  late final WebViewController _controller;
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onPageFinished: (_) => setState(() => _isLoading = false),
        onNavigationRequest: (request) {
          if (!request.url.contains('pay.walletconnect.com')) {
            launchUrl(Uri.parse(request.url),
                mode: LaunchMode.externalApplication);
            return NavigationDecision.prevent;
          }
          return NavigationDecision.navigate;
        },
      ))
      ..addJavaScriptChannel(
        'ReactNativeWebView',
        onMessageReceived: (message) {
          try {
            final data = jsonDecode(message.message) as Map<String, dynamic>;
            switch (data['type']) {
              case 'IC_COMPLETE':
                widget.onComplete();
                break;
              case 'IC_ERROR':
                widget.onError(data['error'] ?? 'Unknown error');
                break;
            }
          } catch (_) {
            // Ignore non-JSON messages
          }
        },
      )
      ..loadRequest(Uri.parse(widget.url));

    // Inject JS bridge for compatibility
    _controller.runJavaScript('''
      window.ReactNativeWebView = {
        postMessage: function(data) {
          ReactNativeWebView.postMessage(data);
        }
      };
    ''');
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebViewWidget(controller: _controller),
        if (_isLoading)
          const Center(child: CircularProgressIndicator()),
      ],
    );
  }
}

String buildFormUrl(
  String baseUrl, {
  Map<String, String> prefillData = const {},
  String? theme,           // "light" or "dark"
  String? themeVariables,  // base64url string exported from the Pay Dashboard
}) {
  final uri = Uri.parse(baseUrl);
  final params = {...uri.queryParameters};
  if (prefillData.isNotEmpty) {
    params['prefill'] = base64Url.encode(utf8.encode(jsonEncode(prefillData))).replaceAll('=', '');
  }
  if (theme != null) params['theme'] = theme;
  if (themeVariables != null) params['themeVariables'] = themeVariables;
  return uri.replace(queryParameters: params).toString();
}

import 'package:walletconnect_pay/walletconnect_pay.dart';

class PaymentService {
  late final WalletConnectPay _payClient;

  Future<void> initialize() async {
    _payClient = WalletConnectPay(
      appId: 'YOUR_WCP_ID',
    );
    await _payClient.init();
  }

  Future<ConfirmPaymentResponse> processPayment(
    String paymentLink,
    List<String> accounts,
  ) async {
    // Step 1: Get payment options
    final optionsResponse = await _payClient.getPaymentOptions(
      request: GetPaymentOptionsRequest(
        paymentLink: paymentLink,
        accounts: accounts,
        includePaymentInfo: true,
      ),
    );

    if (optionsResponse.options.isEmpty) {
      throw Exception('No payment options available');
    }

    // Step 2: Select payment option (simplified - use first option)
    final selectedOption = optionsResponse.options.first;

    // Step 3: Collect data via WebView if required.
    // This must happen BEFORE fetching the required payment actions —
    // the backend rejects the actions request with 400 "IC data required"
    // for options needing Information Capture if data wasn't collected first.
    // The WebView submits the data directly to the backend, so it is NOT
    // passed to confirmPayment later.
    if (selectedOption.collectData?.url != null) {
      // Show WebView and wait for IC_COMPLETE
      await showDataCollectionWebView(selectedOption.collectData!.url);
    }

    // Step 4: Get required payment actions
    final actions = await _payClient.getRequiredPaymentActions(
      request: GetRequiredPaymentActionsRequest(
        optionId: selectedOption.id,
        paymentId: optionsResponse.paymentId,
      ),
    );

    // Step 5: Sign all actions
    final data = <Object>[];
    for (final action in actions) {
      final signature = await signAction(action.walletRpc);
      data.add(signature);
    }

    // Step 6: Confirm payment
    final confirmResponse = await _payClient.confirmPayment(
      request: ConfirmPaymentRequest(
        paymentId: optionsResponse.paymentId,
        optionId: selectedOption.id,
        data: data,
        maxPollMs: 60000,
      ),
    );

    // Step 7: Poll until final status (if needed)
    var response = confirmResponse;
    while (!response.isFinal && response.pollInMs != null) {
      await Future.delayed(Duration(milliseconds: response.pollInMs!));
      response = await _payClient.confirmPayment(
        request: ConfirmPaymentRequest(
          paymentId: optionsResponse.paymentId,
          optionId: selectedOption.id,
          data: data,
          maxPollMs: 60000,
        ),
      );
    }

    return response;
  }

  Future<String> signAction(WalletRpcAction walletRpc) async {
    switch (walletRpc.method) {
      case 'eth_signTypedData_v4':
        return await signTypedData(walletRpc.chainId, walletRpc.params);
      case 'eth_sendTransaction':
        return await sendTransaction(walletRpc.chainId, walletRpc.params);
      case 'personal_sign':
        return await personalSign(walletRpc.chainId, walletRpc.params);
      default:
        throw UnimplementedError('Unsupported RPC method: ${walletRpc.method}');
    }
  }
}

WalletConnectPay({
  String? apiKey,
  String? appId,
  String? clientId,
  String? baseUrl,
})

GetPaymentOptionsRequest({
  required String paymentLink,
  required List<String> accounts,
  @Default(false) bool includePaymentInfo,
})

PaymentOptionsResponse({
  required String paymentId,
  PaymentInfo? info,
  required List<PaymentOption> options,
  CollectDataAction? collectData,
  PaymentResultInfo? resultInfo,     // Transaction result details (present when payment already completed)
})

class PaymentResultInfo {
  final String txId;               // Transaction ID
  final PayAmount optionAmount;    // Token amount details
}

PaymentInfo({
  required PaymentStatus status,
  required PayAmount amount,
  required int expiresAt,
  required MerchantInfo merchant,
  BuyerInfo? buyer,
})

PaymentOption({
  required String id,
  required String account,
  required PayAmount amount,
  @JsonKey(name: 'etaS') required int etaSeconds,
  required List<Action> actions,
  CollectDataAction? collectData,  // Per-option data collection (null if not required)
})

ConfirmPaymentRequest({
  required String paymentId,
  required String optionId,
  List<Object>? data,                   // Wallet RPC results in action order: Strings or Map<String, dynamic> JSON objects
  @Default([]) List<String> signatures, // Deprecated alias for `data`, still accepted as fallback when data is null
  List<CollectDataFieldResult>? collectedData,
  int? maxPollMs,
})

ConfirmPaymentResponse({
  required PaymentStatus status,
  required bool isFinal,
  int? pollInMs,
})

enum PaymentStatus {
  requires_action,
  processing,
  succeeded,
  failed,
  expired,
}

class Action {
  final WalletRpcAction walletRpc;
}

class WalletRpcAction {
  final String chainId;   // CAIP-2 chain ID (e.g., "eip155:8453")
  final String method;    // RPC method (e.g., "eth_signTypedData_v4", "eth_sendTransaction")
  final String params;    // JSON-encoded parameters
}

class CollectDataAction {
  final String url;                // WebView URL for data collection
  final String? schema;            // JSON schema describing required fields
}

abstract class PayError extends PlatformException {
  PayError({
    required super.code,
    required super.message,
    required super.details,
    required super.stacktrace,
  });
}

try {
  await payClient.init();
} on PayInitializeError catch (e) {
  print('Initialization failed: ${e.code} - ${e.message}');
}

try {
  final response = await payClient.getPaymentOptions(request: request);
} on GetPaymentOptionsError catch (e) {
  print('Error code: ${e.code}');
  print('Error message: ${e.message}');
} on PayError catch (e) {
  // Catch any Pay-related error
  print('Pay error: ${e.message}');
} catch (e) {
  print('Unexpected error: $e');
}