ectoflow / Vue Stripe Elements
Licence: mit
A Vue 2 component collection for StripeElements
Stars: ✭ 498
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Stripe Elements
Mui Vue2
mui+mint+vue2.x+vue-router+vuex+webpack最终打包成原生apk的app项目,样式使用vue移动端mint ui框架,原生手机能力偏重于mui框架,欢迎star!
Stars: ✭ 278 (-44.18%)
Mutual labels: vue-components, vuejs2
Quasar
Quasar Framework - Build high-performance VueJS user interfaces in record time
Stars: ✭ 20,090 (+3934.14%)
Mutual labels: vue-components, vuejs2
Vue Cnodejs
基于vue.js重写Cnodejs.org社区的webapp
Stars: ✭ 3,065 (+515.46%)
Mutual labels: vue-components, vuejs2
Vue Touch Ripple
👆 Touch ripple component for @vuejs
Stars: ✭ 443 (-11.04%)
Mutual labels: vue-components, vuejs2
Vue Material Dashboard
Vue Material Dashboard - Open Source Material Design Admin
Stars: ✭ 403 (-19.08%)
Mutual labels: vue-components, vuejs2
Vuejs Component Style Guide
Vue.js Component Style Guide
Stars: ✭ 2,796 (+461.45%)
Mutual labels: vue-components, vuejs2
Vue Page Transition
A lightweight Vue.js plugin for page / route transitions.
Stars: ✭ 311 (-37.55%)
Mutual labels: vue-components, vuejs2
Vue Video Player
🎞 @videojs component for @vuejs
Stars: ✭ 4,026 (+708.43%)
Mutual labels: vue-components, vuejs2
Stripe Webhook Monitor
Stripe Webhook Monitor provides a real-time feed and graph of Stripe events received via webhooks. 📈✨
Stars: ✭ 356 (-28.51%)
Mutual labels: stripe-api, stripe
Tui
This is a high quanlity components library for VUE
Stars: ✭ 258 (-48.19%)
Mutual labels: vue-components, vuejs2
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (-8.43%)
Mutual labels: vue-components, vuejs2
vue-notification-bell
Vue.js notification bell component.
Stars: ✭ 64 (-87.15%)
Mutual labels: vuejs2, vue-components
Formvuelar
Vue form components with server-side validation in mind
Stars: ✭ 263 (-47.19%)
Mutual labels: vue-components, vuejs2
Nest-Js-Boiler-Plate
Nest Js Boilerplate with JWT authentication, CRUD functions and payment gateways.
Stars: ✭ 14 (-97.19%)
Mutual labels: stripe, stripe-api
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (-39.56%)
Mutual labels: vue-components, vuejs2
stripe-course
Stripe Payments In Practice - Build your own online ecommerce store and subscription membership website
Stars: ✭ 31 (-93.78%)
Mutual labels: stripe, stripe-api
procesa-pagos-con-laravel
Código fuente resultado del curso "Procesa pagos con Laravel y las mejores plataformas de pagos"
Stars: ✭ 38 (-92.37%)
Mutual labels: stripe, stripe-api
Vue Goodshare
🍿 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.
Stars: ✭ 345 (-30.72%)
Mutual labels: vue-components, vuejs2
Stripe Connect Rocketrides
Sample on-demand platform built on Stripe: Connect onboarding for pilots, iOS app for passengers to request rides.
Stars: ✭ 426 (-14.46%)
Mutual labels: stripe-api, stripe
Vue Stripe Elements
A Vue 2 component collection for stripe elements.
Usage example
Install package:
$ npm i vue-stripe-elements-plus --save
Add Stripe.js library to index.html:
<script src="https://js.stripe.com/v3/"></script>
Build a Vue component using the Card element:
<template>
<div id='app'>
<h1>Please give us your payment details:</h1>
<card class='stripe-card'
:class='{ complete }'
stripe='pk_test_XXXXXXXXXXXXXXXXXXXXXXXX'
:options='stripeOptions'
@change='complete = $event.complete'
/>
<button class='pay-with-stripe' @click='pay' :disabled='!complete'>Pay with credit card</button>
</div>
</template>
<script>
import { stripeKey, stripeOptions } from './stripeConfig.json'
import { Card, createToken } from 'vue-stripe-elements-plus'
export default {
data () {
return {
complete: false,
stripeOptions: {
// see https://stripe.com/docs/stripe.js#element-options for details
}
}
},
components: { Card },
methods: {
pay () {
// createToken returns a Promise which resolves in a result object with
// either a token or an error key.
// See https://stripe.com/docs/api#tokens for the token object.
// See https://stripe.com/docs/api#errors for the error object.
// More general https://stripe.com/docs/stripe.js#stripe-create-token.
createToken().then(data => console.log(data.token))
}
}
}
</script>
<style>
.stripe-card {
width: 300px;
border: 1px solid grey;
}
.stripe-card.complete {
border-color: green;
}
</style>
Multiple elements
Even if it is recommended to use the unified Card element, single elements for each field are supported. The following example shows a possible use in a credit card component:
<template>
<div class='credit-card-inputs' :class='{ complete }'>
<card-number class='stripe-element card-number'
ref='cardNumber'
:stripe='stripe'
:options='options'
@change='number = $event.complete'
/>
<card-expiry class='stripe-element card-expiry'
ref='cardExpiry'
:stripe='stripe'
:options='options'
@change='expiry = $event.complete'
/>
<card-cvc class='stripe-element card-cvc'
ref='cardCvc'
:stripe='stripe'
:options='options'
@change='cvc = $event.complete'
/>
</div>
</template>
<script>
import { CardNumber, CardExpiry, CardCvc } from 'vue-stripe-elements-plus'
export default {
props: [ 'stripe', 'options' ],
data () {
return {
complete: false,
number: false,
expiry: false,
cvc: false
}
},
components: { CardNumber, CardExpiry, CardCvc },
methods: {
update () {
this.complete = this.number && this.expiry && this.cvc
// field completed, find field to focus next
if (this.number) {
if (!this.expiry) {
this.$refs.cardExpiry.focus()
} else if (!this.cvc) {
this.$refs.cardCvc.focus()
}
} else if (this.expiry) {
if (!this.cvc) {
this.$refs.cardCvc.focus()
} else if (!this.number) {
this.$refs.cardNumber.focus()
}
}
// no focus magic for the CVC field as it gets complete with three
// numbers, but can also have four
}
},
watch: {
number () { this.update() },
expiry () { this.update() },
cvc () { this.update() }
}
}
</script>
<style>
.credit-card-inputs.complete {
border: 2px solid green;
}
</style>
Supported Stripe Elements Functions
Function | Reference |
---|---|
createToken() | https://stripe.com/docs/stripe-js/reference#stripe-create-token |
createSource() | https://stripe.com/docs/stripe-js/reference#stripe-create-source |
retrieveSource() | https://stripe.com/docs/stripe-js/reference#stripe-retrieve-source |
paymentRequest() | https://stripe.com/docs/stripe-js/reference#stripe-payment-request |
redirectToCheckout() | https://stripe.com/docs/stripe-js/reference#stripe-redirect-to-checkout |
retrievePaymentIntent() | https://stripe.com/docs/stripe-js/reference#stripe-retrieve-payment-intent |
handleCardPayment() | https://stripe.com/docs/stripe-js/reference#stripe-handle-card-payment |
handleCardSetup() | https://stripe.com/docs/stripe-js/reference#stripe-handle-card-setup |
handleCardAction() | https://stripe.com/docs/stripe-js/reference#stripe-handle-card-action |
confirmPaymentIntent() | https://stripe.com/docs/stripe-js/reference#stripe-confirm-payment-intent |
createPaymentMethod() | https://stripe.com/docs/stripe-js/reference#stripe-create-payment-method |
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].