✨ (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>

src/messages/fr.ts

@@ -35,7 +35,7 @@ export default {
   },
   about: {
     description: `
-      Vaquant est une application pour réaliser
+      Vaquant est une application qui réalise
       des balances équitables de vos budgets entre
       amis lors de vos colocations, vacances, séjours,
       voyages, etc.`

src/models/IPayment.ts

@@ -0,0 +1,33 @@
+export default interface IPayment {
+  token: {
+    id: string
+    object: string
+    card: {
+      id: string
+      object: 'token'
+      address_city: string | null
+      address_country: string | null
+      address_line1: string | null
+      address_line1_check: string | null
+      address_line2: string | null
+      address_state: string | null
+      address_zip: string
+      address_zip_check: string
+      brand: string
+      country: string
+      cvc_check: string
+      dynamic_last4: string | null
+      exp_month: number
+      exp_year: number
+      funding: string
+      last4: string
+      name: string | null
+      tokenization_method: string | null
+    }
+    client_ip: string
+    created: number
+    livemode: boolean
+    type: string
+    used: boolean
+  }
+}

src/models/IPaymentIntent.ts

@@ -0,0 +1,3 @@
+export default interface IPaymentIntent {
+  clientSecret: string
+}

src/shims-vue.d.ts

@@ -9,3 +9,4 @@ declare module 'crypto-js/aes'
 declare module 'crypto-js/enc-utf8'
 declare module '@xkeshi/vue-qrcode'
 declare module 'font-color-contrast'
+declare module 'vue-stripe-elements-plus'

src/views/About.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="about no-margin">
+    <Payment />
     <img class="logo" src="../assets/logo.svg" title="logo Vaquant" />
     <p class="simple-description" v-t="'about.description'"></p>
     <hr />
@@ -9,10 +10,12 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import Payment from '@/components/Payment.vue'
 
 @Component({
   components: {
-    'app-resume': () => import('@/components/AppResume.vue')
+    'app-resume': () => import('@/components/AppResume.vue'),
+    Payment
   }
 })
 export default class About extends Vue {}