在 <button> 元素内嵌套 <div> 元素以使两个链接都正常工作

Question

Open image here

所以这是我试图嵌套一个 div 元素（一个 paypal 按钮）和一个按钮元素（rails 提交表单的元素）的情况，因此在单击时，表单在 paypal 之后提交成功 transaction.currently 只有一个有效没有关于如何重定向到贝宝付款页面的想法。### 请告诉我任何其他 way.if 我走错了路 ###。这是代码

    <%= form_for([@listing, @order]) do |form| %>
   <% if order.errors.any? %>
   <div id="error_explanation">
     <h2><%= pluralize(order.errors.count, "error") %> prohibited this order   from being saved:</h2>

  <ul>
  <% order.errors.full_messages.each do |message| %>
    <li><%= message %></li>
  <% end %>
  </ul>
    </div>
  <% end %>


    <div class="form-group">
   <%= form.label :name %>
    <%= form.text_field :name, class:"form-control" %>
 </div>

 <div class="form-group">
   <%= form.label :size %>
   <%= form.text_field :size, class:"form-control" %>
 </div>

<div class="form-group">
<%= form.label :mobile %>
<%= form.text_field :mobile, class:"form-control" %>
 </div>

  <div class="form-group">
   <%= form.label :city %>
   <%= form.text_field :city, class:"form-control" %>
  </div>    

 <div class="form-group">
   <%= form.label :address %>
   <%= form.text_field :address, class:"form-control" %>
 </div>

 <div class="form-group">
   <%= form.label :PinCode %>
   <%= form.text_field :PinCode, class:"form-control" %>
  </div>
<div class="form-group">
  <%= form.label :Landmark %>
  <%= form.text_field :Landmark, class:"form-control" %>
  </div>



  <div class="form-group">
    <%= form.label :Description %>(if any special changes)
    <%= form.text_field :Description, class:"form-control" %>
 </div>

 <div class="form-group">
   <%=form.submit%>
   <%=link_to "Checkout" %>
 </div>




   <button  type="submit"    onClick="placeOrder(this.form)" class="button button2">  

<!-- Set up a container element for the button -->
<div id="paypal-button-container"> </div>

<!-- Include the PayPal JavaScript SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=sb&currency=USD"></script>

<script>
    // Render the PayPal button into #paypal-button-container
    paypal.Buttons({

        // Set up the transaction
        createOrder: function(data, actions) {
            return actions.order.create({
                purchase_units: [{
                    amount: {
                        value: '0.01'
                    }
                }]
            });
        },

        // Finalize the transaction
        onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                // Show a success message to the buyer
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
            });
        }





    }).render('#paypal-button-container');


</script>


    <%=form.submit%>
       Place Order</button>

Answer 1

如果表单提交取决于paypal 交易是否成功，则只有在onApprove 回调中交易被批准后才提交表单。像这样：

onApprove: function(data, actions) {
            return actions.order.capture().then(function(details) {
                // Show a success message to the buyer
                alert('Transaction completed by ' + details.payer.name.given_name + '!');
                yourForm = document.getElementById('id_of_the_form');
                Rails.fire(yourForm, 'submit');
            });
        }

在 <button> 元素内嵌套 <div> 元素以使两个链接都正常工作

nested <div> element inside <button> element to get both links working

nested

ruby-on-rails

button

paypal-buttons