Formulaire de vérification de la bande - Index des formulaires sur la page - Ruby on Rails

Question

Après avoir joué avec mon code tout en étant un peu trop fatigué, j'ai effacé accidentellement un formulaire de caisse fonctionnant parfaitement sur ma page d'index de facture. Après avoir reconstitué les pièces, j'ai l'impression d'être bloqué par un problème que je n'avais pas auparavant ...

J'ai un index des factures de l'utilisateur qui liste chaque facture dans une boucle et propose, entre autres, une option pour l'utilisateur de payer la facture sur la page d'index en utilisant le formulaire de paiement popup Stripe Checkout.

<% @user.invoices.where(payment_status: false).find_each do |invoice| %> 

     <div class="col-sm-3 text-center"> 
      <p>Details</p> 
      <%= link_to "View Details", invoice_path(invoice,user_id: current_user.id) %> 
      <%= form_tag invoice_pay_path(invoice), method: :patch, value: 1 do %> 
      <%=link_to "Pay Invoice", '#', class:"btn btn-success pay_button"%> 
      <% end%> 
     </div> 

J'ai utilisé le script en ligne de manière à pouvoir utiliser la variable de la facture de la boucle:

<script> 
var handler = StripeCheckout.configure({ 
key: $('meta[name="stripe-key"]').attr('content'), 
image: "<%= image_path "half logo.png"%>", 
locale: 'auto', 
token: function(token) { 
    // You can access the token ID with `token.id`. 
    // Get the token ID to your server-side code for use. 
    var token = token.id; 
    //Inject the card token in a hidden field. 
    theForm.append($('<input type="hidden" name="stripe_card_token">').val(token)); 
    //Submit form to our Rails app. 
    theForm.get(0).submit(); 
} 
}); 

$('.pay_button').click(function(e) { 

var theForm = $(this).closest('form'); 

// Open Checkout with further options: 
handler.open({ 
    name: 'Fullstack Solutions', 
    description: 'Invoice for Services', 
    zipCode: false, 
    currency: 'aud', 
    amount: <%=invoice.total_amount*100%>, 
    email: "<%=current_user.email%>" 
}); 
e.preventDefault(); 
}); 

// Close Checkout on page navigation: 
window.addEventListener('popstate', function() { 
handler.close(); 
}); 

</script> 

La clé ici est que des besoins variables theForm à définir uniquement après le clic événement car il existe plusieurs formulaires sur la page (index des factures). Après l'événement click, le formulaire est défini par le formulaire parent du bouton sur lequel vous avez cliqué.

Cela a bien fonctionné la nuit dernière mais maintenant le formulaire n'est pas défini lorsque la fonction de jeton s'exécute.

Je suis sûr que ce soit un simple problème et je suis super frustré car il fonctionnait parfaitement ...

Answer 1

J'ai fini de définir theForm comme une variable globale dans le script (qui peut être une mauvaise pratique, mais il a simplifié le jQuery de manière significative). Code final est:

<script> 

var theForm; 
var handler = StripeCheckout.configure({ 
key: $('meta[name="stripe-key"]').attr('content'), 
image: "<%= image_path "half logo.png"%>", 
locale: 'auto', 
token: function(token) { 
    // You can access the token ID with `token.id`. 
    // Get the token ID to your server-side code for use. 

    var token = token.id; 
    //Inject the card token in a hidden field. 
    theForm.append($('<input type="hidden" name="stripe_card_token">').val(token)); 
    //Submit form to our Rails app. 
    theForm.get(0).submit(); 

} 
}); 

$('.pay_button').click(function(e) { 


theForm = $(this).closest('form'); 

// Open Checkout with further options: 
handler.open({ 
    name: 'Fullstack Solutions', 
    description: 'Invoice for Services', 
    zipCode: false, 
    currency: 'aud', 
    amount: <%=invoice.total_amount*100%>, 
    email: "<%=current_user.email%>" 
}); 


e.preventDefault(); 


}); 
// Close Checkout on page navigation: 
window.addEventListener('popstate', function() { 
handler.close(); 
});