Add placeholder_text option to payment_method

Allows you to set the `placeholder_text` preference on the payment_method -
giving you the option to set the placeholder text used by hosted fields.

README.md

@@ -226,6 +226,11 @@ default configuration that gets created by overriding the private
 ### Hosted Fields Styling
 You can style the Braintree credit card fields by using the `credit_card_fields_style` preference on the payment method. The `credit_card_fields_style` will be passed to the `style` key when initializing the credit card fields. You can find more information about styling hosted fields can be found [here.](https://developers.braintreepayments.com/guides/hosted-fields/styling/javascript/v3)
 
+You can also use the `placeholder_text` preference on the payment method to set the placeholder text you'd like to use for each of the hosted fields. You'll pass the field name in as the key, and the placeholder text you'd like to use as the value. For example:
+```ruby
+  { number: "Enter card number", cvv: "Enter CVV", expirationDate: "mm/yy" }
+```
+
 ### 3D Secure
 
 This gem supports [3D Secure 2](https://developers.braintreepayments.com/guides/3d-secure/overview),

app/assets/javascripts/solidus_paypal_braintree/hosted_form.js

@@ -24,15 +24,18 @@ SolidusPaypalBraintree.HostedForm.prototype._createHostedFields = function () {
 
     fields: {
       number: {
-        selector: "#card_number" + this.paymentMethodId
+        selector: "#card_number" + this.paymentMethodId,
+        placeholder: placeholder_text["number"]
       },
 
       cvv: {
-        selector: "#card_code" + this.paymentMethodId
+        selector: "#card_code" + this.paymentMethodId,
+        placeholder: placeholder_text["cvv"]
       },
 
       expirationDate: {
-        selector: "#card_expiry" + this.paymentMethodId
+        selector: "#card_expiry" + this.paymentMethodId,
+        placeholder: placeholder_text["expirationDate"]
       }
     },
 

app/models/solidus_paypal_braintree/gateway.rb

@@ -51,6 +51,10 @@ class TokenGenerationDisabledError < StandardError; end
     # See https://developers.braintreepayments.com/guides/hosted-fields/styling/javascript/v3
     preference(:credit_card_fields_style, :hash, default: {})
 
+    # A hash that gets its keys passed to the associated braintree field placeholder tag.
+    # Example: { number: "Enter card number", cvv: "Enter CVV", expirationDate: "mm/yy" }
+    preference(:placeholder_text, :hash, default: {})
+
     def partial_name
       "paypal_braintree"
     end

app/views/spree/shared/_braintree_hosted_fields.html.erb

@@ -31,4 +31,5 @@
     var threeDSecureOptions = <%= raw braintree_3ds_options_for(current_order).to_json %>;
   <% end -%>
   var credit_card_fields_style = <%= raw payment_method.preferred_credit_card_fields_style.to_json %>
+  var placeholder_text = <%= raw payment_method.preferred_placeholder_text.to_json %>
 </script>

spec/features/frontend/braintree_credit_card_checkout_spec.rb

@@ -17,7 +17,10 @@
         three_d_secure: three_d_secure_enabled
       )
 
-      braintree.update(preferred_credit_card_fields_style: { input: { 'font-size': '30px' } })
+      braintree.update(
+        preferred_credit_card_fields_style: { input: { 'font-size': '30px' } },
+        preferred_placeholder_text: { number: "Enter Your Card Number" }
+      )
     end
 
     order = if SolidusSupport.solidus_gem_version >= Gem::Version.new('2.6.0')
@@ -61,6 +64,12 @@
         expect(find("#credit-card-number").style("font-size")).to eq({ "font-size" => "30px" })
       end
     end
+
+    it "sets the placeholder text correctly" do
+      within_frame("braintree-hosted-field-number") do
+        expect(find("#credit-card-number")['placeholder']).to eq("Enter Your Card Number")
+      end
+    end
   end
 
   context "with valid credit card data", vcr: {