paypal 与 ruby on rails 集成的“zoid 破坏了所有错误”
Posted
技术标签:
【中文标题】paypal 与 ruby on rails 集成的“zoid 破坏了所有错误”【英文标题】："zoid destroyed all error" from paypal integration with ruby on rails 【发布时间】：2020-04-30 19:25:29 【问题描述】：当我的 ruby-on-rails 项目尝试加载贝宝按钮时，我收到一条错误消息，提示 zoid 已全部损坏。当我最初将项目直接加载到付款页面时，按钮可以工作，但每当我离开该页面并返回时，我都会收到错误消息。经过一些研究，它似乎来自贝宝正在使用的一个名为 krakenjs 的 javascript 库。我读过多次加载贝宝库可能会出现问题，这可以解释为什么它第一次工作但之后就不行了。希望有任何见解。
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>
【问题讨论】：
你有没有解决这个问题。我只在 ReactJS 中遇到完全相同的问题 我在 React 中遇到过两次这个问题。第一次是因为 React 在开发模式下的行为：rendering functional components withuseState() twice。所以paypal.Button().render() 被调用了两次。我添加了一个哨兵以确保该按钮只呈现一次。第二次是现在，这就是我在这里寻找解决方案的原因。但是我的代码上周可以工作；我怀疑 PayPal 团队已经破坏了他们的沙盒（我以前也遇到过）。我想明天我会再次测试它，而不是更改以前工作的代码。
【参考方案1】：
我通过关闭指向 paypal 订阅页面的链接的 turbolinks 来解决此问题。因此，将用户带到贝宝页面的链接如下所示：
<a href="[paypal_page]" data-turbolinks="false">
对于一个用户只会访问一次的页面，它已被证明是我们可以接受的解决方法。
【讨论】：
【参考方案2】：确保在 javascript_pack_tag 之前定义 paypal 脚本链接，如下所示：
<!-- Paypal SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=CLIENT_ID&vault=true"></script>
<%= stylesheet_link_tag 'admin', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'admin', 'data-turbolinks-track': 'reload' %>
在您的 application.js 中将 paypal 脚本添加到 turbolinks:load 函数
document.addEventListener("turbolinks:load", () =>
paypal.Buttons(
createSubscription: function(data, actions)
return actions.subscription.create(
'plan_id': 'P-SOME-PLAN-ID'
);
,
onApprove: function(data, actions)
alert('You have successfully created subscription ' + data.subscriptionID);
).render('#paypal-button-container');
);
【讨论】：
以上是关于paypal 与 ruby on rails 集成的“zoid 破坏了所有错误”的主要内容，如果未能解决你的问题，请参考以下文章
如何获取 Paypal 交易 ID 并在 ruby on rails 中退款
paypal gem 多个帐户 ruby on rails