Tap to Pay

#include <WiFi.h>
#include <BLEDevice.h>
#include <BLEUtils.h>
#include <BLEServer.h>

#define SERVICE_UUID        "12345678-1234-1234-1234-123456789abc"
#define CHARACTERISTIC_UUID "87654321-4321-4321-4321-cba987654321"

class TaptoPayCallbacks : public BLECharacteristicCallbacks {
    void onWrite(BLECharacteristic *pCharacteristic) {
        std::string value = pCharacteristic->getValue();

        if (value == "PAY_REQUEST") {
            // Simulate payment processing
            delay(2000);
            pCharacteristic->setValue("PAY_SUCCESS");
            pCharacteristic->notify();
        }
    }
};

void setup() {
    Serial.begin(115200);

    // Initialize BLE
    BLEDevice::init("Tap to Pay Device");
    BLEServer *pServer = BLEDevice::createServer();

    // Create service
    BLEService *pService = pServer->createService(SERVICE_UUID);

    // Create characteristic
    BLECharacteristic *pCharacteristic = pService->createCharacteristic(
        CHARACTERISTIC_UUID,
        BLECharacteristic::PROPERTY_READ |
        BLECharacteristic::PROPERTY_WRITE |
        BLECharacteristic::PROPERTY_NOTIFY
    );

    pCharacteristic->setCallbacks(new TaptoPayCallbacks());
    pCharacteristic->setValue("Ready");

    // Start service
    pService->start();

    // Start advertising
    BLEAdvertising *pAdvertising = BLEDevice::getAdvertising();
    pAdvertising->addServiceUUID(SERVICE_UUID);
    pAdvertising->setScanResponse(true);
    pAdvertising->setMinPreferred(0x0);
    BLEDevice::startAdvertising();

    Serial.println("Tap to Pay BLE Server started!");
}

void loop() {
    delay(1000);
}

import React, { useState, useEffect } from 'react';
import { BleManager } from 'react-native-ble-plx';
import { PermissionsAndroid, Platform } from 'react-native';

const SERVICE_UUID = "12345678-1234-1234-1234-123456789abc";
const CHARACTERISTIC_UUID = "87654321-4321-4321-4321-cba987654321";

const TaptoPayApp = () => {
  const [bleManager] = useState(() => new BleManager());
  const [device, setDevice] = useState(null);
  const [paymentStatus, setPaymentStatus] = useState('disconnected');

  useEffect(() => {
    // Request BLE permissions
    const requestPermissions = async () => {
      if (Platform.OS === 'android') {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
          {
            title: 'Location Permission',
            message: 'Tap to Pay needs location access to find BLE devices',
          }
        );
        return granted === PermissionsAndroid.RESULTS.GRANTED;
      }
      return true;
    };

    requestPermissions();
  }, []);

  const connectToDevice = async () => {
    try {
      const scannedDevice = await bleManager.scan([], 5, true);
      const taptoPayDevice = scannedDevice.find(
        d => d.name?.includes('Tap to Pay')
      );

      if (taptoPayDevice) {
        await bleManager.connectToDevice(taptoPayDevice.id);
        const connectedDevice = await bleManager.retrieveServices(
          taptoPayDevice.id, [SERVICE_UUID]
        );
        setDevice(connectedDevice);
        setPaymentStatus('connected');
      }
    } catch (error) {
      console.error('Connection error:', error);
    }
  };

  const sendPayment = async () => {
    if (!device) return;

    try {
      await bleManager.writeCharacteristicWithResponseForDevice(
        device.id,
        SERVICE_UUID,
        CHARACTERISTIC_UUID,
        btoa('PAY_REQUEST')
      );

      setPaymentStatus('processing');

      // Listen for response
      device.monitorCharacteristicForService(
        SERVICE_UUID,
        CHARACTERISTIC_UUID,
        (error, characteristic) => {
          if (error) return;

          const value = atob(characteristic.value);
          if (value === 'PAY_SUCCESS') {
            setPaymentStatus('success');
          }
        }
      );
    } catch (error) {
      console.error('Payment error:', error);
      setPaymentStatus('error');
    }
  };

  return (
    <View>
      <Text>Tap to Pay Status: {paymentStatus}</Text>
      <Button title="Connect" onPress={connectToDevice} />
      <Button title="Pay $2.99" onPress={sendPayment} />
    </View>
  );
};

import React, { useState, useRef } from 'react';

const SERVICE_UUID = "12345678-1234-1234-1234-123456789abc";
const CHARACTERISTIC_UUID = "87654321-4321-4321-4321-cba987654321";

const TaptoPayWebApp = () => {
  const [device, setDevice] = useState(null);
  const [paymentStatus, setPaymentStatus] = useState('disconnected');
  const deviceRef = useRef(null);

  const connectToDevice = async () => {
    try {
      // Check if Web Bluetooth is supported
      if (!navigator.bluetooth) {
        throw new Error('Web Bluetooth is not supported');
      }

      // Request Bluetooth device
      const bluetoothDevice = await navigator.bluetooth.requestDevice({
        filters: [
          { namePrefix: 'Tap to Pay' },
          { services: [SERVICE_UUID] }
        ]
      });

      // Connect to GATT server
      const server = await bluetoothDevice.gatt.connect();
      const service = await server.getPrimaryService(SERVICE_UUID);
      const characteristic = await service.getCharacteristic(CHARACTERISTIC_UUID);

      setDevice({ bluetoothDevice, server, service, characteristic });
      setPaymentStatus('connected');
      deviceRef.current = { bluetoothDevice, server, service, characteristic };

      // Listen for notifications
      await characteristic.startNotifications();
      characteristic.addEventListener('characteristicvaluechanged', handleCharacteristicChanged);

    } catch (error) {
      console.error('Connection error:', error);
      setPaymentStatus('error');
    }
  };

  const handleCharacteristicChanged = (event) => {
    const value = new TextDecoder().decode(event.target.value);
    console.log('Received:', value);

    if (value === 'PAY_SUCCESS') {
      setPaymentStatus('success');
    } else if (value === 'PAY_ERROR') {
      setPaymentStatus('error');
    }
  };

  const sendPayment = async () => {
    if (!deviceRef.current) return;

    try {
      setPaymentStatus('processing');

      const encoder = new TextEncoder();
      const data = encoder.encode('PAY_REQUEST');

      await deviceRef.current.characteristic.writeValue(data);

      // Timeout after 10 seconds
      setTimeout(() => {
        if (paymentStatus === 'processing') {
          setPaymentStatus('timeout');
        }
      }, 10000);

    } catch (error) {
      console.error('Payment error:', error);
      setPaymentStatus('error');
    }
  };

  const disconnect = async () => {
    if (deviceRef.current) {
      await deviceRef.current.server.disconnect();
      setDevice(null);
      setPaymentStatus('disconnected');
      deviceRef.current = null;
    }
  };

  return (
    <div className="min-h-screen bg-gray-900 text-white p-8">
      <div className="max-w-md mx-auto">
        <h1 className="text-2xl font-bold mb-6">Tap to Pay Web App</h1>

        <div className="bg-gray-800 rounded-lg p-4 mb-4">
          <p className="text-sm text-gray-400 mb-2">Status:</p>
          <p className={`text-lg font-semibold ${
            paymentStatus === 'connected' ? 'text-green-400' :
            paymentStatus === 'processing' ? 'text-yellow-400' :
            paymentStatus === 'success' ? 'text-green-500' :
            paymentStatus === 'error' ? 'text-red-400' :
            'text-gray-300'
          }`}>
            {paymentStatus.charAt(0).toUpperCase() + paymentStatus.slice(1)}
          </p>
        </div>

        <div className="space-y-4">
          {paymentStatus === 'disconnected' && (
            <button
              onClick={connectToDevice}
              className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition-colors"
            >
              Connect to Device
            </button>
          )}

          {paymentStatus === 'connected' && (
            <button
              onClick={sendPayment}
              className="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-4 rounded-lg transition-colors"
            >
              Pay $2.99
            </button>
          )}

          {paymentStatus === 'processing' && (
            <div className="text-center">
              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
              <p>Processing payment...</p>
            </div>
          )}

          {paymentStatus === 'success' && (
            <div className="text-center text-green-400">
              <p className="text-2xl mb-2">✓</p>
              <p>Payment Successful!</p>
            </div>
          )}

          {device && (
            <button
              onClick={disconnect}
              className="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition-colors"
            >
              Disconnect
            </button>
          )}
        </div>
      </div>
    </div>
  );
};

export default TaptoPayWebApp;