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