✨ (payment) add payment test to about page

src/components/Payment.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="payment">
+    <Card
+      ref="stripeCard"
+      class="stripe-card"
+      :class="{ complete }"
+      stripe="pk_test_CO1FMasxNSwIX0P9FgzmDMyp"
+      @change="complete = $event.complete"
+    />
+    <button class="button is-primary" @click="pay" :disabled="!complete">
+      Payer par carte bleue
+    </button>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import {
+  Card,
+  createToken,
+  confirmPaymentIntent,
+  instance as Stripe
+} from 'vue-stripe-elements-plus'
+import IPaymentIntent from '@/models/IPaymentIntent'
+import IPayment from '@/models/IPayment'
+import notif from '@/utils/notif'
+
+@Component({
+  components: {
+    Card
+  }
+})
+export default class Payment extends Vue {
+  private complete: boolean = false
+
+  private async pay() {
+    const paymentIntentResponse = await fetch('http://localhost:9000/payment')
+    const paymentIntent: IPaymentIntent = await paymentIntentResponse.json()
+
+    const data: IPayment | null = await createToken()
+
+    if (paymentIntent && data) {
+      try {
+        const result = await Stripe.confirmCardPayment(
+          paymentIntent.clientSecret,
+          {
+            payment_method: {
+              card: (this.$refs.stripeCard as any).$refs.element._element,
+              billing_details: {
+                name: 'Julien Calixte',
+                email: 'juliencalixte@gmail.com'
+              }
+            }
+          }
+        )
+      } catch (error) {
+        notif.error('une erreur est survenue lors de votre paiement')
+      }
+    }
+  }
+}
+</script>