Card

The Card Element lets you collect card information all within one Element.

The Card Element lets you collect card information all within one Element. It includes a dynamically-updating card brand icon as well as inputs for number, expiry, CVC, and postal code. Get started with accepting payment.

Demo

Live Demo

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>

Example

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

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

<script>
import { StripeElementCard } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementCard,
  },
  data () {
    this.publishableKey = process.env.STRIPE_PUBLISHABLE_KEY;
    return {
      token: null,
    };
  },
  methods: {
    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

pk

string

none

Yes

Stripe's publishable key, you can retrieve this from your Stripe dashboard.

testMode

boolean

false

No

Add this if you want to bypass the insecure host warning when testing to a non-localhost or non-https links.

object

none

No

A set of options to create this Elements instance with.

object

none

No

An object containing additional payment information you might have collected. Although these fields are optional, we highly recommend collecting name and address.

boolean

false

No

Disables the advanced fraud detection feature.

object

none

No

Set custom class names on the container DOM element when the Stripe element is in a particular state.

object

none

No

Customize the appearance of this element using CSS properties passed in a Style object.

string

none

No

A 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.

boolean

false

No

Hide the postal code field. Default is false. If you are already collecting a full billing address or postal code elsewhere, set this to true.

string

default

No

Appearance of the icon in the Element. Either solid or default.

boolean

none

No

Hides the icon in the Element. Default is false.

boolean

none

No

Applies a disabled state to the Element such that user input is not accepted. Default is false.

string

none

No

For usage with Connect only. Specifying a connected account ID (e.g., acct_24BFMpJ1svR5A89k) allows you to perform actions on behalf of that account.

string

none

No

Override your account's API version.

string

auto

No

A locale used to globally configure localization in Stripe. Setting the locale here will localize error strings for all Stripe.js methods. It will also configure the locale for Elements and Checkout. Default is auto (Stripe detects the locale of the browser).

Note that Checkout supports a slightly different set of locales than Stripe.js.

Methods

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

NameReturn TypeDescription

blur()

void

Blurs the Element.

clear()

void

Clears the value(s) of the Element.

destroy()

void

Removes the Element from the DOM and destroys it. A destroyed Element can not be re-activated or re-mounted to the DOM.

focus()

void

Focuses the Element.

unmount()

void

Unmounts the Element from the DOM. Call element.mount to re-attach it to the DOM.

void

Updates the options the Element was initialized with. Updates are merged into the existing configuration.

Events

NameReturn TypeDescription

token

object

Emits the card source or the tokenized version of the user's card

loading

boolean

Emits the current loading state of the component.

error

object

Emits whatever error the component might encounter, especially the ones from Stripe.

element-change

void

The 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-ready

void

Triggered when the Element is fully rendered and can accept element.focus calls.

element-focus

void

Triggered when the Element gains focus.

element-blur

void

Triggered when the Element loses focus.

element-escape

void

Triggered when the escape key is pressed within an Element.

element-click

void

Triggered when the Element is clicked. This event is only emmited from a paymentRequestButton Element.

Last updated