@kenkou/vue-stripe-elements - npm Package Compare versions

@kenkou/vue-stripe-elements

Package Overview

Dependencies

Maintainers

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.0.0 to 1.1.0

src/components/Elements.vue

package.json

		{
		"name": "@kenkou/vue-stripe-elements",
		"version": "1.0.0",
		"version": "1.1.0",
		"private": false,
		@@ -8,6 +8,18 @@ "main": "dist/lib.common.js",
		"unpkg": "dist/lib.umd.js",
		"keywords": [
		"vue",
		"stripe",
		"elements",
		"payment"
		],
		"author": {
		"url": "https://www.kenkou.de",
		"name": "Kenkou GmbH"
		},
		"license": "MIT",
		"homepage": "https://github.com/KenkouGmbH/vue-stripe-elements",
		"scripts": {
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build --target lib --name lib src/lib.js",
		"lint": "vue-cli-service lint"
		"lint": "vue-cli-service lint --fix"
		},
		@@ -14,0 +26,0 @@ "dependencies": {

README.md

		@@ -0,1 +1,4 @@
		[![NPM](https://nodei.co/npm/@kenkou/vue-stripe-elements.png)](https://nodei.co/npm/@kenkou/vue-stripe-elements/)
		[![npm](https://img.shields.io/npm/dm/@kenkou/vue-stripe-elements.svg?style=flat-square)](https://www.npmjs.com/package/@kenkou/vue-stripe-elements)

		# @kenkou/vue-stripe-elements
		@@ -26,13 +29,11 @@
		<Elements spk="pk_test_xxxxxxxxxxxxxxxxx">
		<div slot-scope="{ elements }">
		<card-number :elements="elements" ref="cardNumber"></card-number>
		...
		<card-cvc :elements="elements" ref="cardCvc"></card-cvc>
		...
		<card-expiry :elements="elements" ref="cardExpiry"></card-expiry>
		</div>
		<card-number ref="cardNumber" />
		...
		<card-cvc />
		...
		<card-expiry />
		</Elements>
		```

		Notice the usage of `slot-scope="{ elements }"`, which makes the `elements = stripe.elements(options)` variable available for the children. 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:
		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:

		@@ -60,2 +61,10 @@ ```js

		## Live demo

		We got a free demo for you!

		[![Edit Vue Template](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-template-7wqy3?fontsize=14)

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

		## Building and running on localhost
		@@ -62,0 +71,0 @@

src/components/Element.js

		import Vue from 'vue'

		const element = {
		inject: ['elements'],
		// please see https://stripe.com/docs/elements/reference for details
		props: {
		elements: {
		/*elements: {
		type: Promise, // stripe elements promise
		required: true
		},
		},*/
		value: {
		@@ -11,0 +12,0 @@ type: String,

src/components/Elements.js

dist/lib.common.js

Sorry, the diff of this file is too big to display

src/App.vue

Sorry, the diff of this file is not supported yet

Fixed alerts

Improved metrics