Custom Stripe Elements field options

README.md

@@ -155,19 +155,13 @@ SolidusStripe.CartPageCheckout.prototype.onPrButtonMounted = function(id, result
 }
 ```
 
-Custom Stripe Elements options
+Customizing Stripe Elements
 -----------------------
 
-Some custom options, like locale and fonts, can be passed when [creating a Stripe Elements instance](https://stripe.com/docs/js/elements_object/create). To customize the default options this gem provides, override the `SolidusStripe.Payment.prototype.elementsBaseOptions` method.
+### Styling input fields
 
-
-Styling Stripe Elements
------------------------
-
-The Elements feature built in this gem come with some standard styles. If you want
-to customize it, you can override the `SolidusStripe.Elements.prototype.baseStyle`
-method and make it return a valid [Stripe Style](https://stripe.com/docs/js/appendix/style)
-object:
+The default style this gem provides for Stripe Elements input fields is defined in `SolidusStripe.Elements.prototype.baseStyle`. You can override this method to return your own custom style (make sure it returns a valid [Stripe Style](https://stripe.com/docs/js/appendix/style)
+object):
 
 ```js
 SolidusStripe.Elements.prototype.baseStyle = function () {
@@ -214,6 +208,46 @@ You can also style your element containers directly by using CSS rules like this
   }
 ```
 
+### Customizing individual input fields
+
+If you want to customize individual input fields, you can override these methods 
+
+* `SolidusStripe.Elements.prototype.cardNumberElementOptions`
+* `SolidusStripe.Elements.prototype.cardExpiryElementOptions`
+* `SolidusStripe.Elements.prototype.cardCvcElementOptions`
+
+and return a valid [options object](https://stripe.com/docs/js/elements_object/create_element?type=cardNumber) for the corresponding field type. For example, this code sets a custom placeholder and enables the credit card icon for the card number field 
+
+```js
+SolidusStripe.Elements.prototype.cardNumberElementOptions = function () {
+  return {
+    style: this.baseStyle(),
+    showIcon: true,
+    placeholder: "I'm a custom placeholder!"
+  }
+}
+```
+
+### Passing options to the Stripe Elements instance
+
+By overriding the `SolidusStripe.Payment.prototype.elementsBaseOptions` method and returning a [valid options object](https://stripe.com/docs/js/elements_object/create), you can pass custom options to the Stripe Elements instance. 
+
+Note that in order to use web fonts with Stripe Elements, you must specify the fonts when creating the Stripe Elements instance. Here's an example specifying a custom web font and locale:
+
+```js
+SolidusStripe.Payment.prototype.elementsBaseOptions = function () {
+  return {
+    locale: 'de',
+    fonts: [
+      {
+        cssSrc: 'https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600'
+      }
+    ]
+  };
+};
+```
+
+
 Migrating from solidus_gateway
 ------------------------------
 

app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js

@@ -18,15 +18,13 @@ SolidusStripe.Elements.prototype.init = function() {
 };
 
 SolidusStripe.Elements.prototype.initElements = function() {
-  var style = this.baseStyle();
-
-  var cardExpiry = this.elements.create('cardExpiry', {style: style});
+  var cardExpiry = this.elements.create('cardExpiry', this.cardExpiryElementOptions());
   cardExpiry.mount('#card_expiry');
 
-  var cardCvc = this.elements.create('cardCvc', {style: style});
+  var cardCvc = this.elements.create('cardCvc', this.cardCvcElementOptions());
   cardCvc.mount('#card_cvc');
 
-  this.cardNumber = this.elements.create('cardNumber', {style: style});
+  this.cardNumber = this.elements.create('cardNumber', this.cardNumberElementOptions());
   this.cardNumber.mount('#card_number');
 
   this.form.bind('submit', this.onFormSubmit.bind(this));
@@ -79,6 +77,24 @@ SolidusStripe.Elements.prototype.baseStyle = function () {
   };
 };
 
+SolidusStripe.Elements.prototype.cardNumberElementOptions = function () {
+  return {
+    style: this.baseStyle()
+  }
+}
+
+SolidusStripe.Elements.prototype.cardExpiryElementOptions = function () {
+  return {
+    style: this.baseStyle()
+  }
+}
+
+SolidusStripe.Elements.prototype.cardCvcElementOptions = function () {
+  return {
+    style: this.baseStyle()
+  }
+}
+
 SolidusStripe.Elements.prototype.showError = function(error) {
   var message = error.message || error;