CGM_Public/pretix_original
2
0
Fork 1
mirror of https://github.com/pretix/pretix.git synced 2026-05-05 15:14:04 +00:00
Code Issues Packages Projects Releases Wiki 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_card_brand").val(token.card.brand);
$("#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,
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
};
$(function () {
@@ -49,24 +66,21 @@ $(function () {
function (e) {
if (($("input[name=payment][value=stripe]").prop('checked') || $("input[name=payment]").length === 0)
&& $("#stripe_token").val() == "") {
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,
});
pretixstripe.start();
e.preventDefault();
return false;
}
}
);
$("#stripe_other_card").click(
function (e) {
pretixstripe.start();
e.preventDefault();
return false;
}
);
$(window).on('popstate', function () {
if (pretixstripe.handler) {
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." %}
</div>
</noscript>
<p>
{% blocktrans trimmed %}
Please continue below to start the credit card payment.
{% endblocktrans %}
</p>
{% if request.session.payment_stripe_token %}
<p>{% blocktrans trimmed %}
You already entered a card number that we will use to charge the payment amount.
{% endblocktrans %}</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>
<em>{% blocktrans trimmed %}
Your payment will be processed by Stripe, Inc. Your credit card data will be transmitted directly to
Stripe and never touches our servers.
{% endblocktrans %}</em>
</p>
<input type="hidden" name="stripe_token" value="" id="stripe_token"/>
<input type="hidden" name="stripe_card_last4" value="" id="stripe_card_last4"/>
<input type="hidden" name="stripe_card_brand" value="" id="stripe_card_brand"/>
<input type="hidden" name="stripe_token" value="{{ request.session.payment_stripe_token }}" id="stripe_token"/>
<input type="hidden" name="stripe_card_last4" value="{{ request.session.payment_stripe_last4 }}"
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="event_name" value="{{ event.name }}"/>
<input type="hidden" id="stripe_currency" value="{{ event.currency }}"/>