Cross-Wallet Tap-to-Pay

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { PaymentFlowManager, CustomerFlowData } from '@taprails/tap-to-pay';

export function CustomerPayScreen() {
  const [isPaying, setIsPaying] = useState(false);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tap & Pay at Checkout</Text>
      
      <TouchableOpacity 
        style={styles.payButton} 
        onPress={() => setIsPaying(true)}
      >
        <Text style={styles.buttonText}>Tap to Pay</Text>
      </TouchableOpacity>

      {isPaying && (
        <PaymentFlowManager
          config={{
            type: 'customer',
            onComplete: (data) => {
              const { processedPayment } = data as CustomerFlowData;
              console.log('Payment Successful!', processedPayment?.transactionId);
              setIsPaying(false);
            },
            onCancel: () => {
              console.log('User cancelled tap-to-pay');
              setIsPaying(false);
            },
            onError: (error) => {
              console.error('Payment Error:', error.message);
              setIsPaying(false);
            },
          }}
          onCustomerCancel={() => setIsPaying(false)}
        />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 22, fontWeight: 'bold', marginBottom: 20 },
  payButton: { backgroundColor: '#7C3AED', paddingVertical: 16, paddingHorizontal: 32, borderRadius: 12 },
  buttonText: { color: '#FFF', fontSize: 18, fontWeight: '600' },
});

import React from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';
import { useNFCCustomer } from '@taprails/tap-to-pay';

export function CustomTapScreen() {
  const {
    scanPaymentRequest,
    processPaymentRequest,
    isReading,
    isProcessing,
    paymentRequest,
    processedPayment,
    error,
    clearPayment,
  } = useNFCCustomer();

  const handleStartScan = async () => {
    // 1. Listen for merchant NFC invoice
    const request = await scanPaymentRequest();
    if (!request) return;

    // 2. Process the payment once scanned
    await processPaymentRequest(request);
  };

  return (
    <View style={{ padding: 24 }}>
      {isReading && <Text>Hold device near the merchant reader...</Text>}
      
      {paymentRequest && (
        <View>
          <Text>Merchant: {paymentRequest.merchantName}</Text>
          <Text>Amount: ${paymentRequest.amount} USDC</Text>
        </View>
      )}

      {isProcessing && <ActivityIndicator size="large" color="#7C3AED" />}

      {processedPayment && (
        <View>
          <Text>Success! Tx: {processedPayment.transactionId}</Text>
          <Button title="Done" onPress={clearPayment} />
        </View>
      )}

      {error && <Text style={{ color: 'red' }}>Error: {error.message}</Text>}

      {!isReading && !paymentRequest && !processedPayment && (
        <Button title="Scan Merchant NFC" onPress={handleStartScan} />
      )}
    </View>
  );
}

import express from 'express';
import crypto from 'crypto';

const app = express();
app.use(express.json());

const WEBHOOK_SECRET = process.env.TAPRAILS_WEBHOOK_SECRET!;

app.post('/webhooks/taprails', (req, res) => {
  const signature = req.headers['x-taprails-signature'] as string;
  
  // Verify webhook signature
  const hmac = crypto
    .createHmac('sha256', WEBHOOK_SECRET)
    .update(JSON.stringify(req.body))
    .digest('hex');

  if (signature !== hmac) {
    return res.status(401).send('Invalid signature');
  }

  const { event, data } = req.body;

  if (event === 'payment.confirmed') {
    console.log(`Payment confirmed: ${data.payment_id}`);
    console.log(`Amount: ${data.amount} ${data.currency}`);
    console.log(`Merchant ID: ${data.merchant_id}`);
    console.log(`Transaction Hash: ${data.tx_hash}`);
    
    // Update internal order / user ledger here
  }

  res.status(200).send({ received: true });
});