feat: complete payment example for deferred flow

Author: softbeehive

examples/DemoApp.vue

@@ -1,10 +1,12 @@
 <template>
   <div>
-    <h1>vue-stripe-js demo</h1>
+    <h1>Demo: Vue Stripe.js</h1>
 
     <section>
       <h2>Payment Element</h2>
-      <p>Deferred flow - add guide link</p>
+      <p>Deferred flow - 
+        <a href="https://docs.stripe.com/payments/accept-a-payment-deferred?type=payment">read full guide</a>
+      </p>
       <PaymentElement />
     </section>
 

examples/PaymentElement.vue

@@ -18,19 +18,21 @@
 </template>
 
 <script setup lang="ts">
-import { type StripeElementsOptionsMode, loadStripe } from "@stripe/stripe-js"
+import { loadStripe } from "@stripe/stripe-js"
+import type {
+  StripeElementsOptionsMode,
+  StripePaymentElementOptions,
+} from "@stripe/stripe-js"
 /**
  * DEFERRED PAYMENT
  * This Payment Element example is based on
  * https://docs.stripe.com/payments/accept-a-payment-deferred?type=payment
  */
-import { onBeforeMount, ref } from "vue"
+import { onBeforeMount, ref, useTemplateRef } from "vue"
 import StripeElement from "../src/components/StripeElement.vue"
 import StripeElements from "../src/components/StripeElements.vue"
 
-const stripeKey = ref(
-  "pk_test_51NH8GWJOvIxb7wA7NEsy1lurmkwPRypNibLx2Dhvq28h2VICCXViQ5UI85vrPDwRwitMCVQeQTEBQOFKcLhaAr7i00aEax8rAB",
-)
+const stripeKey = ref("pk_test_f3duw0VsAEM2TJFMtWQ90QAT")
 const instanceOptions = ref({
   // https://stripe.com/docs/js/initializing#init_stripe_js-options
 })
@@ -39,21 +41,54 @@ const elementsOptions = ref<StripeElementsOptionsMode>({
   mode: "payment",
   amount: 1099,
   currency: "eur",
+  appearance: {
+    theme: "flat",
+  },
 })
-const paymentElementOptions = ref({
+const paymentElementOptions = ref<StripePaymentElementOptions>({
   // https://stripe.com/docs/stripe.js#element-options
 })
 const stripeLoaded = ref(false)
+const clientSecret = ref("")
 
 // Define component refs
-const elementsComponent = ref()
-const paymentComponent = ref()
-
-function handleSubmit() {}
+const elementsComponent = useTemplateRef("elementsComponent")
+const paymentComponent = useTemplateRef("paymentComponent")
 
 onBeforeMount(() => {
   loadStripe(stripeKey.value).then(() => {
     stripeLoaded.value = true
+
+    // Good place to call your backend to create PaymentIntent
+    // Skipping to the point when you got client_secret
+
+    // clientSecret.value = client_secret
   })
 })
+
+async function handleSubmit() {
+  // Confirm the PaymentIntent using the details collected by the Payment Element
+  const stripeInstance = elementsComponent.value?.instance
+  const elements = elementsComponent.value?.elements
+
+  if (stripeInstance) {
+    const { error } = await stripeInstance.confirmPayment({
+      elements,
+      clientSecret: clientSecret.value,
+      confirmParams: {
+        return_url: "https://example.com/order/123/complete",
+      },
+    })
+
+    if (error) {
+      // This point is only reached if there's an immediate error when
+      // confirming the payment. Show the error to your customer (for example, payment details incomplete)
+      console.log(error)
+    } else {
+      // Your customer is redirected to your `return_url`. For some payment
+      // methods like iDEAL, your customer is redirected to an intermediate
+      // site first to authorize the payment, then redirected to the `return_url`.
+    }
+  }
+}
 </script>