89 lines
3.7 KiB
Text
89 lines
3.7 KiB
Text
<div class="crayons-card crayons-card--content-rows">
|
|
<h2 class="crayons-subtitle-1">
|
|
<%= t("views.settings.billing.heading") %>
|
|
</h2>
|
|
|
|
<% if current_user.stripe_id_code.blank? %>
|
|
<%= form_tag stripe_active_cards_path, id: "credit-card-form", method: :post do %>
|
|
<article>
|
|
<% if flash[:error].present? %>
|
|
<div class="crayons-card crayons-card--secondary crayons-notice crayons-notice--danger" role="alert">
|
|
<p><%= flash[:error] %></p>
|
|
</div>
|
|
<% end %>
|
|
</article>
|
|
|
|
<button id="add-credit-card-button" class="crayons-btn credit-card-button" type="button"><%= t("views.settings.billing.add") %></button>
|
|
<% end %>
|
|
<% else %>
|
|
<div class="billing-history-header"><%= t("views.settings.billing.cards") %></div>
|
|
<% @customer.sources.each do |source| %>
|
|
<div class="billing-item">
|
|
<p><%= t("views.settings.billing.number", brand: source.brand, last: source.last4) %></p>
|
|
<p class="billing-item-detail"><%= t("views.settings.billing.exp", month: source.exp_month, year: source.exp_year) %></p>
|
|
<% if source.id == @customer.default_source %>
|
|
<p class="billing-item-detail billing-item-green"><%= t("views.settings.billing.primary") %></p>
|
|
<%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
|
|
<button class="crayons-btn crayons-btn--danger"><%= t("views.settings.billing.remove") %></button>
|
|
<% end %>
|
|
<% else %>
|
|
<%= form_tag "/stripe_active_cards/#{source.id}", method: :patch do %>
|
|
<button class="crayons-btn crayons-btn--secondary"><%= t("views.settings.billing.make") %></button>
|
|
<% end %>
|
|
<%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
|
|
<button class="crayons-btn crayons-btn--danger"><%= t("views.settings.billing.remove") %></button>
|
|
<% end %>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<%= form_tag "/stripe_active_cards", id: "credit-card-form", method: :post do %>
|
|
<br />
|
|
<div class="stripe-button-wrapper">
|
|
<button id="add-credit-card-button" class="crayons-btn credit-card-button"><%= t("views.settings.billing.another") %></button>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
<script src="https://checkout.stripe.com/checkout.js"></script>
|
|
|
|
<script>
|
|
setTimeout(function () {
|
|
var handler = StripeCheckout.configure({
|
|
key: '<%= Settings::General.stripe_publishable_key %>',
|
|
image: "https://thepracticaldev.s3.amazonaws.com/i/xoxvppfjorrnxudkzskw.jpg",
|
|
locale: 'auto',
|
|
token: function (token) {
|
|
var form = document.getElementById("credit-card-form")
|
|
addHidden(form, 'stripe_token', token.id);
|
|
form.submit();
|
|
}
|
|
});
|
|
|
|
document.getElementById('add-credit-card-button').addEventListener('click', function (e) {
|
|
// Open Checkout with further options:
|
|
handler.open({
|
|
description: '<%= t("views.settings.billing.add") %>',
|
|
amount: 0,
|
|
email: "<%= current_user.email %>",
|
|
panelLabel: "<%= t("views.settings.billing.label") %>",
|
|
allowRememberMe: false,
|
|
zipCode: true,
|
|
});
|
|
e.preventDefault();
|
|
});
|
|
|
|
// Close Checkout on page navigation:
|
|
window.addEventListener('popstate', function () {
|
|
handler.close();
|
|
});
|
|
}, 220)
|
|
|
|
function addHidden(theForm, key, value) {
|
|
// Create a hidden input element, and append it to the form:
|
|
var input = document.createElement('input');
|
|
input.type = 'hidden';
|
|
input.name = key; // 'the key/name of the attribute/field that is sent to the server
|
|
input.value = value;
|
|
theForm.appendChild(input);
|
|
}
|
|
</script>
|
|
</div>
|