Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
vue-stripe-elements-plus
Advanced tools
This package is no longer maintained. Vue 2 reached its end-of-life on December 31st, 2023.
# npm
npm i vue-stripe-elements-plus --save-dev
# yarn
yarn add vue-stripe-elements-plus --dev
<script src="https://js.stripe.com/v3/"></script>
Alternatively, you can load Stripe library dynamically. Just make sure it's ready before your components mount.
Create card
<template>
<div class="payment-simple">
<StripeElements
:stripe-key="stripeKey"
:instance-options="instanceOptions"
:elements-options="elementsOptions"
#default="{ elements }" // attention: important part!
ref="elms"
>
<StripeElement
type="card"
:elements="elements"
:options="cardOptions"
ref="card"
/>
</StripeElements>
<button @click="pay" type="button">Pay</button>
</div>
</template>
<script>
import { StripeElements, StripeElement } from 'vue-stripe-elements-plus'
export default {
name: 'PaymentSimple',
components: {
StripeElements,
StripeElement
},
data () {
return {
stripeKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', // test key, don't hardcode
instanceOptions: {
// https://stripe.com/docs/js/initializing#init_stripe_js-options
},
elementsOptions: {
// https://stripe.com/docs/js/elements_object/create#stripe_elements-options
},
cardOptions: {
// reactive
// remember about Vue 2 reactivity limitations when dealing with options
value: {
postalCode: ''
}
// https://stripe.com/docs/stripe.js#element-options
}
}
},
methods: {
pay () {
// ref in template
const groupComponent = this.$refs.elms
const cardComponent = this.$refs.card
// Get stripe element
const cardElement = cardComponent.stripeElement
// Access instance methods, e.g. createToken()
groupComponent.instance.createToken(cardElement).then(result => {
// Handle result.error or result.token
})
}
}
}
</script>
Create multiple elements
<StripeElements
:stripe-key="stripeKey"
:instance-options="instanceOptions"
:elements-options="elementsOptions"
#default="{ elements }" // attention: important part!
>
<StripeElement
type="cardNumber"
:elements="elements"
:options="cardNumberOptions"
/>
<StripeElement
type="postalCode"
:elements="elements"
:options="postalCodeOptions"
/>
</StripeElements>
You can even create multiple groups, don't ask me why. It's possible.
<StripeElements
:stripe-key="stripeKey1"
:instance-options="instanceOptions1"
:elements-options="elementsOptions1"
#default="{ elements }" // attention: important part!
>
<StripeElement
:elements="elements"
:options="cardOptions"
/>
</StripeElements>
<StripeElements
:stripe-key="stripeKey2"
:instance-options="instanceOptions2"
:elements-options="elementsOptions2"
#default="{ elements }" // attention: important part!
>
<StripeElement
type="iban"
:elements="elements"
:options="ibanOptions"
/>
</StripeElements>
No base style included. Main reason: overriding it isn't fun. Style as you wish via element options: see details.
Think of it as of individual group of elements. It creates stripe instance and elements object.
import { StripeElements } from 'vue-stripe-elements-plus'
// https://stripe.com/docs/js/initializing#init_stripe_js-options
stripeKey: {
type: String,
required: true,
},
// https://stripe.com/docs/js/elements_object/create#stripe_elements-options
instanceOptions: {
type: Object,
default: () => ({}),
},
// https://stripe.com/docs/stripe.js#element-options
elementsOptions: {
type: Object,
default: () => ({}),
},
You can access instance
and elements
by adding ref to StripeElements component.
// data of StripeElements.vue
instance: {},
elements: {},
Elegant solution for props. Really handy because you can make instance
and elements
available to all children without adding extra code.
<!-- Isn't it cool? I really like it! -->
<StripeElements #default="{elements, instance}">
<StripeElement :elements="elements" />
<CustomComponent :instance="instance" />
</StripeElements>
Universal and type agnostic component. Create any element supported by Stripe.
// elements object
// https://stripe.com/docs/js/elements_object/create
elements: {
type: Object,
required: true,
},
// type of the element
// https://stripe.com/docs/js/elements_object/create_element?type=card
type: {
type: String,
default: () => 'card',
},
// element options
// https://stripe.com/docs/js/elements_object/create_element?type=card#elements_create-options
options: {
type: [Object, undefined],
},
stripeElement
domElement
Element options are reactive. Recommendation: don't use v-model on StripeElement
, instead pass value via options.
data() {
return {
elementOptions: {
value: {
postalCode: ''
}
}
}
},
methods: {
changePostalCode() {
// will update stripe element automatically
this.elementOptions.value.postalCode = '12345'
}
}
Following events are emitted on StripeElement
<StripeElement
:elements="elements"
@blur="doSomething"
/>
In case you like the manual gearbox. Check stripeElements.js for details.
import { initStripe, createElements, createElement } from 'vue-stripe-elements-plus'
FAQs
Stripe Elements components for Vue
We found that vue-stripe-elements-plus demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.