Javascript &引用；zoid销毁了所有错误“；从paypal与ruby on rails的集成_Javascript_Ruby On Rails_Paypal

Javascript &引用；zoid销毁了所有错误“；从paypal与ruby on rails的集成

javascript ruby-on-rails paypal

Javascript &引用；zoid销毁了所有错误“；从paypal与ruby on rails的集成,javascript,ruby-on-rails,paypal,Javascript,Ruby On Rails,Paypal,我得到一个错误，当paypal按钮试图加载到我的RubyonRails项目时，zoid销毁了所有的东西。当我最初直接将项目加载到付款页面时，按钮起作用，但每当我离开该页面并返回时，我都会收到错误。经过一些研究，它似乎来自paypal使用的一个名为krakenjs的javascript库。我已经读到，多次加载paypal库可能会有问题，这可以解释为什么它第一次工作，但之后就不行了。如果您有任何见解，我将不胜感激 application.html.erb-标题中包含paypal javascript

我得到一个错误，当paypal按钮试图加载到我的RubyonRails项目时，zoid销毁了所有的东西。当我最初直接将项目加载到付款页面时，按钮起作用，但每当我离开该页面并返回时，我都会收到错误。经过一些研究，它似乎来自paypal使用的一个名为krakenjs的javascript库。我已经读到，多次加载paypal库可能会有问题，这可以解释为什么它第一次工作，但之后就不行了。如果您有任何见解，我将不胜感激

application.html.erb-标题中包含paypal javascript库

<!DOCTYPE html>
<html>
  <head>
    <title>Sweepstakes</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= stripe_javascript_tag %>

    <div class = "navbar">
      <ul>
        <li><%= link_to "Home", root_path %></li>
        <li><%= link_to "Contributions", orders_path %></li>
        <% if user_signed_in? %>
          <li class = "profile-drpdwn">
            <a href="javascript:void(0)" class="dropbtn"><%= current_user.email %></a>
            <div class="dropdown-content">
              <%= link_to 'Edit profile', edit_user_registration_path, :class => 'navbar-link' %>
              <%= link_to "Logout", destroy_user_session_path, method: :delete, :class => 'navbar-link'  %>
            </div>
          </li>
        <% else %>
          <li id = "navbar" class = "navbar-fr"><%= link_to "Sign up", new_user_registration_path, :class => 'navbar-link'  %></li>
          <li id = "navbar" class = "navbar-fr"><%= link_to "Login", new_user_session_path, :class => 'navbar-link'  %></li>
        <% end %>
      </ul>
    </div>

    <script src="https://www.paypal.com/sdk/js?client-id=<%=ENV['PAYPAL_CLIENT_ID']%>&components=buttons"></script>
  </head>

  <% if notice %>
    <p class="alert alert-success"><%= notice %></p>
  <% end %>
  <% if alert %>
    <p class="alert alert-danger"><%= alert %></p>
  <% end %>

  <body>
    <%= yield %>
  </body>
</html>


抽奖




'导航栏链接'%>
'导航栏链接'%>

导航栏链接“%”
导航栏链接“%”

显示paypal按钮的订单页面的index.html.erb

<div class = "formdiv">
  <h1>Contribution Options</h1>
  <%= form_tag({:controller => "orders", :action => "submit" }, {:id => 'order-details'}) do %>
    <input id="order-type" name="orders[payment_gateway]" type="hidden" value="stripe">
    <div class="form_row">
        <h4>Charges/Payments</h4>
        <% @contributions_purchase.each do |contribution| %>
          <div data-charges-and-payments-section = true>
          <%= radio_button_tag 'orders[contribution_id]', contribution.id, @contributions_purchase.first == contribution %>
          <span id="radioButtonName<%= contribution.id %>"><%= contribution.name %></span>
          <span data-price="<%= contribution.price_cents %>" id="radioButtonPrice<%= contribution.id %>"><%= number_to_currency(contribution.price) %></span>
          </div>
          <br>
        <% end %>
        <h4>Subscriptions</h4>
        <% @contributions_subscription.each do |contribution| %>
          <div>
            <%= radio_button_tag 'orders[contribution_id]', contribution.id, false %>
            <span id="radioButtonName<%= contribution.id %>"><%= contribution.name %></span>
            <span data-price="<%= contribution.price_cents %>" id="radioButtonPrice<%= contribution.id %>"><%= number_to_currency(contribution.price) %></span>
          </div>
          <br/>
        <% end %>
    </div>
    <hr>
    <keep-alive>
    <h1>Payment Method</h1>
    <div class="form_row">
      <div>
        <%= radio_button_tag 'payment-selection', 'stripe', true, onclick: "changeTab();" %>
        <span>Stripe</span>
      </div>
      <br/>
      <div>
        <%= radio_button_tag 'payment-selection', 'paypal', false, onclick: "changeTab();" %>
        <span>Paypal</span>
      </div>
    </div>
    <br/>
    <br/>
    <div class="paymentSelectionTab active" id="tab-stripe">
      <div id="card-element"></div>
      <div id="card-errors" role="alert"></div>
      <br/>
      <br/>
      <%= submit_tag "Submit", id: "submit-stripe" %>
    </div>
    <div class="paymentSelectionTab" id="tab-paypal">
      <div id="submit-paypal"></div>
    </div>
    </keep-alive>
    <br>
    <br>
  <% end %>
</div>

<script>
  try {
    console.log("script working")
    function changeTab() {
      console.log("changeTab working")
      var newActiveTabID = $('input[name="payment-selection"]:checked').val();
      $('.paymentSelectionTab').removeClass('active');
      $('#tab-' + newActiveTabID).addClass('active');
    }

    function setupStripe() {
      console.log("setupStripe working")
      //Initialize stripe with publishable key
      // {ENV['STRIPE_PUBLISHABLE_KEY']}
      var stripe = Stripe("<%= ENV['STRIPE_PUBLISHABLE_KEY'] %>");

      //Create Stripe credit card elements.
      var elements = stripe.elements();
      var card = elements.create('card');

      //Add a listener in order to check if
      card.addEventListener('change', function(event) {
        console.log("event listener working")
        //the div card-errors contains error details if any
        var displayError = document.getElementById('card-errors');
        document.getElementById('submit-stripe').disabled = false;
        if (event.error) {
          console.log("card error")
          // Display error
          displayError.textContent = event.error.message;
        } else {
          console.log("No card error")
          // Clear error
          displayError.textContent = '';
        }
      });

      // Mount Stripe card element in the #card-element div.
      card.mount('#card-element');
      var form = document.getElementById('order-details');
      // This will be called when the #submit-stripe button is clicked by the user.
      form.addEventListener('submit', function(event) {
        console.log("Submit event lister added")
        $('#submit-stripe').prop('disabled', true);
        event.preventDefault();
        stripe.createToken(card).then(function(result) {
          if (result.error) {
            console.log("error on button press")
            // Inform that there was an error.
            var errorElement = document.getElementById('card-errors');
            errorElement.textContent = result.error.message;
          } else {
            console.log("no error on button press")
            // Now we submit the form. We also add a hidden input storing 
            // the token. So our back-end can consume it.
            var $form = $("#order-details");
            // Add a hidden input orders[token]
            $form.append($('<input type="hidden" name="orders[token]"/>').val(result.token.id));
            // Set order type
            $('#order-type').val('stripe');
            $form.submit();
          }
        });
        return false;
      });
    };

    function setupPaypal() {
      console.log("setupPaypal working")
      function isPayment() {
        console.log("isPayment")
        return $('[data-charges-and-payments-section] input[name="orders[contribution_id]"]:checked').length
      }

      function submitOrderPaypal(chargeID) {
        var $form = $("#order-details");
        // Add a hidden input orders[charge_id]
        console.log("check 1")
        console.log(chargeID)
        console.log("Check 2")
        $form.append($('<input type="hidden" name="orders[charge_id]"/>').val(chargeID));
        // Set order type
        $('#order-type').val('paypal');
        $form.submit();
      }

      paypal.Buttons({
        env: "<%= ENV['PAYPAL_ENV'] %>",
        createOrder: function() {
          $('#order-type').val("paypal");
          if (isPayment()) {
            console.log("if isPayment")
            return $.post("<%= paypal_create_payment_url %>", $('#order-details').serialize()).then(function(data) {
              return data.token;
            });
          } else {
            console.log("else isPayment")
          }
        },
        onApprove: function(data) {
          if (isPayment()) {
            console.log("onApprove")
            return $.post("<%= paypal_execute_payment_url %>", {
              paymentID: data.paymentID,
              payerID:   data.payerID
            }).then(function() {
              console.log(data.paymentID)
              submitOrderPaypal(data.paymentID)
            });
          } else {
            console.log("else")
          }
        return buttonComp
        }
      }).render('#submit-paypal');
    };
    setupStripe()
    setupPaypal()
  } catch(err){
    console.log(err)
  }
</script>


供款选择
“订单”，：action=>“submit”}，{:id=>“订单详细信息”}）do%>
收费/付款


订阅



付款方式
条纹


贝宝












试一试{
日志（“脚本工作”）
函数changeTab（）{
console.log（“changeTab工作”）
var newActiveTabID=$（'input[name=“payment selection”]：checked'）.val（）；
$（'.paymentSelectionTab'）.removeClass（'active'）；
$（'#tab-'+newActiveTabID）.addClass（'active'）；
}
函数setupStripe（）{
console.log（“设置条带工作”）
//使用可发布密钥初始化条带
//{ENV['STRIPE\u publishible\u KEY']}
var stripe=stripe（“”）；
//创建条纹信用卡元素。
var elements=stripe.elements（）；
var card=elements.create（'card'）；
//添加一个侦听器以检查
card.addEventListener（'change'，函数（事件）{
日志（“事件侦听器工作”）
//div卡错误包含错误详细信息（如果有）
var displayError=document.getElementById（'card-errors'）；
document.getElementById（'submit-stripe'）。disabled=false；
if（event.error）{
控制台日志（“卡错误”）
//显示错误
displayError.textContent=event.error.message；
}否则{
console.log（“无卡错误”）
//明显错误
displayError.textContent=''；
}
});
//在#卡元素分区中安装条纹卡元素。
卡。挂载（“#卡元素”）；
var form=document.getElementById（'order-details'）；
//当用户单击#提交条带按钮时，将调用此命令。
表单.addEventListener（'submit'，函数（事件）{
日志（“添加了提交事件列表器”）
$（“#提交条带”）.prop（'disabled'，true）；
event.preventDefault（）；
stripe.createToken（卡片）.then（函数（结果）{
if（result.error）{
console.log（“按下按钮时出错”）
//通知有错误。
var errorElement=document.getElementById（'card-errors'）；
errorElement.textContent=result.error.message；
}否则{
console.log（“按下按钮时无错误”）
//现在我们提交表单。我们还添加了一个隐藏的输入存储
//令牌。这样我们的后端就可以使用它了。
var$form=$（“#订单详细信息”）；
//添加隐藏的输入命令[令牌]
$form.append（$（''）.val（result.token.id））；
//设置订单类型
$（“#订单类型”）.val（'stripe'）；
$form.submit（）；
}
});
返回false；
});
};
函数setupPaypal（）{
console.log（“setupPaypal工作”）
函数i支付（）{
控制台日志（“iPayment”）
return$（'[data charges and payments section]input[name=“orders[contribution_id]”]：checked'）。长度
}
功能提交人PayPal（chargeID）{
var$form=$（“#订单详细信息”）；
//添加隐藏的输入订单[charge\u id]
控制台日志（“检查1”）
console.log（chargeID）
控制台日志（“检查2”）
$form.append（$（''）.val（chargeID））；
//设置订单类型
$（“#订单类型”）.val（'paypal'）；
$form.submit（）；
}
贝宝，按钮({
环境：“，
createOrder:function（）{
$（“#订单类型”）.val（“贝宝”）；
如果（iPayment（））{
console.log（“如果支付”）
返回$.post（“，$（'#订单详细信息'）.serialize（））。然后返回（函数（数据）{
返回data.token；
});
}否则{
console.log（“else isPayment”）
}
},
onApprove:函数（数据）{
如果（iPayment（））{
控制台日志（“onApprove”）
返回$.post（“{
paymentID:data.paymentID，
payerID:data.payerID
}).然后（函数（）{
console.log（data.paymentID）
submitOrderPaypal（data.paymentID）
});
}否则{
console.log（“else”）
}
返回按钮按钮
}
}).render（“#提交贝宝”）；
};
塞普斯特里
<a href="[paypal_page]" data-turbolinks="false">