vue-stripe-elements-plus

    1.0.3 • Public • Published

    Vue Stripe Elements

    Flexible and powerful Vue components for Stripe. It's a glue between Stripe.js and Vue component lifecycle.

    • Vue 2 component collection: stable
    • Vue 3: use vue-stripe-js

    Quickstart

    1. Install package:

    # npm
    npm i vue-stripe-elements-plus --save-dev
    
    # yarn
    yarn add vue-stripe-elements-plus --dev

    2. Add Stripe.js library to the page:

    <script src="https://js.stripe.com/v3/"></script>
    

    Alternatively, you can load Stripe library dynamically. Just make sure it's ready before your components mount.

    3. Use built-in components

    Create card

    <template>
      <div class="payment-simple">
        <StripeElements
          :stripe-key="stripeKey"
          :instance-options="instanceOptions"
          :elements-options="elementsOptions"
          #default="{ elements }" // attention: important part!
          ref="elms"
        >
          <StripeElement
            type="card"
            :elements="elements"
            :options="cardOptions"
            ref="card"
          />
        </StripeElements>
        <button @click="pay" type="button">Pay</button>
      </div>
    </template>
    
    <script>
    import { StripeElements, StripeElement } from 'vue-stripe-elements-plus'
    
    export default {
      name: 'PaymentSimple',
    
      components: {
        StripeElements,
        StripeElement
      },
    
      data () {
        return {
          stripeKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', // test key, don't hardcode
          instanceOptions: {
            // https://stripe.com/docs/js/initializing#init_stripe_js-options
          },
          elementsOptions: {
            // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
          },
          cardOptions: {
            // reactive
            // remember about Vue 2 reactivity limitations when dealing with options
            value: {
              postalCode: ''
            }
            // https://stripe.com/docs/stripe.js#element-options
          }
        }
      },
    
      methods: {
        pay () {
          // ref in template
          const groupComponent = this.$refs.elms
          const cardComponent = this.$refs.card
          // Get stripe element
          const cardElement = cardComponent.stripeElement
    
          // Access instance methods, e.g. createToken()
          groupComponent.instance.createToken(cardElement).then(result => {
            // Handle result.error or result.token
          })
        }
      }
    }
    </script>

    4. Get advanced

    Create multiple elements

    <StripeElements
      :stripe-key="stripeKey"
      :instance-options="instanceOptions"
      :elements-options="elementsOptions"
      #default="{ elements }" // attention: important part!
    >
      <StripeElement
        type="cardNumber"
        :elements="elements"
        :options="cardNumberOptions"
      />
      <StripeElement
        type="postalCode"
        :elements="elements"
        :options="postalCodeOptions"
      />
    </StripeElements>

    5. Go wild

    You can even create multiple groups, don't ask me why. It's possible.

    <StripeElements
      :stripe-key="stripeKey1"
      :instance-options="instanceOptions1"
      :elements-options="elementsOptions1"
      #default="{ elements }" // attention: important part!
    >
      <StripeElement
        :elements="elements"
        :options="cardOptions"
      />
    </StripeElements>
    <StripeElements
      :stripe-key="stripeKey2"
      :instance-options="instanceOptions2"
      :elements-options="elementsOptions2"
      #default="{ elements }" // attention: important part!
    >
      <StripeElement
        type="iban"
        :elements="elements"
        :options="ibanOptions"
      />
    </StripeElements>

    Styles

    No base style included. Main reason: overriding it isn't fun. Style as you wish via element options: see details.

    API Reference

    StripeElements.vue

    Think of it as of individual group of elements. It creates stripe instance and elements object.

    import { StripeElements } from 'vue-stripe-elements-plus'

    props

    // https://stripe.com/docs/js/initializing#init_stripe_js-options
    stripeKey: {
      type: String,
      required: true,
    },
    // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
    instanceOptions: {
      type: Object,
      default: () => ({}),
    },
    // https://stripe.com/docs/stripe.js#element-options
    elementsOptions: {
      type: Object,
      default: () => ({}),
    },

    data

    You can access instance and elements by adding ref to StripeElements component.

    // data of StripeElements.vue
    instance: {},
    elements: {},

    default scoped slot

    Elegant solution for props. Really handy because you can make instance and elements available to all children without adding extra code.

    <!-- Isn't it cool? I really like it! -->
    <StripeElements #default="{elements, instance}">
      <StripeElement :elements="elements" />
      <CustomComponent :instance="instance" />
    </StripeElements>

    StripeElement.vue

    Universal and type agnostic component. Create any element supported by Stripe.

    props

    // elements object
    // https://stripe.com/docs/js/elements_object/create
    elements: {
      type: Object,
      required: true,
    },
    // type of the element
    // https://stripe.com/docs/js/elements_object/create_element?type=card
    type: {
      type: String,
      default: () => 'card',
    },
    // element options
    // https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
    options: {
      type: [Object, undefined],
    },

    data

    stripeElement
    domElement

    options

    Element options are reactive. Recommendation: don't use v-model on StripeElement, instead pass value via options.

    data() {
      return {
        elementOptions: {
          value: {
            postalCode: ''
          }
        }
      }
    },
    
    methods: {
      changePostalCode() {
        // will update stripe element automatically
        this.elementOptions.value.postalCode = '12345'
      }
    }

    events

    Following events are emitted on StripeElement

    • change
    • ready
    • focus
    • blur
    • escape
    <StripeElement
      :elements="elements"
      @blur="doSomething"
    />

    Helpers

    In case you like the manual gearbox. Check stripeElements.js for details.

    import { initStripe, createElements, createElement } from 'vue-stripe-elements-plus'

    Install

    npm i vue-stripe-elements-plus

    DownloadsWeekly Downloads

    13,175

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    41 kB

    Total Files

    19

    Last publish

    Collaborators

    • softbeehive