From 9f934858cc82dd1b58d67a22278d9cb1c308823d Mon Sep 17 00:00:00 2001
From: Raphael Michel <mail@raphaelmichel.de>
Date: Sat, 24 Sep 2016 16:06:16 +0200
Subject: [PATCH] Fix a UX bug in handling Stripe checkout payments

---
 .../stripe/pretix-stripe-checkout.js          | 40 +++++++++++++------
 ...checkout_payment_form_stripe_checkout.html | 37 +++++++++++++----
 2 files changed, 56 insertions(+), 21 deletions(-)

diff --git a/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe-checkout.js b/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe-checkout.js
index 39b7da976f..62fb523d69 100644
--- a/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe-checkout.js
+++ b/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe-checkout.js
@@ -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();
diff --git a/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form_stripe_checkout.html b/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form_stripe_checkout.html
index 23409544af..253a67436a 100644
--- a/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form_stripe_checkout.html
+++ b/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form_stripe_checkout.html
@@ -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 }}"/>