Merge pull request #40 from hectoregm/hectoregm/input_placeholders

Add placeholder text for each of the credit card inputs.

app/models/solidus/gateway/braintree_gateway.rb

@@ -153,6 +153,18 @@ def voidable?(response_code)
       ].include?(transaction.status)
     end
 
+    def card_number_placeholder
+      '4141 4141 4141 4141'
+    end
+
+    def expiration_date_placeholder
+      '01/2020'
+    end
+
+    def card_code_placeholder
+      '123'
+    end
+
     private
     def message_from_result(result)
       if result.success?

app/views/spree/checkout/payment/_braintree_initialization.html.erb

@@ -1,6 +1,11 @@
 <% content_for :head do %>
   <%= javascript_tag do %>
     braintree.environment = "<%= payment_method.preferred_environment %>"
+    braintree.placeholders = {
+      "number": "<%= payment_method.card_number_placeholder %>",
+      "expirationDate": "<%= payment_method.expiration_date_placeholder %>",
+      "cvv": "<%= payment_method.card_code_placeholder %>"
+    }
   <% end %>
 <% end %>
 

lib/assets/javascripts/spree/frontend/braintree/solidus_braintree.js

@@ -51,13 +51,16 @@ var initializeBraintree = function(data) {
     hostedFields: {
       styles: SolidusBraintree.getFrontendStyles(),
       number: {
-        selector: "#braintree_card_number"
+        selector: "#braintree_card_number",
+        placeholder: braintree.placeholders["number"]
       },
       cvv: {
-        selector: "#braintree_card_code"
+        selector: "#braintree_card_code",
+        placeholder: braintree.placeholders["cvv"]
       },
       expirationDate: {
-        selector: "#braintree_card_expiry"
+        selector: "#braintree_card_expiry",
+        placeholder: braintree.placeholders["expirationDate"]
       }
     },
     dataCollector: {