7
votes

Boutons de paiement à rayures multiples sur une page de Rails 4 app

Je construit une page de paiement qui répertorie trois options d'abonnement différentes et utilise la commande de Stripe pour gérer les paiements.

La page se rend correctement et toutes les 3 options d'abonnement ont le bouton "Acheter maintenant" qui devrait être Lié à Stripe.

Mon problème est que le premier bouton est le seul qui tire correctement le flux de vérification des rayures. Boutons 2 et 3 jetez l'erreur suivante:

Action inconnue L'action «index» n'a pas pu être trouvée pour ChargesController

La partie pertinente de ma page de paiement est la suivante: xxx

idées sur pourquoi seulement l'un des 3 Les boutons fonctionnent correctement?

merci!

javascript stripe-payments ruby-on-rails ruby-on-rails-4

0 commentaires

4 Réponses :

3
votes

Je suis tombé sur le même problème dans ma propre application récemment.

Tous les trois boutons ont le même ID.

3 commentaires

Tu l'as eu! Je l'ai changé pour rechercher une classe (VS ID) et le problème a été résolu. Merci pour l'aide.

Merci. Seulement pour voir la réponse, j'ai résolu l'erreur du même genre.

Avez-vous rencontré des problèmes avec les iframes produits tous ayant le même nom, et les clients sélectionnent toujours le même produit (même s'ils pensent qu'ils ont acheté un autre)?

4
votes

Vous pouvez l'obtenir de pouvoir fonctionner en ayant des identifiants de boutons uniques, par ex.

<%= form_tag charges_path, id: 'stripe-payment-form' do %>
  <%= hidden_field_tag 'amount', nil, id: 'payment_amount' %>
  <%= hidden_field_tag 'name', nil, id: 'payment_name' %>
  <%= hidden_field_tag 'days', nil, id: 'payment_days'  %>

  <% Pricing.all.each do |pricing| %>
    <p>
      <button id="<%= dom_id(pricing, 'btn') %>">
        Buy <%= pricing.name %> for <%= number_to_currency(pricing.pounds, unit: 'Â£') %>
      </button>
    </p>
  <% end %>

  <%= javascript_tag do %>
    var handler = StripeCheckout.configure({
      key: "<%= Rails.configuration.stripe[:publishable_key] %>",
      image: "<%= image_path('/images/apple-icons/apple-touch-icon-144x144-precomposed.png') %>",
      token: function(token, args) {
        var form = $('#stripe-payment-form');
        // Use the token to create the charge with a server-side script.
        // You can access the token ID with `token.id`
        form.append($('<input type="hidden" name="stripeToken" />').val(token.id));
        form.submit();
      }
    });

    <% Pricing.all.each do |pricing| %>
      document.getElementById('<%= dom_id(pricing, 'btn') %>').addEventListener('click', function(e) {
        e.preventDefault();
        var form = $('#stripe-payment-form');
        // set the price etc for the button clicked
        $('#payment_amount').val("<%= pricing.pence %>");
        $('#payment_name').val("<%= pricing.name %>");
        $('#payment_days').val("<%= pricing.days %>");
        // Open Checkout with further options
        handler.open({
          name: 'Company name',
          currency: 'GBP',
          description: '<%= pricing.name %>',
          amount: '<%= pricing.pence %>',
          email: '<%= member.email %>',
        });
      });
    <% end %>
  <% end %>
<% end %>

0 commentaires

0
votes

J'ai récemment rencontré ce problème et je voulais laisser une solution alternative. Dans notre application, nous avons deux boutons de la page à l'aide de Stripe.js: "Acheter l'élément" ou "Abonnement Pro". Cette méthode utilise JQuery pour supprimer simplement le deuxième bouton du DOM lorsque le premier est cliqué. Si l'utilisateur annule le paiement, le bouton est rendu dans le DOM. C'est ainsi que le gestionnaire pourrait regarder:

$('#firstButton').on('click', function() {
  $('#secondButton').html(""); // Remove the second stripe script from the dom

  handler.open({
    // handler stuff
    closed: function(){
      $('#secondButton').html('<%= j render partial: "second_button" %>'); // Renders button back to the DOM if payment is cancelled. 
      }
  });
});

0 commentaires

1
votes

Je sais que c'est vieux, mais j'ai résolu ce problème en modifiant le nom des variables de gestionnaire (chacun doit avoir un nom différent) au lieu de changer l'identifiant HTML.

0 commentaires