stripe-elements.html

<link rel="import" href="../polymer/polymer.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>
      :host {
        @apply --layout;
      }

      .StripeElement {
        background-color: white;
        padding: 8px 12px;
        border-radius: 4px;
        border: 1px solid transparent;
        box-shadow: 0 1px 3px 0 #e6ebf1;
        -webkit-transition: box-shadow 150ms ease;
        transition: box-shadow 150ms ease;
        width: 100%;
        @apply --stripe-elements-element;
      }

      .StripeElement--focus {
        box-shadow: 0 1px 3px 0 #cfd7df;
        @apply --stripe-elements-element-focus;
      }

      .StripeElement--invalid {
        border-color: #fa755a;
        @apply --stripe-elements-element-invalid;
      }

      .StripeElement--webkit-autofill {
        background-color: #fefde5 !important;
        @apply --stripe-elements-element-webkit-autofill;
      }

      paper-toast {
        margin: 0;
      }

      form {
        @apply --layout;
        @apply --layout-wrap;
        @apply --layout-flex;
      }
    </style>

    <form id="form" action="[[action]]" method="post">
      <div id="card" aria-label="Credit or Debit Card">
        <!-- Stripe will inject form here -->
      </div>

      <paper-toast id="toast" text="[[error]]" duration="Infinity" opened="[[error]]">
        <paper-icon-button icon="close" on-tap="reset"></paper-icon-button>
      </paper-toast>

      <slot name="beforeSubmit"></slot>

      <paper-button raised on-tap="submit" disabled="[[disabled]]">
        <slot name="buttonLabel">Submit</slot>
      </paper-button>

      <input type="hidden" name="stripeToken" value="[[token]]">
    </form>

  </template>
  <script>
    Polymer({
      is: 'stripe-elements',
      properties: {
        /**
         * Stripe Publishable Key. EG. pk_test_XXXXXXXXXXXXXXXXXXXXXXXX
         */
        publishableKey: {
          type: String,
          observer: '_publishableKeyChanged',
        },

        /**
         * Whether or not to hide the postal code field.
         * Useful when you gather shipping info elsewhere.
         */
        hidePostalCode: {
          type: Boolean,
          value: false,
        },

        /**
         * Whether to hide icons in the Stripe form.
         */
        hideIcon: {
          type: Boolean,
          value: false,
        },

        /**
         * Stripe icon style. 'solid' or 'default'.
         */
        iconStyle: {
          type: Object,
          value: 'default',
        },

        /**
         * Prefilled values for form. Example {postalCode: '90210'}
         */
        value: {
          type: Object,
          value: {},
        },

        /**
         * Error message from Stripe.
         */
        error: {
          type: String,
          notify: true,
          readOnly: true,
        },

        /**
         * Stripe token
         */
        token: {
          type: Object,
          notify: true,
          readOnly: true,
        },

        /**
         * Whether the submit button is disabled
         */
        disabled: {
          type: Boolean,
          notify: true,
          value: false,
        },

        /**
         * The URL to the form action. Example '/charges'.
         * If blank or undefined will not submit charges immediately.
         * @type {Object}
         */
        action: {
          type: String,
        },

        _stripe: Object,
        _elements: Object,
        _card: Object,

        _allowedStyles: {
          type: Array,
          readOnly: true,
          value: [
            'color',
            'fontFamily',
            'fontSize',
            'fontStyle',
            'fontSmoothing',
            'fontVariant',
            'iconColor',
            'lineHeight',
            'letterSpacing',
            'textDecoration',
            'textShadow',
            'textTransform',
          ],
        },

      },

      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);
      },

      /**
       * 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};
      },

    });
    /**
     * @fires 'stripe-token'
     * @fires 'stripe-error'
     */
  </script>
</dom-module>