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.
An object containing additional payment information you might have collected. Although these fields are optional, we highly recommend collecting name and address.
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.
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.
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.