docbrown/app/views/users/_billing.html.erb
Lisa Sy fc4f6e3b1c
Improve information architecture of Settings (#11347)
* WIP Rename categories and make consistency card titles

* Add rest of sections to Extensions page

* icons

* Reshuffle Integrations and remove unnecessary Integrations tab in controller

* Update rspec tests

* Fix specs

Co-authored-by: ludwiczakpawel <ludwiczakpawel@gmail.com>
Co-authored-by: rhymes <rhymes@hey.com>
2020-11-24 12:26:06 -08:00

89 lines
3.4 KiB
Text

<div class="crayons-card crayons-card--content-rows">
<h2 class="crayons-subtitle-1">
Billing
</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">
<p><%= flash[:error] %></p>
</div>
<% end %>
</article>
<button id="add-credit-card-button" class="crayons-btn credit-card-button" type="button">Add Credit Card</button>
<% end %>
<% else %>
<div class="billing-history-header">Your Credit Cards</div>
<% @customer.sources.each do |source| %>
<div class="billing-item">
<p><%= source.brand %> ending in <%= source.last4 %></p>
<p class="billing-item-detail">Expires <%= source.exp_month %> / <%= source.exp_year %></p>
<% if source.id == @customer.default_source %>
<p class="billing-item-detail billing-item-green">primary</p>
<%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
<button class="crayons-btn crayons-btn--danger">Remove card</button>
<% end %>
<% else %>
<%= form_tag "/stripe_active_cards/#{source.id}", method: :patch do %>
<button class="crayons-btn crayons-btn--secondary">Make primary</button>
<% end %>
<%= form_tag "/stripe_active_cards/#{source.id}", method: :delete do %>
<button class="crayons-btn crayons-btn--danger">Remove card</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">+ Add Another Credit Card</button>
</div>
<% end %>
<% end %>
<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
setTimeout(function () {
var handler = StripeCheckout.configure({
key: '<%= SiteConfig.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: 'Add Credit Card',
amount: 0,
email: "<%= current_user.email %>",
panelLabel: "Add Card",
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>