Stripe Integration

import { useRef, useState } from 'react';
import { Payout, PayoutRef } from '@adoptaunabuelo/react-components';

export default function PaymentForm() {
  const payoutRef = useRef<PayoutRef>(null);
  const [isLoading, setIsLoading] = useState(false);

  const handleSubmit = async () => {
    const paymentMethod = await payoutRef.current?.getPaymentMethod();
    
    if (paymentMethod) {
      // Send payment method ID to your backend
      console.log('Payment method ID:', paymentMethod.id);
      // Process payment on your backend
    }
  };

  return (
    <div>
      <Payout
        ref={payoutRef}
        stripeKey={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
        paymentOption="card"
        design="primary"
        onLoading={setIsLoading}
        onSetupConfirmed={() => {
          console.log('3D Secure authentication completed');
        }}
      />
      
      <button onClick={handleSubmit} disabled={isLoading}>
        {isLoading ? 'Processing...' : 'Submit Payment'}
      </button>
    </div>
  );
}

import { useRef } from 'react';
import { Payout, PayoutRef } from '@adoptaunabuelo/react-components';

export default function SepaForm() {
  const payoutRef = useRef<PayoutRef>(null);

  const handleSubmit = async () => {
    const paymentMethod = await payoutRef.current?.getPaymentMethod();
    
    if (paymentMethod) {
      // Send to backend for SEPA debit setup
      console.log('SEPA method:', paymentMethod);
    }
  };

  return (
    <div>
      <Payout
        ref={payoutRef}
        stripeKey={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
        paymentOption="sepa_debit"
        design="secondary"
        userData={{
          email: '[email protected]' // Required for SEPA
        }}
        placeholderEmail="Correo electrónico"
        placeholderName="Nombre del titular"
      />
      
      <button onClick={handleSubmit}>
        Add Bank Account
      </button>
    </div>
  );
}

const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);

app.post('/api/create-setup-intent', async (req, res) => {
  try {
    const { paymentMethodId, customerId } = req.body;
    
    // Attach payment method to customer
    await stripe.paymentMethods.attach(paymentMethodId, {
      customer: customerId,
    });
    
    // Create SetupIntent for 3D Secure if needed
    const setupIntent = await stripe.setupIntents.create({
      payment_method: paymentMethodId,
      customer: customerId,
      confirm: true,
      return_url: `${process.env.APP_URL}/payment/complete`,
    });
    
    res.json({
      success: true,
      confirmUrl: setupIntent.next_action?.redirect_to_url?.url,
    });
  } catch (error) {
    res.status(400).json({ error: error.message });
  }
});

import { useRef, useState } from 'react';
import { Payout, PayoutRef } from '@adoptaunabuelo/react-components';

export default function CompletePaymentFlow() {
  const payoutRef = useRef<PayoutRef>(null);
  const [loading, setLoading] = useState(false);
  const [confirmUrl, setConfirmUrl] = useState<string>();
  const [error, setError] = useState<string>();

  const handleSubmit = async () => {
    try {
      setLoading(true);
      setError(undefined);
      
      // Step 1: Get payment method from Stripe
      const paymentMethod = await payoutRef.current?.getPaymentMethod();
      
      if (!paymentMethod) {
        throw new Error('Failed to collect payment method');
      }
      
      // Step 2: Send to backend
      const response = await fetch('/api/create-setup-intent', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          paymentMethodId: paymentMethod.id,
          customerId: 'cus_abc123', // Your Stripe customer ID
        }),
      });
      
      const data = await response.json();
      
      // Step 3: Handle 3D Secure if needed
      if (data.confirmUrl) {
        setConfirmUrl(data.confirmUrl);
      } else {
        // Payment method set up successfully
        console.log('Payment method added!');
      }
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

  return (
    <div>
      <Payout
        ref={payoutRef}
        stripeKey={process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!}
        stripeConfirmUrl={confirmUrl}
        paymentOption="card"
        design="primary"
        error={!!error}
        onLoading={setLoading}
        onSetupConfirmed={() => {
          console.log('3D Secure authentication successful!');
          setConfirmUrl(undefined);
          // Verify on backend that setup is complete
        }}
      />
      
      {error && <p style={{ color: 'red' }}>{error}</p>}
      
      <button onClick={handleSubmit} disabled={loading}>
        {loading ? 'Processing...' : 'Add Payment Method'}
      </button>
    </div>
  );
}

:root {
  --primary-color: #007bff;
}

.StripeElement {
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.StripeElement--focus {
  border-color: var(--primary-color);
}

.StripeElement--invalid {
  border-color: #dc3545;
}