Payment

Easy to implement custom payment elements by Stripe.

Demo
​Live Demo​
1. Generate ClientSecret [backend]
ClientSecret is required to render the Payment UI. You first have to generate one by creating a PaymentIntent. See how here.
The ClientSecret looks like this pi_3KIBJd...MLhhr1DIBc5qg_secret_skk...3HIXCXtGjDA
2. Render Payment UI [frontend]
Import the component like so:
<template>
  <!-- stripe-element-payment -->
</template>
​
<script>
import { StripeElementPayment } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementPayment,
  },
};
</script>
Full code example:
<template>
  <div>
    <stripe-element-payment
      ref="paymentRef"
      :pk="pk"
      :elements-options="elementsOptions"
      :confirm-params="confirmParams"
    />
    <button @click="pay">Pay Now</button>
  </div>
</template>
​
<script>
import { StripeElementPayment } from '@vue-stripe/vue-stripe';
export default {
  components: {
    StripeElementPayment,
  },
  data () {
    return {
      pk: 'your-publishable-key',
      elementsOptions: {
        appearance: {}, // appearance options
      },
      confirmParams: {
        return_url: 'http://localhost:8080/success', // success url
      },
    };
  },
  mounted () {
    this.generatePaymentIntent();
  },
  methods: {
    async generatePaymentIntent () {
      const paymentIntent = await apiCallToGeneratePaymentIntent(); // this is just a dummy, create your own API call
      this.elementsOptions.clientSecret = paymentIntent.client_secret;
    },
    pay () {
      this.$refs.paymentRef.submit();
    },
  },
};
</script>
For a more comprehensive tutorial, go here https://stripe.com/docs/payments/quickstart​
Props
Name
Type
Default
Required
Description
pk
string
none
Stripe's publishable key, you can retrieve this from your Stripe dashboard.
testMode
boolean
false
Add this if you want to bypass the insecure host warning when testing to a non-localhost or non-https links.
​elementsOptions​
Object
none
A set of options to create this Elements instance with.
​confirmParams​
Object
none
A set of options to confirm a PaymentIntent.
​stripeAccount​
string
none
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
Override your account's API version.
​locale​
string
none
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.
​disableAdvancedFraudDetection​
boolean
false
Disables the advanced fraud detection feature.
Methods
Name
Return Type
Description
submit()
void
Submits the payment
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.
collapse()
void
Collapses the Payment Element into a row of payment method tabs
getElement()
Object
Retrieves a previously created element
update()
void
Updates the element. See official docs for more detail: https://site-admin.stripe.com/docs/js/elements_object/update_payment_element
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	Description
pk	string	none	Stripe's publishable key, you can retrieve this from your Stripe dashboard.
testMode	boolean	false	Add this if you want to bypass the insecure host warning when testing to a non-localhost or non-https links.
elementsOptions	Object	none	A set of options to create this Elements instance with.
confirmParams	Object	none	A set of options to confirm a PaymentIntent.
stripeAccount	string	none	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	Override your account's API version.
locale	string	none	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.
disableAdvancedFraudDetection	boolean	false	Disables the advanced fraud detection feature.

Name	Return Type	Description
submit()	void	Submits the payment
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.
collapse()	void	Collapses the Payment Element into a row of payment method tabs
getElement()	Object	Retrieves a previously created element
update()	void	Updates the element. See official docs for more detail: https://site-admin.stripe.com/docs/js/elements_object/update_payment_element

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.

Card

Vue Stripe Plugin

Last modified 11mo ago