From 14645aae04f7df1547ee3c88cba0c1639174ee1a Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Sun, 31 Dec 2017 00:12:22 +0200
Subject: [PATCH] Classify Element

---
 bower.json           |  13 +-
 stripe-elements.html | 491 ++++++++++++++++++++++---------------------
 2 files changed, 263 insertions(+), 241 deletions(-)

diff --git a/bower.json b/bower.json
index afd08d4..aea035e 100644
--- a/bower.json
+++ b/bower.json
@@ -7,18 +7,21 @@
   "description": "Polymer wrapper for Stripe.js v3 Elements",
   "main": "stripe-elements.html",
   "dependencies": {
-    "polymer": "Polymer/polymer#1.9 - 2",
-    "paper-toast": "PolymerElements/paper-toast#^2.0.0"
+    "polymer": "Polymer/polymer#^2",
+    "paper-toast": "PolymerElements/paper-toast#^2",
+    "paper-icon-button": "PolymerElements/paper-icon-button#^2.0.1",
+    "paper-button": "PolymerElements/paper-button#^2.0.0"
   },
   "devDependencies": {
-    "iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
-    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^1.0.0",
+    "iron-component-page": "PolymerElements/iron-component-page#^2",
+    "iron-demo-helpers": "PolymerElements/iron-demo-helpers#^2",
     "web-component-tester": "^6.0.0",
     "webcomponentsjs": "webcomponents/webcomponentsjs#^1.0.0",
     "paper-input": "PolymerElements/paper-input#^2.0.0",
     "show-json": "ryanburns23/show-json#^1.0.1"
   },
   "resolutions": {
-    "webcomponentsjs": "^1.0.0"
+    "polymer": "^2",
+    "webcomponentsjs": "^v1.0.19"
   }
 }
diff --git a/stripe-elements.html b/stripe-elements.html
index ef81330..b0e21b6 100644
--- a/stripe-elements.html
+++ b/stripe-elements.html
@@ -1,100 +1,9 @@
-<link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../polymer/polymer-element.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../paper-button/paper-button.html">
 <link rel="import" href="../paper-toast/paper-toast.html">
 <link rel="import" href="../paper-icon-button/paper-icon-button.html">
 
-<!--
-`stripe-elements`
-Polymer wrapper for Stripe.js v3 Elements
-
-## Usage
-
-```html
-  <paper-input label="Stripe Publishable Key" value="{{key}}"></paper-input>
-  <stripe-elements publishable-key="[[key]]" token="{{token}}"></stripe-elements>
-  <show-json hide-copy-button json="[[token]]"></show-json>
-```
-
-## Styling
-
-You can use the `--paper-button` mixin to apply styles to the submit button, e.g.
-
-```css
-stripe-elements {
-  --paper-button: {
-    background-color: blue;
-    color: white;
-  }
-}
-```
-
-A word about nomenclature before we list custom properties and mixins. Stripe v3
-Introduces 'Stripe Elements'. These are not custom elements, but rather forms
-hosted by stripe and injected into your page via an iFrame. When we refer to the
-'Stripe Element' in this document, we are referring to the hosted Stripe form,
-not the `<stripe-element>` custom element.
-
-The following custom properties and mixins are available for styling the `<stripe-elements>` component:
-
-| Custom property | Description | Default |
-| --- | --- | --- |
-| `--stripe-elements-element` | Mixin applied to the Stripe Element | {} |
-| `--stripe-elements-element-focus` | Mixin applied to the Stripe Element in its focussed state. | {} |
-| `--stripe-elements-element-invalid` | Mixin applied to the Stripe Element in ins invalid state | {} |
-| `--stripe-elements-element-webkit-autofill` | Mixin applied to the Stripe Element's webkit autofill. | {} |
-
-When you apply CSS to the custom properties below, they're parsed and sent to Stripe, who should apply them to the Stripe Element they return in the iFrame. Base styles are inherited by all other variants. `complete` styles are applies when the Stripe Element has valid input. `empty` styles are applied when the Stripe Element has no user input. `invalid` styles are applied when the Stripe Element has invalid input.
-
-| Custom property | Default |
-| --- | --- |
-| `--stripe-elements-base-color` | '' |
-| `--stripe-elements-base-color-font-family` | '' |
-| `--stripe-elements-base-font-size` | '' |
-| `--stripe-elements-base-font-smoothing` | '' |
-| `--stripe-elements-base-font-variant` | '' |
-| `--stripe-elements-base-icon-color` | '' |
-| `--stripe-elements-base-line-height` | '' |
-| `--stripe-elements-base-letter-spacing` | '' |
-| `--stripe-elements-base-text-decoration` | '' |
-| `--stripe-elements-base-text-shadow` | '' |
-| `--stripe-elements-base-text-transform` | '' |
-| `--stripe-elements-complete-color` | '' |
-| `--stripe-elements-complete-color-font-family` | '' |
-| `--stripe-elements-complete-font-size` | '' |
-| `--stripe-elements-complete-font-smoothing` | '' |
-| `--stripe-elements-complete-font-variant` | '' |
-| `--stripe-elements-complete-icon-color` | '' |
-| `--stripe-elements-complete-line-height` | '' |
-| `--stripe-elements-complete-letter-spacing` | '' |
-| `--stripe-elements-complete-text-decoration` | '' |
-| `--stripe-elements-complete-text-shadow` | '' |
-| `--stripe-elements-complete-text-transform` | '' |
-| `--stripe-elements-empty-color` | '' |
-| `--stripe-elements-empty-color-font-family` | '' |
-| `--stripe-elements-empty-font-size` | '' |
-| `--stripe-elements-empty-font-smoothing` | '' |
-| `--stripe-elements-empty-font-variant` | '' |
-| `--stripe-elements-empty-icon-color` | '' |
-| `--stripe-elements-empty-line-height` | '' |
-| `--stripe-elements-empty-letter-spacing` | '' |
-| `--stripe-elements-empty-text-decoration` | '' |
-| `--stripe-elements-empty-text-shadow` | '' |
-| `--stripe-elements-empty-text-transform` | '' |
-| `--stripe-elements-invalid-color` | '' |
-| `--stripe-elements-invalid-color-font-family` | '' |
-| `--stripe-elements-invalid-font-size` | '' |
-| `--stripe-elements-invalid-font-smoothing` | '' |
-| `--stripe-elements-invalid-font-variant` | '' |
-| `--stripe-elements-invalid-icon-color` | '' |
-| `--stripe-elements-invalid-line-height` | '' |
-| `--stripe-elements-invalid-letter-spacing` | '' |
-| `--stripe-elements-invalid-text-decoration` | '' |
-| `--stripe-elements-invalid-text-shadow` | '' |
-| `--stripe-elements-invalid-text-transform` | '' |
-
-@demo demo/index.html
--->
 <dom-module id="stripe-elements">
   <template>
     <style>
@@ -146,7 +55,7 @@
       </div>
 
       <paper-toast id="toast" text="[[error]]" duration="Infinity" opened="[[error]]">
-        <paper-icon-button icon="close" on-tap="reset"></paper-icon-button>
+        <paper-button on-tap="reset">OK</paper-button>
       </paper-toast>
 
       <slot name="beforeSubmit"></slot>
@@ -160,9 +69,114 @@
 
   </template>
   <script>
-    Polymer({
-      is: 'stripe-elements',
-      properties: {
+  /**
+   * `stripe-elements`
+   * Polymer wrapper for Stripe.js v3 Elements
+   *
+   * ## Usage
+   *
+   * ```html
+   *   <paper-input label="Stripe Publishable Key" value="{{key}}"></paper-input>
+   *   <stripe-elements
+   *       publishable-key="[[key]]"
+   *       token="{{token}}"
+   *   ></stripe-elements>
+   *   <show-json hide-copy-button json="[[token]]"></show-json>
+   * ```
+   *
+   * ## Styling
+   *
+   * Use the `--paper-button` mixin to apply styles to the submit button, e.g.
+   *
+   * ```css
+   * stripe-elements {
+   *   --paper-button: {
+   *     background-color: blue;
+   *     color: white;
+   *   }
+   * }
+   * ```
+   *
+   * A word about nomenclature before we list custom properties and mixins.
+   * Stripe v3 Introduces 'Stripe Elements'. These are not custom elements,
+   * but rather forms hosted by stripe and injected into your page via an iFrame.
+   * When we refer to the 'Stripe Element' in this document, we are referring
+   * to the hosted Stripe form, not the `<stripe-element>` custom element.
+   *
+   * The following custom properties and mixins are available for styling the
+   * `<stripe-elements>` component:
+   *
+   * | Custom property | Description | Default |
+   * | --- | --- | --- |
+   * | `--stripe-elements-element` | Mixin applied to the Stripe Element | {} |
+   * | `--stripe-elements-element-focus` | Mixin applied to the Stripe Element in its focussed state. | {} |
+   * | `--stripe-elements-element-invalid` | Mixin applied to the Stripe Element in ins invalid state | {} |
+   * | `--stripe-elements-element-webkit-autofill` | Mixin applied to the Stripe Element's webkit autofill. | {} |
+   *
+   * When you apply CSS to the custom properties below, they're parsed and sent
+   * to Stripe, who should apply them to the Stripe Element they return in the
+   * iFrame. Base styles are inherited by all other variants.
+   * `complete` styles are applies when the Stripe Element has valid input.
+   * `empty` styles are applied when the Stripe Element has no user input.
+   * `invalid` styles are applied when the Stripe Element has invalid input.
+   *
+   * | Custom property | Default |
+   * | --- | --- |
+   * | `--stripe-elements-base-color` | '' |
+   * | `--stripe-elements-base-color-font-family` | '' |
+   * | `--stripe-elements-base-font-size` | '' |
+   * | `--stripe-elements-base-font-smoothing` | '' |
+   * | `--stripe-elements-base-font-variant` | '' |
+   * | `--stripe-elements-base-icon-color` | '' |
+   * | `--stripe-elements-base-line-height` | '' |
+   * | `--stripe-elements-base-letter-spacing` | '' |
+   * | `--stripe-elements-base-text-decoration` | '' |
+   * | `--stripe-elements-base-text-shadow` | '' |
+   * | `--stripe-elements-base-text-transform` | '' |
+   * | `--stripe-elements-complete-color` | '' |
+   * | `--stripe-elements-complete-color-font-family` | '' |
+   * | `--stripe-elements-complete-font-size` | '' |
+   * | `--stripe-elements-complete-font-smoothing` | '' |
+   * | `--stripe-elements-complete-font-variant` | '' |
+   * | `--stripe-elements-complete-icon-color` | '' |
+   * | `--stripe-elements-complete-line-height` | '' |
+   * | `--stripe-elements-complete-letter-spacing` | '' |
+   * | `--stripe-elements-complete-text-decoration` | '' |
+   * | `--stripe-elements-complete-text-shadow` | '' |
+   * | `--stripe-elements-complete-text-transform` | '' |
+   * | `--stripe-elements-empty-color` | '' |
+   * | `--stripe-elements-empty-color-font-family` | '' |
+   * | `--stripe-elements-empty-font-size` | '' |
+   * | `--stripe-elements-empty-font-smoothing` | '' |
+   * | `--stripe-elements-empty-font-variant` | '' |
+   * | `--stripe-elements-empty-icon-color` | '' |
+   * | `--stripe-elements-empty-line-height` | '' |
+   * | `--stripe-elements-empty-letter-spacing` | '' |
+   * | `--stripe-elements-empty-text-decoration` | '' |
+   * | `--stripe-elements-empty-text-shadow` | '' |
+   * | `--stripe-elements-empty-text-transform` | '' |
+   * | `--stripe-elements-invalid-color` | '' |
+   * | `--stripe-elements-invalid-color-font-family` | '' |
+   * | `--stripe-elements-invalid-font-size` | '' |
+   * | `--stripe-elements-invalid-font-smoothing` | '' |
+   * | `--stripe-elements-invalid-font-variant` | '' |
+   * | `--stripe-elements-invalid-icon-color` | '' |
+   * | `--stripe-elements-invalid-line-height` | '' |
+   * | `--stripe-elements-invalid-letter-spacing` | '' |
+   * | `--stripe-elements-invalid-text-decoration` | '' |
+   * | `--stripe-elements-invalid-text-shadow` | '' |
+   * | `--stripe-elements-invalid-text-transform` | '' |
+   *
+   * @demo demo/index.html
+   * @polymer
+   * @customElement
+   * @extends Polymer.Element
+   */
+  class StripeElements extends Polymer.Element {
+    static get is() {return 'stripe-elements';}
+    static get properties() {
+      return {
+
         /**
          * Stripe Publishable Key. EG. pk_test_XXXXXXXXXXXXXXXXXXXXXXXX
          */
@@ -201,7 +215,7 @@
          */
         value: {
           type: Object,
-          value: {},
+          value: () => ({}),
         },
 
         /**
@@ -262,146 +276,151 @@
           ],
         },
 
-      },
-
-      listeners: {
-        'change': '_handleChange',
-      },
-
-      /**
-       * LIFECYCLE CALLBACKS
-       */
-
-      ready: function() {
-        if (!window.Stripe) {
-          this._loadStripeJs();
-        } else {
-          console.info('Stripe is available on window');
-        }
-        if (this.publishableKey) {
-          this._initStripe();
-          this._mountCard();
-        }
-      },
-
-      /**
-       * PUBLIC METHODS
-       */
-
-      /**
-       * Submit credit card information to generate a token,
-       * then submit payment with the token.
-       * @param  {Event} e Submit event.
-       */
-      submit: function(e) {
-        // Get the token
-        this._stripe.createToken(this._card).then((result) => {
-          this._setToken(result.token);
-          // Fire success event
-          this.dispatchEvent(new CustomEvent('stripe-token',
-            {bubbles: true, composed: true, detail: this.token}
-          ));
-          // Submit the form
-          return this.action ? this.$.form.submit() : true;
-        }).catch((error) => {
-          // Show error in UI
-          this.$.toast.fitInto = this.$.form;
-          this._setError(error.message);
-          // Fire error event
-          this.dispatchEvent(new CustomEvent('stripe-error',
-            {bubbles: true, composed: true, detail: error}
-          ));
-          return false;
-        });
-      },
-
-      reset: function() {
-        this._setError(undefined);
-        this._card.clear();
-      },
-
-      /**
-       * OBSERVERS
-       */
-
-      _publishableKeyChanged: function(key, ov) {
-        if (!key) {return this._unmountCard();}
-        this._unmountCard();
-        this._stripe = {};
-        this._initStripe();
-        this._mountCard();
-      },
-
-      _styleChanged: function(style, ov) {
-        if (!style || ov === undefined) {return;}
-        this._mountCard();
-      },
-
-      /**
-       * EVENT HANDLERS
-       */
-
-      _handleChange: function(e) {
-        this.error = e.error;
-      },
-
-      /**
-       * PRIVATE METHODS
-       */
-
-      _loadStripeJs: function() {
-        /* eslint-disable no-console */
-        const stripeScript = this.resolveUrl('./stripe-script.html');
-        const onSuccess = () => console.warn(
-          'Stripe.js loaded in stripe-elements component. ' +
-          'It is recommended to load stripe.js in index.html'
-        );
-        const onError = () => console.warn('Could not load Stripe!');
-        const loadAsync = false;
-        this.importHref(stripeScript, onSuccess, onError, loadAsync);
-        /* eslint-enable no-console */
-      },
-
-      _initStripe: function() {
-        this._stripe = Stripe(this.publishableKey);
-        this._elements = this._stripe.elements();
-      },
-
-      _mountCard: function() {
-        const hidePostalCode = this.hidePostalCode;
-        const hideIcon = this.hideIcon;
-        const iconStyle = this.iconStyle;
-        const value = this.value;
-        const style = this._getStripeElementStyles();
-        this._card = this._elements.create('card',
-          {hidePostalCode, hideIcon, iconStyle, style, value});
-        this._card.mount(this.$.card);
-      },
-
-      _unmountCard: function() {
-        if (this._card && this._card.unmount) { this._card.unmount();}
-        this._card = undefined;
-      },
-
-      _getStripeElementStyles: function() {
-        let base = {};
-        let complete = {};
-        let empty = {};
-        let invalid = {};
-        for (let style of this._allowedStyles) {
-          const dash = style.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
-          base[style] = this.getComputedStyleValue(`--stripe-elements-base-${dash}`);
-          complete[style] = this.getComputedStyleValue(`--stripe-elements-complete-${dash}`);
-          empty[style] = this.getComputedStyleValue(`--stripe-elements-empty-${dash}`);
-          invalid[style] = this.getComputedStyleValue(`--stripe-elements-invalud-${dash}`);
-        }
-        return {base, complete, empty, invalid};
-      },
-
-    });
+      };
+    }
+
+    /** LIFECYCLE CALLBACKS */
+
+    constructor() {
+      super();
+      window.Stripe
+        // eslint-disable-next-line no-console
+        ? console.info('Stripe is available on window')
+        : this._loadStripeJs();
+    }
+
+    connectedCallback() {
+      super.connectedCallback();
+      this.addEventListener('change', (event) => this.onChange(event));
+    }
+
+    /** PUBLIC METHODS */
+
     /**
-     * @fires 'stripe-token'
-     * @fires 'stripe-error'
+     * Submit credit card information to generate a token,
+     * then submit payment with the token.
+     * @param  {Event} event Submit event.
      */
+    submit(event) {
+      const fire = (type, detail) => this.dispatchEvent(new CustomEvent(type, {
+        bubbles: true,
+        composed: true,
+        detail,
+      }));
+
+      const tokenReceived = ({token}) => {
+        this._setToken(token);
+        fire('stripe-token', token);
+        // Submit the form
+        return this.action ? this.$.form.submit() : true;
+      };
+
+      const tokenError = (error) => {
+        // Show error in UI
+        this.$.toast.fitInto = this.$.form;
+        this._setError(error.message);
+        fire('stripe-error', error);
+        return false;
+      };
+
+      // Get the token
+      this._stripe.createToken(this._card)
+        .then(tokenReceived)
+        .catch(tokenError);
+    }
+
+    reset() {
+      this._setError(undefined);
+      this._card.clear();
+    }
+
+    /** OBSERVERS */
+
+    _publishableKeyChanged(key, ov) {
+      if (!key) return this._unmountCard();
+      this._unmountCard();
+      this._stripe = {};
+      this._initStripe();
+      this._mountCard();
+    }
+
+    _styleChanged(style, ov) {
+      if (!style || ov === undefined) {return;}
+      this._mountCard();
+    }
+
+    /** EVENT HANDLERS */
+
+    onChange(event) {
+      this.error = event.error;
+    }
+
+    /** PRIVATE METHODS */
+
+    _loadStripeJs() {
+      // eslint-disable-next-line no-console
+      console.warn(
+        'Stripe.js loaded in stripe-elements component.',
+        'It is recommended to load stripe.js in index.html'
+      );
+      const stripeScript = this.resolveUrl('./stripe-script.html');
+      Polymer.importHref(
+        stripeScript,
+        this._initStripe.bind(this),
+        // eslint-disable-next-line no-console
+        () => console.warn('Could not load Stripe!'),
+        false
+      );
+    }
+
+    _initStripe() {
+      if (!window.Stripe) return this._loadStripeJs();
+      this._stripe = Stripe(this.publishableKey);
+      this._elements = this._stripe.elements();
+    }
+
+    _mountCard() {
+      const {hidePostalCode, hideIcon, iconStyle, value} = this;
+      const style = this._getStripeElementStyles();
+      const init = {hidePostalCode, hideIcon, iconStyle, style, value};
+      this._card = this._elements.create('card', init);
+      this._card.mount(this.$.card);
+    }
+
+    _unmountCard() {
+      if (this._card && this._card.unmount) this._card.unmount();
+      this._card = null;
+    }
+
+    _getStripeElementStyles() {
+      let base = {};
+      let complete = {};
+      let empty = {};
+      let invalid = {};
+      for (let style of this._allowedStyles) {
+        const dash = style.replace(/([A-Z])/g, (g) => `-${g[0].toLowerCase()}`);
+        base[style] = ShadyCSS
+          ? ShadyCSS.getComputedStyleValue(this, '--something')
+          : getComputedStyle(this).getPropertyValue(`--stripe-elements-base-${dash}`);
+        complete[style] = ShadyCSS
+          ? ShadyCSS.getComputedStyleValue(this, '--something')
+          : getComputedStyle(this).getPropertyValue(`--stripe-elements-complete-${dash}`);
+        empty[style] = ShadyCSS
+          ? ShadyCSS.getComputedStyleValue(this, '--something')
+          : getComputedStyle(this).getPropertyValue(`--stripe-elements-empty-${dash}`);
+        invalid[style] = ShadyCSS
+          ? ShadyCSS.getComputedStyleValue(this, '--something')
+          : getComputedStyle(this).getPropertyValue(`--stripe-elements-invalud-${dash}`);
+      }
+      return {base, complete, empty, invalid};
+    }
+  }
+
+  customElements.define(StripeElements.is, StripeElements);
+
+  /**
+   * @fires 'stripe-token'
+   * @fires 'stripe-error'
+   */
   </script>
 </dom-module>