Merge pull request #349 from spark-solutions/sd-820

[SD-820] apply Spree 4.1 style for stripe elements inputs
spree · Feb 24, 2020 · 69a98e0 · 69a98e0
2 parents 39a7077 + ea031cd
commit 69a98e0
Showing 1 changed file with 18 additions and 23 deletions.
diff --git a/lib/views/frontend/spree/checkout/payment/_stripe_elements.html.erb b/lib/views/frontend/spree/checkout/payment/_stripe_elements.html.erb
@@ -1,45 +1,40 @@
 <% param_prefix = "payment_source[#{payment_method.id}]" %>
 <div class="well clearfix">
   <p class="field">
-    <%= label_tag "name_on_card_#{payment_method.id}" do %>
-      <%= Spree.t(:name_on_card) %><abbr class="required" title="required">*</abbr>
-    <% end %>
-    <%= text_field_tag "#{param_prefix}[name]", "#{@order.bill_address_firstname} #{@order.bill_address_lastname}", { id: "name_on_card_#{payment_method.id}", class: 'form-control required'} %>
-    </p>
-    <div class="form-row">
-      <%= label_tag "card_number" do %>
-        <%= Spree.t(:card_number) %><abbr class="required" title="required">*</abbr>
-      <% end %>
-      <div class="form-control required cardNumber">
-        <div id="card-element">
-          <!-- a Stripe Element will be inserted here. -->
-        </div>
-      </div>
-      <!-- Used to display form errors -->
-      <div id="card-errors" role="alert"></div>
-    </div>
+    <%= text_field_tag "#{param_prefix}[name]", "#{@order.bill_address_firstname} #{@order.bill_address_lastname}", { id: "name_on_card_#{payment_method.id}", class: 'spree-flat-input', placeholder: Spree.t(:name_on_card)} %>
   </p>
+  <div class="form-control required cardNumber spree-flat-input">
+    <div id="card-element">
+      <!-- a Stripe Element will be inserted here. -->
+    </div>
+  </div>
+  <!-- Used to display form errors -->
+  <div id="card-errors" role="alert"></div>
 </div>
 
 <script type="text/javascript" src="https://js.stripe.com/v3/"></script>
 
 <script>
   var stripeElements = Stripe("<%= payment_method.preferred_publishable_key %>");
   var elements = stripeElements.elements();
+  var spreeFlatInputStyle = getComputedStyle(document.querySelector('input.spree-flat-input'));
 
   var card = elements.create('card', {
     iconStyle: 'solid',
     hidePostalCode: true,
     style: {
       base: {
-        iconColor: '#555555',
-        lineHeight: '24px',
-        fontWeight: 300,
-        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
-        fontSize: '14px',
+        color: spreeFlatInputStyle['color'],
+        iconColor: spreeFlatInputStyle['color'],
+        lineHeight: spreeFlatInputStyle['line-height'],
+        fontWeight: spreeFlatInputStyle['font-weight'],
+        fontFamily: spreeFlatInputStyle['font-family'],
+        fontSize: spreeFlatInputStyle['font-size'],
 
         '::placeholder': {
-          color: '#555555',
+          color: '#757575',
+          fontWeight: 300,
+          textTransform: 'uppercase'
         },
       },
       invalid: {