nested <div> element inside <button> element to get both links working - ruby-on-rails

Question

Open image here
So here's the situation I am trying to nest a div element ( a paypal button ) and a button element (rails element which submits forms) so on clicking, form gets submitted after paypal successful transaction.currently only one of it works No IDEA ON How to also redirect to a paypal payments page.### Please tell me any other way.if I'm following a wrong path ###. Here's the code
<%= 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

If the form submission depends on the paypal transaction success, then submit the form only ater the transaction was approved on the onApprove callback. Something like this:
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');
});
}