✨ (payment) change to checkout payment in user page

src/components/Payment.vue

@@ -1,62 +1,65 @@
 <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>
+    <stripe-checkout
+      ref="checkoutRef"
+      :pk="publishableKey"
+      :items="items"
+      :successUrl="successUrl"
+      :cancelUrl="cancelUrl"
+      :clientReferenceId="clientReferenceId"
+      :customerEmail="email"
+    >
+      <template slot="checkout-button">
+        <button class="button is-primary" @click="pay">
+          Payer par carte bleue
+        </button>
+      </template>
+    </stripe-checkout>
   </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 { Component, Prop, Vue } from 'vue-property-decorator'
+import { Action, Getter } from 'vuex-class'
+import { StripeCheckout } from 'vue-stripe-checkout'
+import IUser from '@/models/IUser'
 import IPaymentIntent from '@/models/IPaymentIntent'
 import IPayment from '@/models/IPayment'
 import notif from '@/utils/notif'
 
 @Component({
   components: {
-    Card
+    StripeCheckout
   }
 })
 export default class Payment extends Vue {
-  private complete: boolean = false
+  @Getter
+  public user!: IUser | null
+  private publishableKey = 'pk_test_CO1FMasxNSwIX0P9FgzmDMyp'
+  private successUrl = window.location.href
+  private cancelUrl = window.location.href
+  private items = [
+    {
+      plan: 'plan_GmrqYW6obrGUE6',
+      quantity: 1
+    }
+  ]
+  private checkoutRef: any = null
+
+  public async mounted() {
+    this.checkoutRef = this.$refs.checkoutRef
+  }
 
   private async pay() {
-    const paymentIntentResponse = await fetch('http://localhost:9000/payment')
-    const paymentIntent: IPaymentIntent = await paymentIntentResponse.json()
+    this.checkoutRef.redirectToCheckout()
+  }
 
-    const data: IPayment | null = await createToken()
+  private get clientReferenceId() {
+    return this.user?.userId ?? ''
+  }
 
-    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')
-      }
-    }
+  private get email() {
+    return this.user?.email ?? ''
   }
 }
 </script>

src/components/PricingTable.vue

@@ -29,8 +29,8 @@
       <div class="plan-header">Premium</div>
       Vaquant sans aucune limite !
       <div class="plan-price">
-        <span class="plan-price-amount"
-          ><span class="plan-price-currency">€</span>3</span
+        <span class="plan-price-amount">
+          <span class="plan-price-currency">€</span>2</span
         >/mois
       </div>
       <div class="plan-items">
@@ -39,11 +39,10 @@
         <div class="plan-item">
           <awe-icon icon="infinity" /> dépenses/compte
         </div>
-        <div class="plan-item">150+ devises</div>
         <div class="plan-item">pièces jointes disponibles</div>
       </div>
       <div class="plan-footer">
-        <button class="button is-fullwidth" @click="choose('premium')" disabled>
+        <button class="button is-fullwidth" @click="choose('premium')">
           Bientôt disponible
           <!-- <span v-if="plan !== 'premium'">Passer en premium</span>
           <span v-else>Sélectionné</span> -->

src/shims-vue.d.ts

@@ -9,4 +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'
+declare module 'vue-stripe-checkout'

src/views/About.vue

@@ -1,6 +1,5 @@
 <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 />
@@ -10,12 +9,10 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import Payment from '@/components/Payment.vue'
 
 @Component({
   components: {
-    'app-resume': () => import('@/components/AppResume.vue'),
-    Payment
+    'app-resume': () => import('@/components/AppResume.vue')
   }
 })
 export default class About extends Vue {}

src/views/User.vue

@@ -20,9 +20,9 @@
               @click="purge"
               v-t="'user.purge'"
             ></button>
-            <confirm-button class="is-danger" @confirm="remove">{{
-              $t('user.delete')
-            }}</confirm-button>
+            <confirm-button class="is-danger" @confirm="remove">
+              {{ $t('user.delete') }}
+            </confirm-button>
           </div>
         </div>
       </div>
@@ -32,6 +32,8 @@
         <h3 class="subtitle is-3">Comptes cloturés</h3>
         <account-list :archived="true" />
       </div>
+      <pricing-table />
+      <payment-checkout :email="user.email" />
     </div>
     <div v-else>
       <div class="tabs is-centered is-fullwidth">
@@ -243,7 +245,8 @@ const enableAnonymous: boolean = false
     LangChanger,
     'account-list': () => import('@/components/AccountList.vue'),
     'confirm-button': () => import('@/components/ConfirmButton.vue'),
-    'pricing-table': () => import('@/components/PricingTable.vue')
+    'pricing-table': () => import('@/components/PricingTable.vue'),
+    'payment-checkout': () => import('@/components/Payment.vue')
   }
 })
 export default class User extends Vue {