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
Name
Type
Default
Required
Description
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.
​elementsOptions​
object
none
No
A set of options to create this Elements instance with.
​tokenData​
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.
​disableAdvancedFraudDetection​
boolean
false
No
Disables the advanced fraud detection feature.
​classes​
object
none
No
Set custom class names on the container DOM element when the Stripe element is in a particular state.
​elementStyle​
object
none
No
Customize the appearance of this element using CSS properties passed in a Style object.
​value​
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.
​hidePostalCode​
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.
​iconStyle​
string
default
No
Appearance of the icon in the Element. Either solid or default.
​hideIcon​
boolean
none
No
Hides the icon in the Element. Default is false.
​disabled​
boolean
none
No
Applies a disabled state to the Element such that user input is not accepted. Default is false.
​stripeAccount​
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.
​apiVersion​
string
none
No
Override your account's API version.
​locale​
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().
Name
Return Type
Description
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.
​update()​
void
Updates the options the Element was initialized with. Updates are merged into the existing configuration.
Events
​
Name
Return Type
Description
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.

Name	Type	Default	Required	Description
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.
elementsOptions	object	none	No	A set of options to create this Elements instance with.
tokenData	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.
disableAdvancedFraudDetection	boolean	false	No	Disables the advanced fraud detection feature.
classes	object	none	No	Set custom class names on the container DOM element when the Stripe element is in a particular state.
elementStyle	object	none	No	Customize the appearance of this element using CSS properties passed in a Style object.
value	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.
hidePostalCode	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.
iconStyle	string	default	No	Appearance of the icon in the Element. Either solid or default.
hideIcon	boolean	none	No	Hides the icon in the Element. Default is false.
disabled	boolean	none	No	Applies a disabled state to the Element such that user input is not accepted. Default is false.
stripeAccount	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.
apiVersion	string	none	No	Override your account's API version.
locale	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.

Name	Return Type	Description
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.
update()	void	Updates the options the Element was initialized with. Updates are merged into the existing configuration.

Name	Return Type	Description
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.

Separate Card Fields

Payment

Last modified 9mo ago