feat: process cards

Process card info to produce a Stripe token or source

Author: morphatic

README.md

@@ -2,8 +2,8 @@
 
 [![Build Status](https://travis-ci.org/morphatic/v-stripe-elements.svg?branch=master)](https://travis-ci.org/morphatic/v-stripe-elements)
 [![Coverage Status](https://coveralls.io/repos/github/morphatic/v-stripe-elements/badge.svg?branch=master)](https://coveralls.io/github/morphatic/v-stripe-elements?branch=master)
-![npm](https://img.shields.io/npm/v/@morphatic/v-stripe-elements.svg)
-![MIT](https://img.shields.io/npm/l/@morphatic/v-stripe-elements.svg)
+![npm](https://img.shields.io/npm/v/v-stripe-elements)
+![NPM](https://img.shields.io/npm/l/v-stripe-elements)
 [![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)
 
 A set of Vue components that styles [Stripe Elements](https://stripe.com/payments/elements) to match the [Vuetify UI library](https://vuetifyjs.com).
@@ -19,13 +19,13 @@ npm i -S v-stripe-elements
 Then in the `.env` file in the root of your project:
 
 ```sh
-VUE_APP_STRIPE_API_KEY=sk_live_4eC39HqLyjWDarjtT1zdp7dc
+VUE_APP_STRIPE_API_KEY=pk_live_4eC39HqLyjWDarjtT1zdp7dc
 ```
 
 Optionally, add your test key to `.env.local`. This will automatically use the test key when doing local development and testing.
 
 ```sh
-VUE_APP_STRIPE_API_KEY=sk_test_4eC39HqLyjWDarjtT1zdp7dc
+VUE_APP_STRIPE_API_KEY=pk_test_4eC39HqLyjWDarjtT1zdp7dc
 ```
 
 ## Basic Usage

dev/App.vue

@@ -21,30 +21,30 @@
           <v-col cols="6">
             <v-stripe-card
               v-model="source"
-
-              append-icon="mdi-check"
-              success
+              :api-key="apiKey"
+              :append-icon="source && icons.check"
+              create="source"
               label="Some label"
-              hint="Some hint"
+              :hint="source ? 'Card is valid' : 'Please enter card info'"
               persistent-hint
+              :success="!!source"
             />
           </v-col>
           <v-col cols="6">
             <v-text-field
-              success
               label="Some label"
               hint="Some hint"
               persistent-hint
+              :success="!!source"
             />
           </v-col>
         </v-row>
         <v-row>
           <v-col cols="6">
             <v-stripe-card
               v-model="source"
-              font="Shadows Into Light"
+              font-name="Shadows Into Light"
               solo
-              success
               :api-key="apiKey"
               label="Some label"
               hint="Some hint"
@@ -54,7 +54,6 @@
           <v-col cols="6">
             <v-text-field
               solo
-              success
               label="Some label"
               hint="Some hint"
               persistent-hint
@@ -64,9 +63,10 @@
         <v-row>
           <v-col cols="6">
             <v-stripe-card
-              v-model="source"
+              v-model="token"
               filled
-              success
+              font-name="Hepta Slab"
+              font-url="https://fonts.googleapis.com/css?family=Hepta+Slab:700&display=swap"
               :api-key="apiKey"
               label="Some label"
               hint="Some hint"
@@ -76,7 +76,6 @@
           <v-col cols="6">
             <v-text-field
               filled
-              success
               label="Some label"
               hint="Some hint"
               persistent-hint
@@ -88,7 +87,6 @@
             <v-stripe-card
               v-model="source"
               outlined
-              success
               :api-key="apiKey"
               label="Some label"
               hint="Some hint"
@@ -98,7 +96,6 @@
           <v-col cols="6">
             <v-text-field
               outlined
-              success
               label="Some reall long label"
               hint="Some hint"
               persistent-hint
@@ -111,7 +108,6 @@
               v-model="source"
               solo
               outlined
-              success
               :api-key="apiKey"
               label="Some label"
               hint="Some hint"
@@ -122,7 +118,6 @@
             <v-text-field
               solo
               outlined
-              success
               label="Some label"
               hint="Some hint"
               persistent-hint
@@ -136,17 +131,21 @@
 
 <script>
   // import { VStripeCard } from '../src/'
-
+  import { mdiCheck } from '@mdi/js'
   export default {
     // components: {
     //   VStripeCard,
     // },
     data: () => ({
       apiKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx',
       filled: false,
+      icons: {
+        check: mdiCheck,
+      },
       outlined: false,
       solo: false,
       source: null,
+      token: null,
     }),
   }
 </script>

package.json

@@ -77,6 +77,7 @@
     "css-loader": "^3.2.0",
     "cssnano": "^4.1.10",
     "cz-conventional-changelog": "3.0.2",
+    "deepmerge": "^4.0.0",
     "dotenv": "^8.0.0",
     "eslint": "^6.1.0",
     "eslint-loader": "^2.2.1",
@@ -113,7 +114,7 @@
     "vue-meta": "^2.2.1",
     "vue-plugin-load-script": "^1.2.0",
     "vue-template-compiler": "^2.6.10",
-    "vuetify": "^2.0.10",
+    "vuetify": "^2.0.11",
     "vuetify-loader": "^1.3.0",
     "webpack": "^4.39.2",
     "webpack-cli": "^3.3.6",