diff --git a/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.css b/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.css
index fd6b629604..edae2e3818 100644
--- a/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.css
+++ b/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.css
@@ -13,13 +13,16 @@
 
 .hr {
   width:2px;
-  height:100px;
+  height:64px;
   background-color: #DDDDDD;
   position:inherit;
   top:0px;
   left:50%;
   z-index:10;
 }
+#stripe-card {
+  margin: 15px 0;
+}
 
 @media only screen and (max-width: 999px) {
   .hr {
@@ -31,13 +34,41 @@
   .sepText {
     left: 50%;
   }
+  #stripe-elements > div.hidden {
+    height: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    overflow: hidden;
+    display: block !important;
+  }
+  #stripe-elements .stripe-or {
+    height: 16px;
+  }
+  #stripe-elements .stripe-payment-request-button {
+    height: 40px;
+  }
+  #stripe-elements > div {
+    transition: height 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out;
+  }
 }
 
 @media only screen and (min-width: 999px) {
-  .row.equal {
+  #stripe-elements {
     display: flex;
     flex-wrap: wrap;
   }
+  .stripe-card-holder {
+    flex-grow: 1;
+  }
+  #stripe-elements > div.hidden {
+    width: 0;
+    padding: 0;
+    overflow: hidden;
+    display: block !important;
+  }
+  #stripe-elements > div {
+    transition: width 0.3s ease-out, padding-left 0.3s ease-out, padding-right 0.3s ease-out;
+  }
 }
 
 .vcenter {
diff --git a/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js b/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js
index 70dfb7d05d..17a66d1cec 100644
--- a/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js
+++ b/src/pretix/plugins/stripe/static/pretixplugins/stripe/pretix-stripe.js
@@ -74,7 +74,7 @@ var pretixstripe = {
                                 // and submit
                                 $form.get(0).submit();
                             });
-                        } catch {
+                        } catch (e) {
                             pretixstripe.paymentRequest = null;
                         }
                     } else {
@@ -112,15 +112,10 @@ var pretixstripe = {
                       pretixstripe.paymentRequest.canMakePayment().then(function(result) {
                         if (result) {
                           pretixstripe.paymentRequestButton.mount('#stripe-payment-request-button');
-                          $('#stripe-payment-request-button').parent().hide();
-                          $('#stripe-payment-request-button').parent().next("div").hide();
+                          $('#stripe-elements .stripe-or').removeClass("hidden");
                           $('#stripe-payment-request-button').parent().removeClass("hidden");
-                          $('#stripe-payment-request-button').parent().next("div").removeClass("hidden");
-                          $('#stripe-payment-request-button').parent().show(500);
-                          $('#stripe-payment-request-button').parent().next("div").show(500);
                         } else {
                           $('#stripe-payment-request-button').hide();
-                          $('#stripe-card').parent().removeClass("col-md-5").addClass("col-md-12");
                           document.getElementById('stripe-payment-request-button').style.display = 'none';
                         }
                       });
diff --git a/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html b/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html
index 768c1411b9..22afbcb654 100644
--- a/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html
+++ b/src/pretix/plugins/stripe/templates/pretixplugins/stripe/checkout_payment_form.html
@@ -31,25 +31,25 @@
     {% endif %}
 
     <div class="row equal" id="stripe-elements">
-      <div class="col-md-5 vcenter hidden">
-        <div id="stripe-payment-request-button">
-          <span class="fa fa-spinner fa-spin"></span>
-          <!-- A Stripe Element will be inserted here. -->
+        <div class="col-md-5 vcenter stripe-card-holder">
+            <div id="stripe-card" class="form-control">
+                <span class="fa fa-spinner fa-spin"></span>
+                <!-- a Stripe Element will be inserted here. -->
+            </div>
         </div>
-      </div>
-      <div class="col-md-1 hidden">
-        <div class="hr">
-          <div class="sep">
-            <div class="sepText">{% trans "OR" %}</div>
-          </div>
+        <div class="col-md-1 hidden stripe-or">
+            <div class="hr">
+                <div class="sep">
+                    <div class="sepText">{% trans "OR" %}</div>
+                </div>
+            </div>
         </div>
-      </div>
-      <div class="col-md-5 vcenter">
-        <div id="stripe-card" class="form-control">
-          <span class="fa fa-spinner fa-spin"></span>
-          <!-- a Stripe Element will be inserted here. -->
+        <div class="col-md-5 vcenter hidden stripe-payment-request-button-container">
+            <div id="stripe-payment-request-button">
+                <span class="fa fa-spinner fa-spin"></span>
+                <!-- A Stripe Element will be inserted here. -->
+            </div>
         </div>
-      </div>
     </div>
 
     <p class="help-block">