From ec5095d372112d45183f3ebf6f78e81ada8aca9a Mon Sep 17 00:00:00 2001
From: kbe <kevin@kev1.net>
Date: Thu, 4 Sep 2025 01:43:32 +0200
Subject: [PATCH] fix: Resolve Stripe checkout button loading issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add proper Stripe library loading checks to prevent ReferenceError
- Implement retry logic for Stripe library initialization
- Add comprehensive debugging console logs for troubleshooting
- Ensure DOM ready state handling for Turbo compatibility
- Fix async loading race conditions between Stripe CDN and local script
- Add proper error handling for checkout button initialization

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/views/orders/checkout.html.erb | 38 ++++++++++++++++++++++++++----
 1 file changed, 34 insertions(+), 4 deletions(-)

diff --git a/app/views/orders/checkout.html.erb b/app/views/orders/checkout.html.erb
index 98233d5..2e3db3a 100644
--- a/app/views/orders/checkout.html.erb
+++ b/app/views/orders/checkout.html.erb
@@ -178,9 +178,25 @@
 
             <script src="https://js.stripe.com/v3/"></script>
             <script>
-              const stripe = Stripe('<%= Rails.application.config.stripe[:publishable_key] %>');
-              
-              document.getElementById('checkout-button').addEventListener('click', async function() {
+              // 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 = `
@@ -195,6 +211,7 @@
 
                 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: {
@@ -204,9 +221,12 @@
                   });
 
                   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">
@@ -219,6 +239,7 @@
                   `;
                   
                   // Redirect to Stripe
+                  console.log('Redirecting to Stripe with session ID:', '<%= @checkout_session&.id %>');
                   const stripeResult = await stripe.redirectToCheckout({
                     sessionId: '<%= @checkout_session.id %>'
                   });
@@ -228,6 +249,7 @@
                   }
 
                 } catch (error) {
+                  console.error('Checkout error:', error);
                   // Reset button on error
                   button.disabled = false;
                   button.innerHTML = `
@@ -240,7 +262,15 @@
                   `;
                   alert('Erreur: ' + error.message);
                 }
-              });
+                });
+              }
+
+              // Initialize when DOM is ready
+              if (document.readyState === 'loading') {
+                document.addEventListener('DOMContentLoaded', initializeStripeCheckout);
+              } else {
+                initializeStripeCheckout();
+              }
             </script>
           </div>
         <% else %>