Flutter

late final WebViewController controller;

controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel(
    'BidaliChannel',
    onMessageReceived: onMessage,
  )
  ..setNavigationDelegate(
    NavigationDelegate(
      onPageStarted: (url) {
        controller.runJavaScript(initialJavascript);
      },
    ),
  )
  ..loadRequest(Uri.parse(commerceUrl));

window.bidaliProvider = {
  key: 'YOUR API KEY', // This is provided by Bidali
  name: 'YOUR WALLET NAME', // This will be provided by Bidali with your apiKey
  paymentCurrencies: ['stellar', 'stellarusdc'],
  brandColor: '#35D07F',
  email: 'test@test.com',
  phoneNumber: '15554321234',
  balances: {
    'stellar': '5',
    'usdcstellar': '20'
  },
  onPaymentRequest: (paymentRequest) => {
    var payload = { method: 'onPaymentRequest', data: paymentRequest };
    BidaliChannel.postMessage(JSON.stringify(payload));
  },
  openUrl: function (url) {
    var payload = { method: 'openUrl', data: { url } };
    BidaliChannel.postMessage(JSON.stringify(payload));
  }
};

{
  amount: '0.0187',
  symbol: 'ETH', // This is the payment currency your user chose
  protocol: 'ethereum', // This is Bidali's unique identifier for a currency
  address: '0x220b48eda85a0a067c769f0442dd2f4e03ba625a',
  chargeId: 'vIQ807gvR',
  extraId: 'vIQ807gvR',
  extraIdName: 'Memo text',
  description: '$50 Amazon US',
  lineItems: [
    {
      name: 'Amazon US',
      quantity: 1,
      amount: '$50 USD',
      image: 'https://assets.bidali.com/commerce/brands/amazon-com-us.png'
    }
  ]
}

await controller.runJavaScript('window.bidaliProvider.paymentSent();');
// or
await controller.runJavaScript('window.bidaliProvider.paymentCancelled();');

await controller.runJavaScript(
  'window.bidaliProvider.balances = ${jsonEncode(balances)};',
);

import 'dart:convert';

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

class BidaliScreen extends StatefulWidget {
  const BidaliScreen({super.key});

  @override
  State<BidaliScreen> createState() => _BidaliScreenState();
}

class _BidaliScreenState extends State<BidaliScreen> {
  late final WebViewController _controller;

  Map<String, String> balances = {
    'stellar': '5.2',
    'usdcstellar': '2000',
  };

  final user = {
    'email': 'test@test.com',
    'phoneNumber': '15554321234',
  };

  static const commerceUrl =
      'https://commerce.staging.bidali.com/dapp?key=YOUR_API_KEY';

  String get initialJavascript {
    final email = user['email'];
    final phoneNumber = user['phoneNumber'];

    return '''
      window.bidaliProvider = {
        name: 'WALLET NAME', // This will be provided by Bidali with your apiKey
        paymentCurrencies: ['stellar', 'usdcstellar'],
        brandColor: '#35D07F',
        email: ${email != null ? "'$email'" : 'null'},
        phoneNumber: ${phoneNumber != null ? "'$phoneNumber'" : 'null'},
        balances: ${jsonEncode(balances)},
        onPaymentRequest: (paymentRequest) => {
          var payload = { method: 'onPaymentRequest', data: paymentRequest };
          BidaliChannel.postMessage(JSON.stringify(payload));
        },
        openUrl: function (url) {
          var payload = { method: 'openUrl', data: { url } };
          BidaliChannel.postMessage(JSON.stringify(payload));
        }
      };
    ''';
  }

  Future<void> _onMessage(JavaScriptMessage message) async {
    final payload = jsonDecode(message.message) as Map<String, dynamic>;
    final method = payload['method'] as String?;
    final data = payload['data'] as Map<String, dynamic>?;

    switch (method) {
      case 'onPaymentRequest':
        final amount = data?['amount'];
        final address = data?['address'];
        final symbol = data?['symbol'];
        final protocol = data?['protocol'];
        final description = data?['description'];
        final chargeId = data?['chargeId'];
        final memo = data?['extraId'];

        // These 2 callbacks need to be called to notify Bidali of the status of the payment request
        // so it can update the WebView accordingly.
        Future<void> onPaymentSent() async {
          await _controller.runJavaScript('window.bidaliProvider.paymentSent();');
        }

        Future<void> onPaymentCancelled() async {
          await _controller
              .runJavaScript('window.bidaliProvider.paymentCancelled();');
        }

        if (protocol == 'stellar') {
          // Show a native transaction confirmation modal to the user
          final result = await sendXLM(
            amount: amount,
            address: address,
            symbol: symbol,
            protocol: protocol,
            memo: memo,
          );

          if (result.status == 'sent') {
            await onPaymentSent();
          } else if (result.status == 'cancelled') {
            await onPaymentCancelled();
          }
        }
        break;
      case 'openUrl':
        final url = data?['url'];
        // Open the URL in an in-app browser or external browser
        break;
    }
  }

  Future<void> _updateBalances(Map<String, String> nextBalances) async {
    setState(() {
      balances = nextBalances;
    });
    await _controller.runJavaScript(
      'window.bidaliProvider.balances = ${jsonEncode(nextBalances)};',
    );
  }

  @override
  void initState() {
    super.initState();

    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel(
        'BidaliChannel',
        onMessageReceived: _onMessage,
      )
      ..setNavigationDelegate(
        NavigationDelegate(
          onPageStarted: (url) {
            _controller.runJavaScript(initialJavascript);
          },
        ),
      )
      ..loadRequest(Uri.parse(commerceUrl));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: WebViewWidget(controller: _controller),
      ),
    );
  }
}