CGM_Public/pretix_cgo
1
0
Fork 0
forked from CGM_Public/pretix_original
Code Pull Requests Actions Activity

Fix a UX bug in handling Stripe checkout payments

Browse Source
This commit is contained in:
Raphael Michel
2016-09-24 16:06:16 +02:00
parent aefa92d986
commit 9f934858cc
2 changed files with 56 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe-checkout.js
View File

@@ -17,7 +17,9 @@ var pretixstripe = {
$("#stripe_token").val(token.id); $("#stripe_token").val(token.id);
$("#stripe_card_brand").val(token.card.brand); $("#stripe_card_brand").val(token.card.brand);
$("#stripe_card_last4").val(token.card.last4); $("#stripe_card_last4").val(token.card.last4);
$form.get(0).submit(); $("#stripe_card_brand_display").text(token.card.brand);
$("#stripe_card_last4_display").text(token.card.last4);
$($form.get(0)).submit();
}, },
shippingAddress: false, shippingAddress: false,
allowRememberMe: false, allowRememberMe: false,
@@ -28,6 +30,21 @@ var pretixstripe = {
); );
}, },
start: function () {
var amount = Math.round(
parseFloat(
$("#stripe-checkout").parents("[data-total]").attr("data-total").replace(",", ".")
) * 100
);
pretixstripe.handler.open({
name: $("#organizer_name").val(),
description: $("#event_name").val(),
currency: $("#stripe_currency").val(),
email: $("#stripe_email").val(),
amount: amount
});
},
handler: null handler: null
}; };
$(function () { $(function () {
@@ -49,24 +66,21 @@ $(function () {
function (e) { function (e) {
if (($("input[name=payment][value=stripe]").prop('checked') || $("input[name=payment]").length === 0) if (($("input[name=payment][value=stripe]").prop('checked') || $("input[name=payment]").length === 0)
&& $("#stripe_token").val() == "") { && $("#stripe_token").val() == "") {
var amount = Math.round( pretixstripe.start();
parseFloat(
$("#stripe-checkout").parents("[data-total]").attr("data-total").replace(",", ".")
) * 100
);
pretixstripe.handler.open({
name: $("#organizer_name").val(),
description: $("#event_name").val(),
currency: $("#stripe_currency").val(),
email: $("#stripe_email").val(),
amount: amount,
});
e.preventDefault(); e.preventDefault();
return false; return false;
} }
} }
); );
$("#stripe_other_card").click(
function (e) {
pretixstripe.start();
e.preventDefault();
return false;
}
);
$(window).on('popstate', function () { $(window).on('popstate', function () {
if (pretixstripe.handler) { if (pretixstripe.handler) {
pretixstripe.handler.close(); pretixstripe.handler.close();

37
src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form_stripe_checkout.html
View File

@@ -6,20 +6,41 @@
{% trans "For a credit card payment, please turn on JavaScript." %} {% trans "For a credit card payment, please turn on JavaScript." %}
</div> </div>
</noscript> </noscript>
<p> {% if request.session.payment_stripe_token %}
{% blocktrans trimmed %} <p>{% blocktrans trimmed %}
Please continue below to start the credit card payment. You already entered a card number that we will use to charge the payment amount.
{% endblocktrans %} {% endblocktrans %}</p>
</p> <dl class="dl-horizontal">
<dt>{% trans "Card type" %}</dt>
<dd id="stripe_card_brand_display">{{ request.session.payment_stripe_brand }}</dd>
<dt>{% trans "Card number" %}</dt>
<dd>
**** **** **** <span id="stripe_card_last4_display">{{ request.session.payment_stripe_last4 }}</span>
<button class="btn btn-xs btn-default" id="stripe_other_card" type="button">
{% trans "Use a different card" %}
</button>
</dd>
</dl>
<p>
</p>
{% else %}
<p>
{% blocktrans trimmed %}
Please continue below to start the credit card payment.
{% endblocktrans %}
</p>
{% endif %}
<p> <p>
<em>{% blocktrans trimmed %} <em>{% blocktrans trimmed %}
Your payment will be processed by Stripe, Inc. Your credit card data will be transmitted directly to Your payment will be processed by Stripe, Inc. Your credit card data will be transmitted directly to
Stripe and never touches our servers. Stripe and never touches our servers.
{% endblocktrans %}</em> {% endblocktrans %}</em>
</p> </p>
<input type="hidden" name="stripe_token" value="" id="stripe_token"/> <input type="hidden" name="stripe_token" value="{{ request.session.payment_stripe_token }}" id="stripe_token"/>
<input type="hidden" name="stripe_card_last4" value="" id="stripe_card_last4"/> <input type="hidden" name="stripe_card_last4" value="{{ request.session.payment_stripe_last4 }}"
<input type="hidden" name="stripe_card_brand" value="" id="stripe_card_brand"/> id="stripe_card_last4"/>
<input type="hidden" name="stripe_card_brand" value="{{ request.session.payment_stripe_brand }}"
id="stripe_card_brand"/>
<input type="hidden" id="organizer_name" value="{{ event.organizer.name }}"/> <input type="hidden" id="organizer_name" value="{{ event.organizer.name }}"/>
<input type="hidden" id="event_name" value="{{ event.name }}"/> <input type="hidden" id="event_name" value="{{ event.name }}"/>
<input type="hidden" id="stripe_currency" value="{{ event.currency }}"/> <input type="hidden" id="stripe_currency" value="{{ event.currency }}"/>