From 6dc3e64dd8970a176da93b4b0a4397c4fcd00e3d Mon Sep 17 00:00:00 2001 From: Per Date: Thu, 26 Mar 2020 09:33:27 +0100 Subject: [PATCH 1/3] Add hooks for passing custom options to Stripe Elements fields. https://github.com/solidusio/solidus_stripe/issues/41 --- .../solidus_stripe/stripe-elements.js | 24 ++++++++++++++++--- 1 file changed, 21 insertions(+), 3 deletions(-) diff --git a/app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js b/app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js index 5ef24e05..8ce7d94f 100644 --- a/app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js +++ b/app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js @@ -20,13 +20,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 +79,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; From ee4bcccb3ea42a13dfd89ef7ee8df4cdd780afbb Mon Sep 17 00:00:00 2001 From: Per Date: Thu, 26 Mar 2020 10:06:49 +0100 Subject: [PATCH 2/3] Improve instructions for Stripe Elements customization in the readme --- README.md | 54 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 44 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index d4198452..7b00f016 100644 --- a/README.md +++ b/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 ------------------------------ From 2ef803392420aa301d737c523a19269dff236202 Mon Sep 17 00:00:00 2001 From: Per Date: Thu, 26 Mar 2020 10:14:24 +0100 Subject: [PATCH 3/3] Remove unused variable in stripe-elements.js --- .../spree/frontend/solidus_stripe/stripe-elements.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js b/app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js index 8ce7d94f..7bf54dd6 100644 --- a/app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js +++ b/app/assets/javascripts/spree/frontend/solidus_stripe/stripe-elements.js @@ -18,8 +18,6 @@ SolidusStripe.Elements.prototype.init = function() { }; SolidusStripe.Elements.prototype.initElements = function() { - var style = this.baseStyle(); - var cardExpiry = this.elements.create('cardExpiry', this.cardExpiryElementOptions()); cardExpiry.mount('#card_expiry');