Only load Stripe.js if necessary

src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js

@@ -1,5 +1,7 @@
+/*global $, stripe_pubkey, stripe_loadingmessage */
 'use strict';
 
+var Stripe = null;
 var pretixstripe = {
     'validate_number': function () {
         var numb = $("#stripe_number").val();
@@ -50,7 +52,7 @@ var pretixstripe = {
                 cvc: $('#stripe_cvc').val(),
                 exp_month: $('#stripe_exp_month').val(),
                 exp_year: $('#stripe_exp_year').val(),
-                name: $('#stripe_name').val(),
+                name: $('#stripe_name').val()
             },
             pretixstripe.response
         );
@@ -71,12 +73,36 @@ var pretixstripe = {
             // and submit
             $form.get(0).submit();
         }
+    },
+    'load': function () {
+        $.ajax(
+            {
+                url: 'https://js.stripe.com/v2/',
+                dataType: 'script',
+                success: function () {
+                    Stripe.setPublishableKey(stripe_pubkey);
+                }
+            }
+        );
     }
 };
-$(function() {
+$(function () {
     if (!$("#stripe_number").length) // Not on the checkout page
         return;
 
+    if ($("input[name=payment][value=stripe]").is(':checked')) {
+        pretixstripe.load();
+    } else {
+        $("input[name=payment]").change(function() {
+            if ($(this).val() == 'stripe') {
+                pretixstripe.load();
+            }
+        })
+    }
+
+    // Stripe.setPublishableKey('{{ settings.publishable_key }}');
+    // <script type="text/javascript" src=""></script>
+
     $("#stripe_number").change(pretixstripe.validate_number).keydown(pretixstripe.validate_number)
         .keyup(pretixstripe.validate_number);
     $(".stripe-exp input").change(pretixstripe.validate_expire).keydown(pretixstripe.validate_expire)
@@ -86,7 +112,7 @@ $(function() {
     $("#stripe_number").parents("form").submit(
         function () {
             if (($("input[name=payment][value=stripe]").prop('checked') || $("input[name=payment]").length === 0)
-                 && $("#stripe_token").val() == "") {
+                && $("#stripe_token").val() == "") {
                 pretixstripe.request();
                 return false;
             }

src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html

@@ -4,6 +4,11 @@
     <div class="stripe-errors sr-only">
 
     </div>
+    <noscript>
+        <div class="alert alert-warning">
+            {% trans "For a credit card payment, please turn on JavaScript." %}
+        </div>
+    </noscript>
     <div class="form-group stripe-number">
         <label class="control-label col-sm-2">
             {% trans "Credit card number" %}

src/pretix/plugins/stripe/templates/pretixplugins/stripe/presale_head.html

@@ -5,8 +5,7 @@
 {% compress js %}
     <script type="text/javascript" src="{% static "pretixplugins/stripe/pretix-stripe.js" %}"></script>
 {% endcompress %}
-<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
 <script type="text/javascript">
-    Stripe.setPublishableKey('{{ settings.publishable_key }}');
+    var stripe_pubkey = '{{ settings.publishable_key }}';
     var stripe_loading_message = '{% trans "Contacting Stripe…" %}';
 </script>