Add payment example (#34)

* refactor: remove eslint and prettier

* refactor: use deno as new formatter

* docs(readme): add payment element example

* chore: prepare for 1.0.4

Author: softbeehive

.eslintrc.js

@@ -2,39 +2,43 @@
 
 # Vue Stripe.js
 
-Flexible and powerful Vue 3 components for Stripe. It's a glue between [Stripe.js](https://stripe.com/docs/js) and Vue component lifecycle.
+Flexible and powerful Vue 3 components for Stripe. It's a glue between
+[Stripe.js](https://stripe.com/docs/js) and Vue component lifecycle.
 
 # Quickstart
 
 ### 1. Install
 
 **npm**
+
 ```bash
 npm i vue-stripe-js @stripe/stripe-js
 ```
 
 **yarn**
+
 ```bash
 yarn add vue-stripe-js @stripe/stripe-js
 ```
 
 **pnpm**
+
 ```bash
 pnpm add vue-stripe-js @stripe/stripe-js
 ```
 
 ### 2. Load Stripe.js
 
 ```ts
-import { loadStripe } from '@stripe/stripe-js'
-import { defineComponent, ref, onBeforeMount } from 'vue'
+import { loadStripe } from "@stripe/stripe-js"
+import { defineComponent, onBeforeMount, ref } from "vue"
 
 export default defineComponent({
   // ...
   setup() {
     onBeforeMount(() => {
       const stripeLoaded = ref(false)
-      const stripePromise = loadStripe('your_key')
+      const stripePromise = loadStripe("your_key")
       stripePromise.then(() => {
         stripeLoaded.value = true
       })
@@ -43,15 +47,14 @@ export default defineComponent({
 })
 ```
 
-> Alternatively, you can load Stripe library by including script tag. Just make sure it's ready before your stripe components mount.
+> Alternatively, you can load Stripe library by including script tag. Just make
+> sure it's ready before your stripe components mount.
 
 ```
 <script src="https://js.stripe.com/v3/"></script>
 ```
 
-### 3. Use built-in components
-
-Create card
+### 3. Card payment (default)
 
 ```vue
 <template>
@@ -136,9 +139,39 @@ export default defineComponent({
 </script>
 ```
 
-### 4. Use multiple components
+### 4. Payment element (requires backend)
+
+1. Add server code by following
+   [stripe guide](https://docs.stripe.com/payments/quickstart?lang=node)
+1. Grab `clientSecret` from the payment intent
+1. Pass it to `elements-options`
+
+```vue
+<template>
+  <StripeElements
+    ...
+    :elements-options="elementsOptions"
+  >
+    <StripeElement
+      type="payment"
+      ...
+    />
+  </StripeElements>
+<template />
+```
+
+```ts
+const elementsOptions = ref({
+  clientSecret: "grab_it_from_payment_intent",
+  // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
+})
+```
+
+#### It works!
+
+<img width="840" alt="image" src="https://github.com/user-attachments/assets/0619f7b5-a70f-48a1-84c4-c75bf9fc6ded" />
 
-Create multiple elements
+### 5. Use elements like lego
 
 ```vue
 <StripeElements
@@ -160,29 +193,6 @@ Create multiple elements
 </StripeElements>
 ```
 
-### 5. Be super flexible
-
-You can even create multiple groups.
-
-```vue
-<StripeElements
-  v-slot="{ elements }"
-  :stripe-key="stripeKey1"
-  :instance-options="instanceOptions1"
-  :elements-options="elementsOptions1"
->
-  <StripeElement :elements="elements" :options="cardOptions" />
-</StripeElements>
-<StripeElements
-  v-slot="{ elements }"
-  :stripe-key="stripeKey2"
-  :instance-options="instanceOptions2"
-  :elements-options="elementsOptions2"
->
-  <StripeElement type="iban" :elements="elements" :options="ibanOptions" />
-</StripeElements>
-```
-
 # Types
 
 ```ts
@@ -199,10 +209,11 @@ import types {
 
 ## StripeElements.vue
 
-Think of it as of individual group of elements. It creates stripe instance and elements object.
+Think of it as of individual group of elements. It creates stripe instance and
+elements object.
 
 ```js
-import { StripeElements } from 'vue-stripe-js'
+import { StripeElements } from "vue-stripe-js"
 ```
 
 ### props
@@ -227,7 +238,8 @@ elementsOptions: {
 
 ### data
 
-You can access `instance` and `elements` by adding ref to StripeElements component.
+You can access `instance` and `elements` by adding ref to StripeElements
+component.
 
 ```js
 // StripeElements.vue exposes
@@ -240,7 +252,8 @@ You can access `instance` and `elements` by adding ref to StripeElements compone
 
 ### default scoped slot
 
-Elegant solution for props. Really handy because you can make stripe `instance` and `elements` objects available to all children without adding extra code.
+Elegant solution for props. Really handy because you can make stripe `instance`
+and `elements` objects available to all children without adding extra code.
 
 ```vue
 <!-- Cool, isn't it? -->
@@ -255,7 +268,7 @@ Elegant solution for props. Really handy because you can make stripe `instance`
 Universal and type agnostic component. Create any element supported by Stripe.
 
 ```js
-import { StripeElement } from 'vue-stripe-js'
+import { StripeElement } from "vue-stripe-js"
 ```
 
 ### props
@@ -295,7 +308,8 @@ import { StripeElement } from 'vue-stripe-js'
 
 ### options
 
-Element options are reactive. Recommendation: don't use v-model on `StripeElement`, instead pass value via options.
+Element options are reactive. Recommendation: don't use v-model on
+`StripeElement`, instead pass value via options.
 
 ```js
 setup() {
@@ -328,4 +342,5 @@ Following events are emitted on StripeElement
 
 # Styles
 
-No base style included. Main reason: overriding it isn't fun. Style as you wish via element options: [see details](https://stripe.com/docs/js/appendix/style).
+No base style included. Main reason: overriding it isn't fun. Style as you wish
+via element options: [see details](https://stripe.com/docs/js/appendix/style).

.prettierrc.js

@@ -0,0 +1,8 @@
+{
+  "fmt": {
+    "lineWidth": 80,
+    "indentWidth": 2,
+    "semiColons": false
+  }
+}
+

README.md

@@ -1,6 +1,6 @@
 {
   "name": "vue-stripe-js",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "Vue 3 components for Stripe.js: Elements & Checkout",
   "main": "./dist/vue-stripe.umd.js",
   "module": "./dist/vue-stripe.es.js",
@@ -12,10 +12,7 @@
     }
   },
   "types": "./types/vue-stripe.d.ts",
-  "files": [
-    "dist",
-    "types"
-  ],
+  "files": ["dist", "types"],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ectoflow/vue-stripe-js.git"
@@ -46,18 +43,11 @@
     "@stripe/stripe-js": "^1.21.1",
     "@types/node": "^17.0.33",
     "@types/stripe": "^8.0.417",
-    "@typescript-eslint/eslint-plugin": "^5.3.1",
-    "@typescript-eslint/parser": "^5.3.1",
     "@vitejs/plugin-vue": "^2.3.3",
     "@vue/compiler-sfc": "^3.0.5",
     "@vuedx/typecheck": "^0.7.4",
     "@vuedx/typescript-plugin-vue": "^0.7.4",
-    "eslint": "^8.2.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.0.3",
     "jest": "^27.3.1",
-    "prettier": "^2.3.0",
     "typescript": "^4.1.3",
     "vite": "^2.6.14",
     "vue": "^3.2.21"

deno.json

@@ -5,14 +5,12 @@
     }
   ],
   "settings": {
-    // Vue
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.defaultFormatter": "denoland.vscode-deno",
     "editor.formatOnSave": true,
     "editor.formatOnPaste": false,
-    "editor.codeActionsOnSave": {
-      "source.fixAll.eslint": true
-    },
-    "eslint.alwaysShowStatus": true,
-    "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"]
+    "editor.rulers": [
+      80
+    ],
+    "editor.wordWrap": "on",
   }
 }