1c3b619583
* Truncate displayed username length to max length * Better error notice * Fix broken billing Stripe functionality * Display server side credits purchasing errors * Be explicit in the name of the partial * Full name
87 lines
3.3 KiB
Text
87 lines
3.3 KiB
Text
<div class="crayons-card grid gap-6 p-6 mb-6">
|
|
<h3>Billing Details</h3>
|
|
|
|
<% 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: '<%= Rails.configuration.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>
|