У меня есть форма, которая выглядит следующим образом:
Это моя попытка прочесать две формы.
Мне сказали просто перебросить метод create из ChargesController в OrderController, но проблема в том, что для формы Charges требуется javascript, так как токену требуется "id =" payment_form "для отправки API. Таким образом, должен быть способ объединить обе формы либо просто синтаксисом Ruby, либо, возможно, Javascript.
В идеале я бы хотел, чтобы это работало так ...
Если форма оплаты отправляется успешно, отправьте форму заказа.
<form id="form-element" action="/charges" method="post" id="payment_form">
<%= 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>
<script
src="https://js.stripe.com/v3/">
</script>
<div class="form-row">
<label for="card-element">
Credit or debit card
</label>
<div id="card-element" class="form-control">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors" role="alert"></div>
</div>
<br>
<div class="form-group">
<%= form.submit "asdf", class:"ripple-effect", id:"button-element" %>
</div>
<span class="token"></span>
</form>
<% end %>
</div>
<script>
....
</script>
Каким-то образом мне нужно объединить две верхние строки в одну. все мои попытки потерпели неудачу.
Любые рекомендации?
Для любых администраторов, которые задаются вопросом, почему я помечаю полосу и javascript - это потому, что я думаю, что javascript может быть способом для этого, и, возможно, у людей, которые использовали полосу, были такие же задачи.
JavaScript для этих элементов Stripe Форма:
<script>
// Create a Stripe client.
var stripe = Stripe('pk_test_25726263432532454320B8');
// Create an instance of Elements
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '24px',
fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('payment_form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('payment_form');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
//
["brand", "exp_month", "exp_year", "last4"].forEach(function(field) {
addFieldToForm(form, token, field);
//
});
// Submit the form
form.submit();
}
</script>
Обновление:
Добавлены следующие изменения:
<%= form_for([@listing, @order], html: {id: "Orders"}) do |form| %>
Добавлено это в JavaScript:
$('#Orders').on('submit', function(event) {
event.preventDefault();
$.ajax({
type: "POST",
url: "/charges",
data: $('#payment_form').serialize()
}).then(this.submit.bind(this));
});