Card

Live Demo

This one T-shirt product has two prices, $20 USD and €15 Euro.

1. Usage

Import and register the StripeElementCard component.

<template>
  <div>
    <stripe-element-card/>
  </div>
</template>

<script>
import { StripeElementCard } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementCard,
  },
};
</script>

2. Example

Below is an example on how to use StripeElementCard to generate a token.

<template>
  <div>
    <stripe-element-card
      ref="elementRef"
      :pk="pulishableKey"
      @token="tokenCreated"
    />
    <button @click="submit">Generate token</button>
  </div>
</template>

<script>
import { StripeElementCard } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementCard,
  },
  data () {
    this.pulishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    return {
      token: null,
    };
  },
  method: {
    submit () {
      // this will trigger the process
      this.$refs.elementRef.submit();
    },
    tokenCreated (token) {
      console.log(token);
      // handle the token
      // send it to your server
    },
  }
};
</script>

Props

NameTypeDefaultRequiredDescription
pkstringnoneyesStripe's publishable key, you can retrieve this from your Stripe dashboard.
elementsOptionsobjectnonenoA set of options to create this Elements instance with.
disableAdvancedFraudDetectionbooleanfalsenoDisables the advanced fraud detection feature.
classesobjectnonenoSet custom class names on the container DOM element when the Stripe element is in a particular state.
elementStyleobjectnonenoCustomize the appearance of this element using CSS properties passed in a Style object.
valuestringnonenoA pre-filled set of values to include in the input (e.g., {postalCode: '94110'}). Note that sensitive card information (card number, CVC, and expiration date) cannot be pre-filled.
hidePostalCodebooleanfalsenoHide the postal code field. Default is false. If you are already collecting a full billing address or postal code elsewhere, set this to true.
iconStylestringdefaultnoAppearance of the icon in the Element. Either solid or default.
hideIconbooleannonenoHides the icon in the Element. Default is false.
disabledbooleannonenoApplies a disabled state to the Element such that user input is not accepted. Default is false.

Methods

You can access thes methods via $refs, like so this.$refs.elementRef.destroy().

NameReturn TypeDescription
blur()voidBlurs the Element.
clear()voidClears the value(s) of the Element.
destroy()voidRemoves the Element from the DOM and destroys it. A destroyed Element can not be re-activated or re-mounted to the DOM.
focus()voidFocuses the Element.
unmount()voidUnmounts the Element from the DOM. Call element.mount to re-attach it to the DOM.
update()voidUpdates the options the Element was initialized with. Updates are merged into the existing configuration.

Events

NameReturn TypeDescription
tokenobjectEmits the card source or the tokenized version of the user's card
loadingbooleanEmits the current loading state of the component.
errorobjectEmits whatever error the component might encounter, especially the ones from Stripe.
element-changevoidThe change event is triggered when the Element's value changes. The event payload always contains certain keys, in addition to some Element-specific keys.
element-readyvoidTriggered when the Element is fully rendered and can accept element.focus calls.
element-focusvoidTriggered when the Element gains focus.
element-blurvoidTriggered when the Element loses focus.
element-escapevoidTriggered when the escape key is pressed within an Element.
element-clickvoidTriggered when the Element is clicked. This event is only emmited from a paymentRequestButton Element.