Implement provide/inject & use vite v6

.github/workflows/ci.yml

@@ -1,33 +1,35 @@
 name: Vue Stripe.js CI
 
-on: [push, pull_request]
+on:
+  pull_request:
+  push:
+    branches:
+      - main
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
 
 jobs:
-  build:
+  ci:
     runs-on: ubuntu-latest
 
-    strategy:
-      matrix:
-        node-version: [16.x]
-
     steps:
-      - uses: actions/checkout@v2
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v2
+      - uses: actions/checkout@v4
+      
+      - name: Install pnpm
+        uses: pnpm/action-setup@v4
         with:
-          node-version: ${{ matrix.node-version }}
+          version: 9
 
-      - name: Cache NPM
-        uses: actions/cache@v2
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
+          node-version: 20
+          cache: 'pnpm'
 
       - name: Install dependencies
-        run: yarn
+        run: pnpm install
 
-      - name: Unit Tests
-        run: yarn test
+      - name: Run CI
+        run: pnpm run ci

.gitignore

@@ -1,4 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
 dist
-.DS_Store
+dist-ssr
 *.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar"]
+}

LICENSE

@@ -1,21 +1,20 @@
 MIT License
 
-Copyright (c) 2021 Oleksandr Bystrikov
+Copyright (c) 2021 - present, Oleksandr Bystrikov
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all
 copies or substantial portions of the Software.
 
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

biome.json

@@ -0,0 +1,39 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": ["dist"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "always",
+      "bracketSpacing": true,
+      "bracketSameLine": false,
+      "quoteStyle": "double",
+      "attributePosition": "multiline"
+    }
+  }
+}

examples/CardElement.vue

@@ -0,0 +1,85 @@
+<template>
+  <form @submit.prevent="handlePay">
+    <StripeElements
+      v-if="stripeLoaded"
+      class="py-3"
+      :stripe-key="publishableKey"
+      :instance-options="instanceOptions"
+      :elements-options="elementsOptions"
+      ref="elementsComponent"
+    >
+      <StripeElement
+        type="card"
+        :options="cardOptions"
+        ref="cardComponent"
+      />
+    </StripeElements>
+    <button 
+      class="w-full rounded-b bg-slate-600 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-500"
+    >
+      Pay now
+    </button>
+  </form>
+</template>
+
+<script setup lang="ts">
+import { loadStripe } from "@stripe/stripe-js"
+import type {
+  StripeCardElement,
+  StripeCardElementOptions,
+  StripeConstructorOptions,
+  StripeElementsOptions,
+} from "@stripe/stripe-js"
+import { onBeforeMount, ref, useTemplateRef } from "vue"
+import StripeElement from "../src/components/StripeElement.vue"
+import StripeElements from "../src/components/StripeElements.vue"
+
+const publishableKey = ref("pk_test_TYooMQauvdEDq54NiTphI7jx") // test key
+const instanceOptions = ref<StripeConstructorOptions>({
+  // https://stripe.com/docs/js/initializing#init_stripe_js-options
+})
+const elementsOptions = ref<StripeElementsOptions>({
+  // https://stripe.com/docs/js/elements_object/create#stripe_elements-options
+})
+const cardOptions = ref<StripeCardElementOptions>({
+  style: {
+    base: {},
+    invalid: {},
+  },
+  // https://stripe.com/docs/stripe.js#element-options
+})
+const stripeLoaded = ref(false)
+
+const elementsComponent = useTemplateRef("elementsComponent")
+const cardComponent = useTemplateRef("cardComponent")
+
+onBeforeMount(() => {
+  loadStripe(publishableKey.value).then(() => {
+    stripeLoaded.value = true
+  })
+})
+
+function handlePay() {
+  // You need to implement backend for creating PaymentIntent
+  // Learn more by reading https://docs.stripe.com/payments/card-element?lang=node
+  const stripeInstance = elementsComponent.value?.instance
+  const card = cardComponent.value?.stripeElement as StripeCardElement
+
+  // Let's skip to the point you got clientSecret
+  const clientSecret = "i_was_created_on_server"
+
+  stripeInstance
+    ?.confirmCardPayment(clientSecret, {
+      payment_method: {
+        card,
+      },
+    })
+    .then((payload) => {
+      if (payload.error) {
+        console.error(payload.error)
+      } else {
+        console.log("Great success!")
+      }
+    })
+}
+</script>

examples/CardOnly.vue → examples/CardElementLegacy.vue

@@ -2,32 +2,43 @@
   <StripeElements
     v-if="stripeLoaded"
     v-slot="{ elements }"
-    ref="elms"
     :stripe-key="stripeKey"
     :instance-options="instanceOptions"
     :elements-options="elementsOptions"
+    ref="elms"
+    class="py-3"
   >
-    <StripeElement ref="card" :elements="elements" :options="cardOptions" />
+    <StripeElement
+      :elements="elements"
+      :options="cardOptions"
+      ref="card"
+    />
   </StripeElements>
-  <button type="button" @click="pay">Pay</button>
+  <button
+    type="button"
+    @click="pay"
+    class="w-full rounded-b bg-slate-600 px-3 py-2 text-sm font-semibold text-white hover:bg-slate-500"
+  >
+    Pay now
+  </button>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onBeforeMount } from 'vue'
-import { loadStripe } from '@stripe/stripe-js'
-import StripeElements from '../src/components/StripeElements.vue'
-import StripeElement from '../src/components/StripeElement.vue'
+import { loadStripe } from "@stripe/stripe-js"
+import { defineComponent, onBeforeMount, ref } from "vue"
+import StripeElement from "../src/components/StripeElement.vue"
+import StripeElements from "../src/components/StripeElements.vue"
 
 export default defineComponent({
-  name: 'CardOnly',
+  name: "CardElement",
 
   components: {
     StripeElements,
     StripeElement,
   },
 
   setup() {
-    const stripeKey = ref('pk_test_TYooMQauvdEDq54NiTphI7jx') // test key
+    const stripeKey = ref("pk_test_TYooMQauvdEDq54NiTphI7jx") // test key
     const instanceOptions = ref({
       // https://stripe.com/docs/js/initializing#init_stripe_js-options
     })
@@ -37,7 +48,7 @@ export default defineComponent({
     const cardOptions = ref({
       // https://stripe.com/docs/stripe.js#element-options
       value: {
-        postalCode: '12345',
+        postalCode: "12345",
       },
     })
     const stripeLoaded = ref(false)
@@ -64,10 +75,16 @@ export default defineComponent({
 
   methods: {
     pay() {
+      /* 
+        WARNING:
+        legacy way to implement card payments,
+        for modern card example, see CardElement.vue
+      */
+
       // Get stripe element
       const cardElement = this.card.stripeElement
 
-      // Access instance methods, e.g. createToken()
+      // "instance" means Stripe Instance or Stripe object
       this.elms.instance.createToken(cardElement).then((result: object) => {
         // Handle result.error or result.token
         console.log(result)

examples/DemoApp.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="flex flex-col gap-y-12 container px-6 py-10 max-w-xl">
+    <h1 class="text-3xl font-semibold">Demo Vue Stripe.js</h1>
+
+    <section>
+      <h2 class="text-2xl font-semibold">Payment Element</h2>
+      <p class="pt-1 pb-6">Deferred flow -
+        <a
+          class="text-blue-700 hover:underline"
+          href="https://docs.stripe.com/payments/accept-a-payment-deferred?type=payment"
+        >read stripe guide</a>
+      </p>
+      <PaymentElementDeferred />
+    </section>
+
+    <section>
+      <h2 class="text-2xl font-semibold">Card Element</h2>
+      <p class="pt-1 pb-4">More recent example. Stripe recommends using Payment Element instead of the Card - 
+        <a
+          class="text-blue-700 hover:underline"
+          href="https://docs.stripe.com/payments/card-element?lang=node"
+        >read stripe guide</a>
+      </p>
+      <CardElement />
+    </section>
+
+    <section>
+      <h2 class="text-2xl font-semibold">Card Element (Legacy)</h2>
+      <p class="pt-1 pb-4">How we implemented card payments a few years ago.</p>
+      <CardElementLegacy />
+    </section>
+
+    <section>
+      <h2 class="text-2xl font-semibold">Express Checkout Element</h2>
+      <p class="pt-1 pb-4">Use your publishable key and enable relevant payment methods, e.g. PayPal - 
+        <a
+          class="text-blue-700 hover:underline"
+          href="https://docs.stripe.com/elements/express-checkout-element/accept-a-payment?lang=node"
+        >read stripe guide</a>
+      </p>
+      <ExpressCheckoutElement />
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CardElement from "./CardElement.vue"
+import CardElementLegacy from "./CardElementLegacy.vue"
+import ExpressCheckoutElement from "./ExpressCheckoutElement.vue"
+import PaymentElementDeferred from "./PaymentElementDeferred.vue"
+</script>