replace skeuocard with code that hopefully has less issues

This commit is contained in:
Kyle Drake 2024-11-04 12:21:12 -06:00
parent c994f9f4c1
commit 790d31f578
5 changed files with 730 additions and 52 deletions

2
public/js/imask.min.js vendored Normal file

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

705
views/_card.erb Normal file

File diff suppressed because one or more lines are too long

View file

@ -8,14 +8,15 @@
$(document).ready(function() { $(document).ready(function() {
$('#upgradeForm').submit(function(event) { $('#upgradeForm').submit(function(event) {
/* event.preventDefault(); */ event.preventDefault();
if ($('#stripe_token').val() === '') { if ($('#stripe_token').val() === '') {
Stripe.card.createToken({ Stripe.card.createToken({
number: $('[name="cc_number"]').val(), //name: $('input[id="name"]').val(),
cvc: $('[name="cc_cvc"]').val(), number: $('input[id="cardnumber"]').val(),
exp_month: $('[name="cc_exp_month"]').val(), cvc: $('input[id="securitycode"]').val(),
exp_year: $('[name="cc_exp_year"]').val() exp_month: $('input[id="expirationdate"]').val().split('/')[0],
exp_year: $('input[id="expirationdate"]').val().split('/')[1]
}, stripeResponseHandler); }, stripeResponseHandler);
return false; return false;
} else { } else {
@ -25,12 +26,10 @@
}); });
function clearCardInfo() { function clearCardInfo() {
$('[name="cc_number"]').val(''); //$('input[id="name"]').val('');
$('[name="cc_cvc"]').val(''); $('input[id="cardnumber"]').val('');
$('[name="cc_exp_month"]').val(''); $('input[id="securitycode"]').val('');
$('[name="cc_exp_year"]').val(''); $('input[id="expirationdate"]').val('');
$('[name="cc_name"]').val('');
$('[name="cc_type"]').val('');
} }
function stripeResponseHandler(status, response) { function stripeResponseHandler(status, response) {
@ -40,7 +39,9 @@
var token = response.id; var token = response.id;
$('#stripe_token').val(token); $('#stripe_token').val(token);
clearCardInfo(); clearCardInfo();
$('.form-container').html('Thank you!<br>Upgrading your account, please wait...')
$('#upgradeForm').off('submit').submit(); $('#upgradeForm').off('submit').submit();
$('#upgradeDiv').css('display', 'none');
} }
} }
}); });

View file

@ -68,49 +68,21 @@
</div> </div>
<div class="col col-66"> <div class="col col-66">
<p class="instructions">Just enter your card info, and you're done:</p> <div id="plan_error" class="alert alert-block alert-error" style="display:none"></div>
<div> <form id="upgradeForm" method="POST" action="/supporter/update">
<div id="plan_error" class="alert alert-block alert-error" style="display:none"></div> <%== csrf_token_input_html %>
<form id="upgradeForm" method="POST" action="/supporter/update"> <input type="hidden" value="supporter" name="plan_type">
<%== csrf_token_input_html %> <input id="stripe_token" name="stripe_token" type="hidden" value="<%= params[:stripe_token] %>">
<input type="hidden" value="supporter" name="plan_type"> <%== erb :'_card'%>
<input id="stripe_token" name="stripe_token" type="hidden" value="<%= params[:stripe_token] %>"> </form>
<div class="credit-card-input no-js" id="skeuocard" style="margin-left: auto; margin-right: auto; margin-bottom: 20px">
<p class="no-support-warning"></p>
<label for="cc_type">Card Type</label>
<select name="cc_type">
<option value="">...</option>
<option value="visa">Visa</option>
<option value="discover">Discover</option>
<option value="mastercard">MasterCard</option>
<option value="maestro">Maestro</option>
<option value="jcb">JCB</option>
<option value="unionpay">China UnionPay</option>
<option value="amex">American Express</option>
<option value="dinersclubintl">Diners Club</option>
</select>
<label for="cc_number">Card Number</label>
<input type="text" name="cc_number" id="cc_number" placeholder="XXXX XXXX XXXX XXXX" maxlength="19" size="19">
<label for="cc_exp_month">Expiration Month</label>
<input type="text" name="cc_exp_month" id="cc_exp_month" placeholder="00">
<label for="cc_exp_year">Expiration Year</label>
<input type="text" name="cc_exp_year" id="cc_exp_year" placeholder="00">
<label for="cc_name">Cardholder's Name</label>
<input type="text" name="cc_name" id="cc_name" placeholder="John Doe">
<label for="cc_cvc">Card Validation Code</label>
<input type="text" name="cc_cvc" id="cc_cvc" placeholder="123" maxlength="3" size="3">
</div>
</form>
</div>
</div> </div>
</div> </div>
<div class="row content txt-Center"> <div id="upgradeDiv" class="row content txt-Center">
<a id="upgradeLink" href="/" class="btn-Action" onclick="$('#upgradeForm').submit(); return false"> <a id="upgradeLink" href="/" class="btn-Action" onclick="$('#upgradeForm').submit(); return false">
Upgrade for $<%= Site::PLAN_FEATURES[:supporter][:price] %>/mo Upgrade for $<%= Site::PLAN_FEATURES[:supporter][:price] %>/mo
</a> </a>
or pay with <a href="/supporter/paypal">PayPal</a> or <a href="/supporter/bitcoin">Bitcoin</a> or pay with <strong><a href="/supporter/paypal" style="color: #00308a; text-decoration: underline;"><span style="color: #00308a">Pay</span><span style="color: #029be1">Pal</span></a></strong> or <strong><a href="/supporter/bitcoin" style="color: #f79319; text-decoration: underline;">Bitcoin</a></strong>
</div> </div>
</div> </div>
</div> </div>
@ -159,6 +131,3 @@
}) })
}) })
</script> </script>
<script>
card = new Skeuocard($('#skeuocard'))
</script>