An example of a component for using Stripe Elements with parasails / Vue.js (`<stripe-card-element>`)

stripe-card-element.component.js

/**
 * <stripe-card-element>
 * -----------------------------------------------------------------------------
 * A wrapper for the Stripe Elements "card" component (https://stripe.com/elements)
 *
 * Example usage:
 * ```
 * <stripe-card-element stripePublishableKey="…" v-model="formData.cardInfo"></stripe-card-element>
 * ```
 *
 * @type {Component}
 *
 * @event input        [emitted when the stripe token changes (supports v-model)]
 *        @param {Dictionary}
 *               @property {String} stripeToken
 *               @property {String} billingCardBrand
 *               @property {String} billingCardLast4
 * @event invalidated  [emitted when the field had been changed to include an invalid value]
 * @event validated    [emitted when the field had been changed to include a valid value]
 * -----------------------------------------------------------------------------
 */

parasails.registerComponent('stripeCardElement', {

  //  ╦╔╗╔╔╦╗╔═╗╦═╗╔═╗╔═╗╔═╗╔═╗
  //  ║║║║ ║ ║╣ ╠╦╝╠╣ ╠═╣║  ║╣
  //  ╩╝╚╝ ╩ ╚═╝╩╚═╚  ╩ ╩╚═╝╚═╝
  props: [
    'stripePublishableKey',
    'isErrored',
    'errorMessage',//« optional custom error message to display
    'value',//« the v-model passed in.
    'showExisting',// « whether to show the existing card info passed into `v-model`
  ],

  //  ╔╦╗╔═╗╦═╗╦╔═╦ ╦╔═╗
  //  ║║║╠═╣╠╦╝╠╩╗║ ║╠═╝
  //  ╩ ╩╩ ╩╩╚═╩ ╩╚═╝╩
  template: `
  <div>
    <div v-if="existingCardData">
      <span class="existing-card">{{existingCardData.billingCardBrand}} ending in <strong>{{existingCardData.billingCardLast4}}</strong></span>
      <small class="new-card-text d-inline-block ml-2">(Want to use a different card ? <a class="text-info change-card-button" type="button" @click="clickChangeExistingCard()">Click here</a>.)</small>
    </div>
    <div class="card-element form-control" :class="[existingCardData ? 'secret-card-element' : '', isErrored ? 'is-invalid' : '']" :aria-hidden="existingCardData ? true : false">
      <div card-element></div>
      <span class="status-indicator syncing text-info" :class="[isSyncing ? '' : 'hidden']"><span class="fa fa-spinner"></span></span>
      <span class="status-indicator text-info" :class="[isValidated ? '' : 'hidden']"><span class="fa fa-check-circle"></span></span>
    </div>
    <div class="invalid-feedback" v-if="!existingCardData && isErrored">{{ errorMessage || 'Please check your card info.'}}</div>
  </div>
  `,

  //  ╔═╗╔╦╗╔═╗╔╦╗╔═╗
  //  ╚═╗ ║ ╠═╣ ║ ║╣
  //  ╚═╝ ╩ ╩ ╩ ╩ ╚═╝
  data: function (){
    return {
      isSyncing: false,
      isValidated: false,
      existingCardData: undefined,
      // The underlying Stripe instance
      _stripe: undefined,
      // The underlying Stripe elements instance
      _elements: undefined,
      // The underlying Stripe element instance this component creates as it mounts.
      _element: undefined,
    };
  },
  //  ╦  ╦╔═╗╔═╗╔═╗╦ ╦╔═╗╦  ╔═╗
  //  ║  ║╠╣ ║╣ ║  ╚╦╝║  ║  ║╣
  //  ╩═╝╩╚  ╚═╝╚═╝ ╩ ╚═╝╩═╝╚═╝
  beforeMount: function() {
    // Initialize an instance of Stripe "elements", which we'll pass into
    // our <stripe-element> component instances.
    // (We also save an instance of `stripe` for use below.)
    this._stripe = Stripe(this.stripePublishableKey);
    this._elements = this._stripe.elements();
  },

  mounted: function (){

    if(this.showExisting && _.isObject(this.value) && this.value.stripeToken && this.value.billingCardBrand && this.value.billingCardLast4) {
      this.existingCardData = _.extend({}, this.value);
    }

    this._element = this._elements.create('card', {
      classes: {
        // When the iframe is focused, attach the "pseudofocused" class
        // to our wrapper <div>.
        focus: 'pseudofocused'
      },
      // IFrame styles:
      style: {
        base: {
          fontSize: '16px',
          color: '#495057',
          fontFamily: '\'Roboto\', sans-serif',
          '::placeholder': {
            // ...
          },
        }
      },
    });

    this._element.mount($(this.$el).find('[card-element]')[0]);

    //  When a change occurs, immediately clear the token by
    //  emitting an input event with '', show a loading spinner, and start
    //  fetching a new token. Then in userland, the validation error for a missing
    //  card becomes something reasonable that implies that we may not have finished
    //  getting it yet, so hold your horses.
    this._element.on('change', (stripeEvent)=> {

      // If there is an error, set the v-model to be empty.
      if(stripeEvent.error) {
        this.$emit('input', '');
      } else if(stripeEvent.complete) {
        // If the field is complete, (aka valid), fetch a token and set that on the v-model
        // (first clearing out the v-model, so this won't be considered valid yet e.g. if it was just changed.
        if(this.isSyncing) { return; }

        this.$emit('input', '');
        this.isSyncing = true;
        this.isValidated = false;
        this._fetchNewToken();

      } else {
        // FUTURE: possibly handle other events, if necessary.
      }//fi

    });//œ

  },

  beforeDestroy: function (){
    // Note: There isn't any documented way to tear down a `stripe` instance.
    // Same thing for the `elements` instance.  Only individual "element" instances
    // can be cleaned up after, using `.unmount()`.
    this._element.unmount();
  },

  //  ╔═╗╦  ╦╔═╗╔╗╔╔╦╗╔═╗
  //  ║╣ ╚╗╔╝║╣ ║║║ ║ ╚═╗
  //  ╚═╝ ╚╝ ╚═╝╝╚╝ ╩ ╚═╝
  methods: {


    clickChangeExistingCard: function() {
      this.existingCardData = undefined;
      this.$emit('input', '');
    },

    // Public method for fetching a fresh token (e.g. if card is declined)
    doGetNewToken: function() {
      this.isSyncing = true;
      this.isValidated = false;
      this.$emit('input', '');
      this._fetchNewToken();
    },

    _fetchNewToken: function() {
      this._getStripeTokenFromCardElement(this._stripe, this._element)
      .then((paymentSourceInfo)=>{
        this.isSyncing = false;
        this.isValidated = true;
        this.$emit('input', paymentSourceInfo);

      }).catch((err)=>{
        this.isSyncing = false;
        this.isValidated = false;
        // This error is only relevant if something COMPLETELY unexpected goes wrong,
        // in which case we want to actually know about that.
        throw err;
      });//_∏_
    },

    _getStripeTokenFromCardElement: function(stripeInstance, stripeElement) {

      // Build a Promise & send it back as our "thenable" (AsyncFunction's return value).
      // (this is necessary b/c we're wrapping an api that isn't `await`-compatible)
      return new Promise((resolve, reject)=>{
        try {
          // Create a stripe token using the Stripe "element".
          stripeInstance.createToken(stripeElement)
          .then((result)=>{
            // Silently ignore the case where the field is empty, or if there are
            // card validation issues.
            if(!result || result.error) {
              resolve();
              return;
            }

            // Send back the token & payment info.
            resolve({
              stripeToken: result.token.id,
              billingCardBrand: result.token.card.brand,
              billingCardLast4: result.token.card.last4,
              billingCardExpMonth: result.token.card.exp_month,
              billingCardExpYear: result.token.card.exp_year
            });
          });
        } catch (err) {
          console.error('Could not obtain Stripe token:', err);
          reject(err);
        }
      });//_∏_
    }
  }

});

woopwooop

let thereBeLight = handleBarCrotchOnSight

@BasketCase808 😄 latest versions here: https://github.com/balderdashy/sails-generate/tree/master/lib/core-generators/new/templates/assets/js/components

Ah cheers. Amazing system you've built here, very niche. I'l be investing much of this winter rattling through every directory on the boilerplate. Thanks again and keep up the good work (y)

You bet! Cool to meet you.

And you my mate (y)