paperfire-stripe.html

<link rel="import" href="../polymer/polymer-element.html">
<script src="https://checkout.stripe.com/checkout.js"></script>

<dom-module id="paperfire-stripe">
  <script>
    /**
     * `paperfire-stripe`
     * A stripe payment element
     *
     * @customElement
     * @polymer
     * @demo demo/index.html
     */
    class PaperfireStripe extends Polymer.Element {
      static get is() {
        return 'paperfire-stripe';
      }
      static get properties() {
        return {
          // Specify whether to include the option to "Remember Me" for future purchases (true or false). The default is true. This feature is dependent on being able to set cookies or use the browser’s localStorage, and may not be available if your customer has certain privacy settings enabled.
          allowRememberMe: {
            type: Boolean,
            value: true
          },
          // The amount (in pence) that's shown to the user. (You will also need to provide Checkout with a currency value to change the default of USD.)
          amount: {
            type: Number,
            value: 2000,
            notify: true
          },
          // Specify whether Checkout should collect the user's billing address (true or false).
          billingAddress: {
            type: Boolean,
            value: false
          },
          // Specify whether to accept Bitcoin (true or false).
          bitcoin: {
            type: Boolean,
            value: false
          },
          // The currency of the amount (3-letter ISO code). The default is USD.
          currency: {
            type: String,
            value: 'USD'
          },
          // Debug the element with console logs
          debug: Boolean,
          // A description of the product or service being purchased
          description: {
            type: String,
            value: '2 widgets'
          },
          // If you already know the email address of your user, you can provide it to Checkout to be prefilled.
          email: String,
          // Stripe Error
          error: {
            type: Boolean,
            value: false
          },
          // Stripe Error messge
          errorMessage: String,
          // URL to location in firebase you want the response from stripe to be pushed
          firebaseUrl: {
            type: String,
            readOnly: true
          },
          // Image Url: A relative or absolute URL pointing to a square image of your brand or product. The recommended minimum size is 128x128px. The supported image types are: .gif, .jpeg, and .png.
          image: {
            type: String,
            value: 'https://stripe.com/img/documentation/checkout/marketplace.png'
          },
          // Specify *auto* to display Checkout in the user's preferred language, if available. English will be used by default.
          locale: {
            type: String,
            value: 'auto'
          },
          // The name of your company or website
          name: {
            type: String,
            value: 'Demo Site'
          },
          // Stripe publishable (test or live)
          pubKey: {
            type: String,
            value: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh'
          },
          // Specify whether Checkout should collect the user's shipping address (true or false).
          shippingAddress: {
            type: Boolean,
            value: false
          },
          // Specify whether Checkout should validate the billing postal code (true or false). Stripe highly recommends enabling declines on verification failures in your <a href="https://dashboard.stripe.com/account">account settings</a>.
          zipCode: {
            type: Boolean,
            value: true
          },
          // Stripe Checkout object
          _checkout: {
            type: Object,
            computed: '_initCheckout(pubKey)'
          },
          // Firebase ref
          _ref: {
            type: Object,
            computed: '_createRef(firebaseUrl)'
          }
        };
      }

      ready() {
        super.ready();
        this.addEventListener('popstate', () => this._checkout.close());
        window.addEventListener('paperfire-stripe-checkout', (e) => this.open(e.detail));
      }

      disconnectedCallback() {
        super.disconnectedCallback();
        window.removeEventListener('paperfire-stripe-checkout');
      }

      open(passedConfig) {
        if (!this.pubKey) {
          console.error('Error: No stripe publishable key found');
          return;
        }
        if (this.debug) {
          console.log('PAPERFIRE_STRIPE:checkout opened');
        }

        let config = {
          amount: this.amount,
          billingAddress: this.billingAddress,
          description: this.description,
          image: this.image,
          key: this.pubKey,
          locale: this.locale,
          name: this.name,
          zipCode: this.zipCode,
        };
        if (this.email) {
          config['email'] = this.email;
        }

        this._checkout.open(Object.assign({}, config, passedConfig));
      }

      _createRef(url) {
        if (url && firebase) {
          return firebase.database().ref(url);
        } else {
          console.error('PAPERFIRE_STRIPE: cannot access firebase');
        }
      }

      _initCheckout(pubKey) {
        const vm = this;
        if (this.debug) {
          console.info('init: <paperfire-stripe>', {
            allowRememberMe: this.allowRememberMe,
            amount: this.amount,
            billingAddress: this.billingAddress,
            bitcoin: this.bitcoin,
            currency: this.currency,
            description: this.description,
            email: this.email,
            firebaseUrl: this.firebaseUrl,
            image: this.image,
            locale: this.locale,
            name: this.name,
            pubKey: pubKey,
            shippingAddress: this.shippingAddress,
            zipCode: this.zipCode
          });
        }
        return StripeCheckout.configure({
          allowRememberMe: this.allowRememberMe,
          currency: this.currency,
          billingAddress: this.billingAddress || this.shippingAddress,
          bitcoin: this.bitcoin,
          key: pubKey,
          image: this.image,
          currency: this.currency,
          shippingAddress: this.shippingAddress,
          locale: this.locale,
          zipCode: this.zipCode,
          token: (token) => {
            if (vm.debug) {
              console.log('PAPERFIRE_STRIPE:token', token);
            }
            /**
             * Fired when `paperfire-stripe` receives the Stripe response.
             *
             * @event paperfire-stripe-token
             * @param {object} token The stripe response. Access the transaction token with token.id.
             */
            vm.dispatchEvent(new CustomEvent('paperfire-stripe-token', {
              detail: token,
              bubbles: true,
              composed: true
            }));
            if (vm._ref) {
              vm._ref.push(token).then(() => {
                if (vm.debug) {
                  console.log('PAPERFIRE_STRIPE:push success');
                }
                /**
                 * Fired when `paperfire-stripe` pushes the stripe response to firebase.
                 *
                 * @event paperfire-stripe-pushed
                 */
                vm.dispatchEvent(new CustomEvent('paperfire-stripe-pushed', {
                  detail: token,
                  bubbles: true,
                  composed: true
                }));
              }).catch(err => {
                console.error('PAPERFIRE_STRIPE:firebase push error', err);
              });
            }
          }
        });
      }
    }

    window.customElements.define(PaperfireStripe.is, PaperfireStripe);
  </script>
</dom-module>