Card
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 a payment.
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="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. |
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. |
Methods
You can access thes 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. |