aperonight/app/views/orders/checkout.html.erb

<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8">
  <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Breadcrumb -->
    <nav class="flex mb-6" aria-label="Breadcrumb">
      <ol class="inline-flex items-center space-x-1 md:space-x-2 rounded-lg bg-white px-4 py-2 shadow-sm">
        <li class="inline-flex items-center">
          <%= link_to "Accueil", root_path, class: "inline-flex items-center text-sm font-medium text-gray-700 hover:text-purple-600" %>
        </li>
        <li>
          <div class="flex items-center">
            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
            </svg>
            <%= link_to "Événements", events_path, class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
          </div>
        </li>
        <li>
          <div class="flex items-center">
            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
            </svg>
            <%= link_to @order.event.name, event_path(@order.event.slug, @order.event), class: "ml-1 text-sm font-medium text-gray-700 hover:text-purple-600 md:ml-2" %>
          </div>
        </li>
        <li>
          <div class="flex items-center">
            <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
              <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
            </svg>
            <span class="ml-1 text-sm font-medium text-purple-600 md:ml-2">Commande #<%= @order.id %></span>
          </div>
        </li>
      </ol>
    </nav>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- Order Summary -->
      <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit">
        <!-- Warning for expiring order -->
        <% if @expiring_soon %>
          <div class="mb-6 bg-orange-50 border border-orange-200 rounded-lg p-4">
            <div class="flex items-start">
              <svg class="w-5 h-5 text-orange-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              <div>
                <h3 class="font-medium text-orange-800 mb-1">Attention - Commande bientôt expirée</h3>
                <p class="text-orange-700 text-sm">Votre commande va expirer dans quelques minutes. Veuillez procéder rapidement au paiement pour éviter son expiration automatique.</p>
              </div>
            </div>
          </div>
        <% end %>

        <!-- Payment attempts warning -->
        <% if @order.payment_attempts > 0 %>
          <div class="mb-6 bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div class="flex items-start">
              <svg class="w-5 h-5 text-blue-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              <div>
                <h3 class="font-medium text-blue-800 mb-1">Nouvelle tentative de paiement</h3>
                <p class="text-blue-700 text-sm">
                  Tentative <%= @order.payment_attempts + 1 %> sur <%= @order.class::MAX_PAYMENT_ATTEMPTS %>. 
                  <% if @order.payment_attempts >= @order.class::MAX_PAYMENT_ATTEMPTS - 1 %>
                    <strong>Dernière tentative avant expiration !</strong>
                  <% end %>
                </p>
              </div>
            </div>
          </div>
        <% end %>

        <div class="border-b border-gray-200 pb-6 mb-6">
          <h1 class="text-2xl font-bold text-gray-900 mb-2">Commande pour <%= @order.event.name %></h1>
          <div class="flex items-center text-sm text-gray-600 space-x-4">
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              <% if @order.expires_at %>
                Expire dans <%= time_ago_in_words(@order.expires_at, include_seconds: true) %>
              <% end %>
            </div>
            <div class="flex items-center">
              <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
              </svg>
              Commande #<%= @order.id %>
            </div>
          </div>
        </div>

        <!-- Order Items -->
        <div class="space-y-4 mb-6">
          <h3 class="text-lg font-semibold text-gray-900 mb-4">Récapitulatif de votre commande</h3>
          
          <% @tickets.each do |ticket| %>
            <div class="flex items-center justify-between py-3 border-b border-gray-100 last:border-b-0">
              <div class="flex-1 min-w-0">
                <h4 class="text-sm font-medium text-gray-900 truncate"><%= ticket.ticket_type.name %></h4>
                <div class="flex items-center text-xs text-gray-500 mt-1">
                  <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
                  </svg>
                  <%= ticket.first_name %> <%= ticket.last_name %>
                </div>
              </div>
              <div class="text-right">
                <div class="text-lg font-semibold text-gray-900"><%= ticket.price_euros %>€</div>
                <% if ticket.ticket_type.description.present? %>
                  <div class="text-xs text-gray-500"><%= truncate(ticket.ticket_type.description, length: 30) %></div>
                <% end %>
              </div>
            </div>
          <% end %>
        </div>

        <!-- Order Total -->
        <div class="border-t border-gray-200 pt-6">
          <div class="flex items-center justify-between text-lg">
            <span class="font-medium text-gray-900">Total</span>
            <span class="font-bold text-2xl text-purple-600"><%= @order.total_amount_euros %>€</span>
          </div>
          <p class="text-xs text-gray-500 mt-2">TVA incluse</p>
        </div>
      </div>

      <!-- Payment Section -->
      <div class="bg-white rounded-2xl shadow-xl p-6 md:p-8 h-fit">
        <div class="border-b border-gray-200 pb-6 mb-6">
          <h2 class="text-xl font-bold text-gray-900 mb-2">Paiement sécurisé</h2>
          <p class="text-sm text-gray-600">Procédez au paiement pour finaliser votre commande</p>
        </div>

        <% if @checkout_session.present? %>
          <!-- Stripe Checkout -->
          <div class="space-y-6">
            <div class="bg-gradient-to-r from-purple-50 to-pink-50 rounded-lg p-4 border border-purple-200">
              <div class="flex items-start">
                <svg class="w-5 h-5 text-purple-600 mr-2 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                </svg>
                <div>
                  <h3 class="font-medium text-purple-800 mb-1">Paiement 100% sécurisé</h3>
                  <p class="text-purple-700 text-sm">Vos données bancaires sont protégées par le cryptage SSL et traitées par Stripe, leader mondial du paiement en ligne.</p>
                </div>
              </div>
            </div>

            <button 
              id="checkout-button" 
              class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-4 px-6 rounded-xl transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-lg hover:shadow-xl"
            >
              <div class="flex items-center justify-center">
                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                </svg>
                Payer <%= @order.total_amount_euros %>€
              </div>
            </button>

            <div class="flex items-center justify-center space-x-4 text-xs text-gray-500">
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                </svg>
                Visa
              </span>
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                </svg>
                Mastercard
              </span>
              <span class="flex items-center">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
                </svg>
                Sécurisé par Stripe
              </span>
            </div>

            <script src="https://js.stripe.com/v3/"></script>
            <script>
              // Wait for Stripe library to load and DOM to be ready
              function initializeStripeCheckout() {
                if (typeof Stripe === 'undefined') {
                  console.log('Waiting for Stripe library to load...');
                  setTimeout(initializeStripeCheckout, 100);
                  return;
                }

                console.log('Initializing Stripe with publishable key:', '<%= Rails.application.config.stripe[:publishable_key] %>');
                const stripe = Stripe('<%= Rails.application.config.stripe[:publishable_key] %>');
                
                const checkoutButton = document.getElementById('checkout-button');
                if (!checkoutButton) {
                  console.error('Checkout button not found');
                  return;
                }

                checkoutButton.addEventListener('click', async function() {
                console.log('Checkout button clicked');
                const button = this;
                button.disabled = true;
                button.innerHTML = `
                  <div class="flex items-center justify-center">
                    <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    Initialisation du paiement...
                  </div>
                `;

                try {
                  // Increment payment attempt counter
                  console.log('Incrementing payment attempt for order:', '<%= @order.id %>');
                  const response = await fetch('<%= increment_payment_attempt_order_path(@order) %>', {
                    method: 'POST',
                    headers: {
                      'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                      'Content-Type': 'application/json'
                    }
                  });

                  if (!response.ok) {
                    console.error('Payment attempt increment failed:', response.status, response.statusText);
                    throw new Error('Failed to increment payment attempt');
                  }

                  console.log('Payment attempt incremented successfully');

                  // Update button text for redirect
                  button.innerHTML = `
                    <div class="flex items-center justify-center">
                      <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                      </svg>
                      Redirection vers le paiement...
                    </div>
                  `;
                  
                  // Redirect to Stripe
                  console.log('Redirecting to Stripe with session ID:', '<%= @checkout_session&.id %>');
                  const stripeResult = await stripe.redirectToCheckout({
                    sessionId: '<%= @checkout_session.id %>'
                  });

                  if (stripeResult.error) {
                    throw new Error(stripeResult.error.message);
                  }

                } catch (error) {
                  console.error('Checkout error:', error);
                  // Reset button on error
                  button.disabled = false;
                  button.innerHTML = `
                    <div class="flex items-center justify-center">
                      <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
                      </svg>
                      Payer <%= @order.total_amount_euros %>€
                    </div>
                  `;
                  alert('Erreur: ' + error.message);
                }
                });
              }

              // Initialize when DOM is ready
              if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initializeStripeCheckout);
              } else {
                initializeStripeCheckout();
              }
            </script>
          </div>
        <% else %>
          <!-- No Stripe Configuration -->
          <div class="text-center py-8">
            <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-6">
              <svg class="w-12 h-12 text-yellow-600 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
              </svg>
              <h3 class="font-semibold text-yellow-800 mb-2">Paiement temporairement indisponible</h3>
              <p class="text-yellow-700 text-sm">Le système de paiement n'est pas encore configuré. Veuillez contacter l'organisateur pour plus d'informations.</p>
            </div>
          </div>
        <% end %>

        <!-- Order Actions -->
        <div class="border-t border-gray-200 pt-6 mt-6">
          <div class="space-y-3">
            <%= link_to event_path(@order.event.slug, @order.event), class: "block w-full text-center py-3 px-4 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors" do %>
              <div class="flex items-center justify-center">
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
                </svg>
                Retour à l'événement
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>