Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@kenkou/vue-stripe-elements

Package Overview
Dependencies
2
Maintainers
1
Versions
3
Issues
File Explorer

Advanced tools

@kenkou/vue-stripe-elements

A Vue wrapper for stripe elements. This library was inspired in [fromAtoB/vue-stripe-elements](https://github.com/fromatob/vue-stripe-elements), but has the following improvements:

    2.0.0latest

Version published
Maintainers
1
Yearly downloads
6,976
increased by9.82%

Weekly downloads

Readme

Source

NPM npm

@kenkou/vue-stripe-elements

A Vue wrapper for stripe elements. This library was inspired in fromAtoB/vue-stripe-elements, but has the following improvements:

  • No need to previously setup stripe.js: is injected at runtime, currently v3. If it is already configured it works as well.
  • No custom api defined: you can access the stripe.js instance by calling getStripe (returns a Promise) and then usestripe.js api itself.

Install

npm install --save @kenkou/vue-stripe-elements

or

yarn add @kenkou/vue-stripe-elements

Usage

Stripe official javascript library stripe.js v3 will be automatically injected if window.Stripe global variable is not set.

<Stripe spk="pk_test_xxxxxxxxxxxxxxxxx"> ... <Elements> <card-number ref="cardNumber" /> ... <card-cvc /> ... <card-expiry /> </Elements> ... </Stripe>

To access the stripe element created in each component call the element() method. To access the stripe instance use getStripe to get a promise to it. For example, to tokenize a card do:

<script> import { getStripe } from '@kenkou/vue-stripe-elements' export default { ... methods: { async tokenize() { // get one of the stripe elements created const cardNumber = this.$refs.cardNumber.element() // see the https://stripe.com/docs/stripe-js/reference api const stripe = await getStripe() const result = await stripe.createToken(cardNumber) console.log('tokenized element', result) } } </script>

See src/App.vue for a complete example.

Live demo

We got a free demo for you!

Edit Vue Template

Remember to set the spk value inside data() function.

Building and running on localhost

First install dependencies:

yarn install

To run App.vue example:

yarn serve

To create a production build:

yarn build

Built with love at KenKou.

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc