- casasyaptos.com

<!-- Reemplaza el botón "okfli-pay-button" y el script al final del código anterior -->

<!-- Botón de Pagar actualizado -->
<button type="submit" class="okfli-pay-button" id="stripe-pay-button">Pagar con Tarjeta o PSE</button>

<!-- Script de Stripe para procesar el pago -->
<script src="https://js.stripe.com/v3/"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // TU CLAVE PÚBLICA DE STRIPE (REEMPLÁZALA)
    // Consíguela en tu dashboard de Stripe > Developers > API keys
    const stripe = Stripe('pk_test_XXXXXXXXXXXXXXXXXXXXXXXX'); // <-- ¡IMPORTANTE! Reemplaza esta clave

    const payButton = document.getElementById('stripe-pay-button');

    payButton.addEventListener('click', async () => {
      // Desactivamos el botón para evitar múltiples clics
      payButton.disabled = true;
      payButton.textContent = 'Procesando...';

      try {
        // 1. Creamos la sesión de pago en tu servidor (o con un link estático)
        //    Para empezar, usaremos un link estático. Luego te mostraré cómo hacerlo dinámico.
        //    Este es un link de ejemplo que debes crear en tu dashboard de Stripe.
        const checkoutSessionUrl = 'https://buy.stripe.com/test_aEU28Qa8A2dY8dY4gg'; // <-- ¡IMPORTANTE! Reemplaza este link

        // 2. Redirigimos al cliente al checkout de Stripe
        window.location.href = checkoutSessionUrl;

      } catch (error) {
        console.error('Error al redirigir a Stripe:', error);
        alert('Ocurrió un error. Por favor, intenta de nuevo.');
        payButton.disabled = false;
        payButton.textContent = 'Pagar con Tarjeta o PSE';
      }
    });
  });
</script>