Forem: Denisse Abreu

How to emit a value from an input component Vue 3.

Denisse Abreu — Wed, 12 Oct 2022 12:22:59 +0000

Hello 👋🏼, I will teach you how to emit a value from an input component using Vue 3 Composition API. Our working environment is Vue 3 with Vite and TypeScript.

Install your Vue 3.

Run in your terminal npm init vue@latest.
Vue will scaffold the project and ask you some questions.

Project name: vue-input-tutorial
Add TypeScript? Yes

After installing Vue 3, go to the newly created project and install its libraries.

cd vue-input-tutorial
npm install

Create the Component.

Go to the Components folder and create a form input component FormInput.vue.
inside the form input component, copy the following code.

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";

defineProps<{
  modelValue: string;
  name: string;
  type: string;
}>();

defineEmits(["update:modelValue"]);
</script>

<template>
  <div>
    <label class="px-3" for="name">{{ name }}</label>
    <input
      :type="type"
      :value="modelValue"
      @input="
        $emit('update:modelValue', ($event.target as HTMLInputElement).value)
      "
      :placeholder="name"
    />
    <br />
  </div>
</template>

Use Your Component.

Go to App.vue and import the form input component.

<script setup lang="ts">
import { ref } from "vue";
import FormInput from "./components/FormInput.vue";

const email = ref("");

// output value key by key
const onInput = (e: { target: { value: string } }) => {
  email.value = e.target.value;
};

// output value on submit
const Submit = () => {
  console.log(email.value);
};
</script>

<template>
  <form @submit.prevent="Submit">
    <FormInput
      v-model="email"
      name="E-mail"
      type="email"
      @input="onInput"
    />
      <button type="submit">Submit</button>
    </form>
    <div>{{ email }}</div>
</template>

In the code above, I added two different examples, one that will output every change in the input, and the other will submit a form and console log the input value. Thanks for reading 👋, Visit my website at codingpr.com

Create A Subscription System with Stripe and Vue js

Denisse Abreu — Thu, 21 Jul 2022 00:07:00 +0000

Hello 🖐🏼, in this guide, I will show you how to build a subscription system with Vue.js and Stripe. Our working environment is Vue.js Options API, Vue Router, and Express.js as a backend manager. For the UI/UX, I'm using Vuetify. If you are looking for the Vue 3 Composition API and TypeScript integration, check this tutorial Create a subscription system with Vue 3, Vite, and Stripe. Due to the extensiveness of this tutorial, I'm leaving the link to my website.

Build A Subscription System With Stripe and Vue js | CodingPR

Learn how to build A Subscription System With Stripe and Vue js Options API.

codingpr.com

If you don't have a project, you can copy mine here:
vue-stripe-subscriptions

1. Set Up Stripe.

First, let's set up our environment. Copy in your env file your publishable key from the stripe dashboard; you can find this key in the developer's section of the dashboard. Create two products in the dashboard products section, the Basic plan for five dollars and the Premium plan for ten. Copy the products IDs in the env file.


      VUE_APP_STRIPE_KEY=<YOUR-PUBLISHABLE-KEY>
      VUE_APP_BASIC_PLAN=<YOUR-BASIC-PLAN>
      VUE_APP_PREMIUM_PLAN=<YOUR-PREMIUM-PLAN>

Once you have opened your account with Stripe, copy the script tag into the head of index.html.


    <head>
      <script src="https://js.stripe.com/v3/"></script>
    </head>

2. Integration.

Our first move to integrate Stripe into Vue.js is making the on-click event when the customer wants to sign up for your subscription service. We are collecting the email and the customer's full name; in production, you should collect additional information, like the customer's address.


    <v-card-actions>
      <v-btn
        id="stripeBtn"
        class="mb-2"
        block
        :loading="loading"
        @click="Signup"
      >
        Sign Up
      </v-btn>
    </v-card-actions>

In this try and catch block, we are sending, to the backend, the customer personal information that we collected from the sign-up form. If we get a response, push the plan view with the customer id as a parameter. Check Vue Router Docs on how to set up passing parameters between views.


    // methods
    import PostService from '../post-service'

    async Signup() {
      const { email, fullname } = this
      try {
        const res = await PostService.createCust(
          email,
          fullname
        )

        if (res.data.customer) {
          this.$router.push({
            name:'Plan',
            params: {
              fullName: fullname,
              customerId: res.data.customer
            },
            props: true
          })
        }

      } catch (error) {
        this.alert1 = true;
        this.alertTxt = 'Error, Try again!'
      }
    }

Create a file in the root of the src folder, the job of this file is to send http requests to the backend with Axios.


    import axios from 'axios';

    const url = 'http://localhost:3000/api/posts';

    class PostService {
      // Create customer
      static async createCust(email, fullname) {
        const res = await axios.post(url, {
          email, fullname
        });
        return res;
      }
      // Create subscription
      static async createSubs(customerId, priceId) {
        const res = await axios.post(`${url}/subs`, {
          customerId, priceId
        });
        return res;
      }
      // Delete subscription
      static async delete(subscriptionId) {
        const res = await axios.post(`${url}/delete`, {
          subscriptionId,
        });
        return res;
      }
    }
    export default PostService;

After receiving the response from the server with the customer id, Vue Router will push the second step; your customer needs to choose a plan. Make two buttons with two different on-click events. One is to subscribe to the five-dollar plan and the other to the ten-dollar plan.


    <v-card-actions>
      <v-btn
        id="btnColor"
        :disabled="disabled"
        class="mx-auto mb-2"
        @click="subsPlan1"
      >
        Select
      </v-btn>
    </v-card-actions>
    <v-card-actions>
      <v-btn
        id="btnColor"
        :disabled="disabled2"
        class="mx-auto mb-2"
        @click="subsPlan2"
      >
        Seclect
      </v-btn>
    </v-card-actions>

The create subscription function will receive the parameters of the plan that the customer chooses plus the props from step one. This function will send, to the backend, the customer id and the price id and create the subscription; If the response data is good, the checkout view will be pushed with parameters.


    props: {
      fullName: String,
      customerId: String
    },

    data: () => ({
      disabled: false,
      disabled2: false,
      alert2: false,
      alertTxt: '',
    }),

    methods: {
      async createSubscription(priceId, price, plan) {
        const {fullName, customerId } = this
        try {
          const res = await PostService.createSubs(
            customerId,
            priceId,
          )

          if (res.data) {
            const subscriptionId = res.data.subscriptionId
            const clientSecret = res.data.clientSecret
            this.$router.push({
              name: 'Checkout',
              params: {
                fullName,
                price,
                plan,
                clientSecret,
                subscriptionId
              }
            })
          }

        } catch (err) {
          this.alert2 = true
          this.disabled = false
          this.alertTxt = 'An error has occurred. Try again later'
        }
      },

      async subsPlan1() {
        const priceId = process.env.VUE_APP_BASIC_PLAN
        const price = '5.00'
        const plan = 'Basic'
        this.disabled = true
        this.disabled2 = false
        await this.createSubscription(priceId, price, plan)
      },

      async subsPlan2() {
        const priceId = process.env.VUE_APP_PREMIUM_PLAN
        const price = '10.00'
        const plan = 'Premium'
        this.disabled2 = true
        this.disabled = false
        await this.createSubscription(priceId, price, plan)
      }
    }

3. Mounting The Card Element.

This is the last step of the frontend integration, mount the card element and create the submit event.


    <!-- Stripe Element-->
    <div
      ref="card"
      class="inputCard"
    />

    <!-- Error messages in this element -->
    <div
      id="card-errors"
      role="alert"
    />
    <br>
    <v-alert
      v-model="alert"
      color="red"
      dense
      dismissible
      type="error"
    >
      <!-- alertTxt -->
    </v-alert>
    <v-btn
      id="stripeBtn"
      class="my-3"
      block
      :loading="loading"
      @click="Submit"
    >
      Pay with Stripe
    </v-btn>

Use the client secret to access the Stripe function "confirm card payment". Inside this function, send the payment method and the customer billing info; Check the list of parameters you can send to stripe . If the subscription is successful, push thank you view with the subscription id as a parameter.


    import PostService from '../post-service'

    const stripe = window.Stripe(process.env.VUE_APP_STRIPE_KEY)

    // Create an instance of Elements.
    const elements = stripe.elements()
    const style = {
      base: {
        color: '#32325d',
        fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
        fontSmoothing: 'antialiased',
        fontSize: '16px',
        '::placeholder': {
          color: '#aab7c4',
        },
      },
      invalid: {
        color: '#fa755a',
        iconColor: '#fa755a',
      },
    };

    const card = elements.create('card', { style: style })

    export default {
      props: {
        fullName: String,
        price: String,
        plan: String,
        clientSecret: String,
        subscriptionId: String
      },

      mounted() {
        card.mount(this.$refs.card)

        card.on('change', (event) => {
          this.displayError(event)
        })
      },

      methods: {
        displayError(event) {
          const displayError = document.getElementById('card-errors')
          if (event.error) {
            displayError.textContent = event.error.message
          } else {
            displayError.textContent = ''
          }
        },

        async Submit() {
          this.loading = true
          const { clientSecret, fullName, alert, alertTxt, loading } = this
          const result = await stripe.confirmCardPayment(clientSecret, {
            payment_method: {
              type: 'card',
              card: card,
              billing_details: {
                name: fullName,
              }
            }
          })

          if (result.error) {
            alert = true
            alertTxt = result.error.message
            loading = false
          } else {
            // Successful subscription payment
            // The subscription automatically becomes active upon payment.
            this.$router.push({
              name: 'ThankYou',
              params: {
                subscriptionId: this.subscriptionId
              }
            })
          }
        }
      }
    }

Check the backend here: Subscription System With Stripe and Express

¿Cómo Conectar Stripe a Vue?

Denisse Abreu — Wed, 06 Jul 2022 22:50:00 +0000

Hola 🖐🏼, en esta guía, te enseñaré cómo conectar Stripe a Vue. Esta integración es solo para carritos de compras, no para suscripciones. Debido a la complejidad de esta integración, te dejo aquí el enlace a mi sitio web.

¿Cómo conectar Stripe a una tienda en línea hecha con Vue 2? | CodingPR

Aprenda a conectar Stripe a una tienda en línea hecha con Vue 2.

codingpr.com

1. Configura Stripe.

Para comenzar con Stripe debes abrir una cuenta con Stripe, después de abrir su cuenta, vaya a la sección de desarrolladores y acceda a sus claves API. En la sección de desarrolladores, encontrarás dos claves: "publishable key" y "secret key", cópialos en tu archivo .env.


    VUE_APP_STRIPE_KEY=<YOUR-PUBLISHABLE-KEY>

2. Integración.

Una vez que haya abierto su cuenta con Stripe, copia el "script tag" de stripe en el "head" de index.html.


    <head>
      <script src="https://js.stripe.com/v3/"></script>
    </head>

Inmediatamente después de obtener el subtotal de la transacción, crea el "onclick event" para llamar al servidor y solicitar el payment intent. Usa la función "paymentIntent()" en diferentes partes de tu app, colocalo en el "login form" y el "guest form".


    <!-- template -->
    <v-btn
      v-if="isCart >= 1"
      block
      color="#385F73"
      class="mt-3"
      elevation="2"
      :loading=loading
      rounded
      dark
      @click="paymentIntent"
    >
      Subtotal
    </v-btn>


    // coloque esta función en diferentes partes de su aplicación
    // methods
    paymentIntent () {
      if (this.isLoggedIn) {
        this.$store.dispatch('paymentIntent')
          .catch((_err) => {
            this.loading = false
            const show = true
            const color = 'red darken-3'
            const text = 'Server Error, try again later!'
            this.$store.commit('cartSnack', {
              show, color, text
            })
          })
      } else {
        this.$router.push('/pre-checkout')
      }
    }

Para pasar las propiedades del Vue al servidor usamos como intermediario Vuex y Axios. Vuex es el manejador de "state" para aplicacciones de Vuejs y Axios el manejador de HTTP. En el siguiente código, extraiga del estado el objeto de usuario y el carrito de compras. Envíe al servidor el carrito de compras para calcular el total de la transacción según el número de id del producto. Después de enviar estos objetos, reciba la respuesta del servidor con el secreto del cliente y el cálculo de impuestos, envíelos a las mutaciones y guárdelos en el 'state'.


    // vuex actions
    async paymentIntent ({ commit, state }) {
      const res = await axios.post('users/secret/', {
        user: state.user,
        cart: state.cart
      })
      if (res.status === 201) {
        commit('CLIENT_SECRET', {
          client_secret: res.data.client_secret,
          tax: res.data.tax
        })
        router.push('/checkout')
      }
    },


    // vuex mutations
    CLIENT_SECRET (state, payload) {
      const secret = state.secret
      secret.clientSecret = payload.client_secret
      secret.tax = payload.tax
    },

Inicialice el estado con el secreto del cliente en nulo y el impuesto en 0.


    // vuex state
    state: {
      secret: {
        clientSecret: null,
        tax: 0
      },
      user: {},
      cart: []
    },

3. Montaje del Stipe Card Element.

Una vez tengamos el "client secret" en el "state" podemos utilizardo para montar el Stripe Card Element. El Card Element le mostrará al cliente el formulario en el cual este insertará su número de tarjeta de crédito. Recuerda que Stripe ya tiene el total de la compra. Con el Card Element, el cliente estará autorizando y finalizando la transacción.


      <!-- template -->
      <form
        id="payment-form"
        v-if="isCart >= 1"
      >
        <br>
        <div ref="paymentElement" id="payment-element">
          <!-- El Stripe Elements insertará la forma aquí -->
        </div>
        <br>
        <div id="error-message">
          <!-- Espacio para mostrar errores -->
        </div>
      </form>
      <v-card-actions>
        <v-btn
          v-if="isCart >= 1"
          id="submit"
          :loading="loading"
          block
          color="success"
          class="mt-3"
          elevation="2"
          rounded
          dark
          @click="Submit"
        >
          Pay
        <v-icon class="ml-2">mdi-basket</v-icon>
        </v-btn>
      </v-card-actions>

Dentro del "script tag" de Vue, vamos a importar a Vuex para poder acceder al "client secret". Utilize su clave secreta pública de Stripe y la función window.Stripe() para obtener el Stripe Card Element. Su clave secreta pública debe almacenarse en el archivo .env; ¡nunca lo pongas directamente en el código! Una vez que obtengamos el Stripe Card Element, podemos modificar su apariencia Stripe appearance-api.


      // importe mapState y mapGetters para acceder
      // variables adicionales
      // script
      import store from '../store'

      const stripe = window.Stripe(
        process.env.VUE_APP_STRIPE_KEY
      )
      const options = {
        clientSecret: store.state.secret.clientSecret,
        // Personaliza tu Stripe theme.
        appearance: { theme: 'stripe' }
      }

      const elements = stripe.elements(options)

      const paymentElement = elements.create('payment')

Montamos el Stripe Element usando la función "mounted" de Vue, esta va adentro de "export default".


      // export default
      mounted () {
        paymentElement.mount(this.$refs.paymentElement)
        paymentElement.on('change', (event) => {
          this.displayError(event)
        })
      },

La Función displayError() le va a mostrar al cliente si su tarjeta de crédito tiene errores como fondos insuficientes entre otros.


      // methods
      displayError (event) {
        const displayError = document.getElementById(
          'error-message'
        )
        if (event.error) {
          displayError.textContent = event.error.message
        } else {
          displayError.textContent = ''
        }
      },

Finalmente enviamos la transacción a través de la función Submit. Es importante destacar que "/thankyou/" es la dirección URL de nuestra última ruta. Esta se encuentra en el directorio bajo Thankyou.vue. Este Proyecto usa Vue Router para moverse fácilmente entre páginas. Use mapState para extraer propiedades del "state" y envialos con el objeto de "shipping".


      // methods
      async Submit () {
        this.loading = true
        const { error } = await stripe.confirmPayment({
          elements,
          confirmParams: {
            // return_url: ruta final del proyecto thankyou.vue
            return_url: 'http://localhost:8080/#/thankyou/',
            shipping: {
              address: {
                city: this.city,
                line1: this.address,
                postal_code: this.zipcode,
                state: this.state,
                country: 'USA'
              },
              name: `${this.first_name} ${this.last_name}`,
              phone: this.phone
            }
          }
        })
        if (error) {
          this.loading = false
          const messageContainer = document.querySelector(
            '#error-message'
          )
          messageContainer.textContent = error.message
        } else {
          // Redirección del cliente a return_url.
        }
      }

4. Extracción de propiedades de Stripe.

Si necesitas extraer información adicional del cliente, debes hacerlo al final en la página de Thankyou.vue. A través de la función de javascript URLSearchParams(), extraemos el "payment_intent_client_secret" del URL, este será utilizado por la función de Stripe retrievePaymentIntent() para poder accesar al objeto de la transacción y enviar las propiedades a nuestro servidor. Una vez enviados los valores, rescatamos la respuesta y si todo está bien, vamos a usar las variables de entorno COMMIT_CHECKOUT y CLIENT_SECRET para borrar el "state".


      // mounted
      async mounted () {
        const stripe = window.Stripe(
          process.env.VUE_APP_STRIPE_KEY
        )
        const clientSecret = new URLSearchParams(
          window.location.search
        ).get(
          'payment_intent_client_secret'
        )
        const {
          paymentIntent, error
        } = await stripe.retrievePaymentIntent(
          clientSecret
        )
        if (error) {
          console.log(error)
          this.message = 'An error has ocurred'
        }
        if (paymentIntent.status === 'succeeded') {
          this.message = paymentIntent.status
          const payment_id = paymentIntent.id
          this.$store.dispatch('checkout', { payment_id })
            .catch((_err) => {
              this.loading = false
              const show = true
              const color = 'red darken-3'
              const text = 'An error has ocurred'
              this.$store.commit('cartSnack',
                {
                  show, color, text
                })
            })
        } else {
          this.message = paymentIntent.status
        }
      }


      // actions
      async checkout ({ commit, state, getters }, payload) {
        const res = await axios.post('orders/order/', {
          order: {
            stripe_id: payload.payment_id,
            subtotal: getters.subTotal,
            total: getters.grandTotal,
            tax: state.secret.tax,
            cart: state.cart,
            rating: state.stars,
            first_name: state.user.first_name,
            last_name: state.user.last_name,
            email: state.user.email,
            phone: state.user.phone,
            address: state.user.address,
            city: state.user.city,
            state: state.user.state,
            zipcode: state.user.zipcode
          }
        })
        if (res.status === 200) {
          // Borrar el estado a excepción del usuario.
          commit('CHECKOUT_SUCCESS')
          commit('CLIENT_SECRET', {
            client_secret: null,
            tax: 0
          })
        }
      },

Borra el 'state' cuando el pago se haya completado. Para integrar Stripe en la parte del servidor, visite este blog: ¿Cómo conectar Stripe a Django Rest Framework?


      // mutations
      CHECKOUT_SUCCESS (state) {
        state.stars = []
        state.cart = []
      },

Connect Stripe to Vue.js

Denisse Abreu — Wed, 06 Jul 2022 12:06:00 +0000

Hi 🖐🏼, in this guide, I will show you how to connect Stripe to Vue. This integration is for shopping carts only, not subscriptions. Our working environment is:

Stripe latest 2022
Vue.js options API

Due to the extensiveness of this tutorial, I'm going to link my website blog; It has better visual representations.

How to Connect Stripe to a Vue 2 Online Shopping Store? | CodingPR

Learn how to Connect Stripe to a Vue 2 Options API Ecommerce.

codingpr.com

If you don't have a project, you can copy mine here: django_store

1. Set Up Stripe.

To get started with Stripe, you need to open a Stripe account; After opening your account, go to the developer's section and access your API keys. In the developer's section, you will find two keys: publishable key y secret key; copy them in your .env file.


      VUE_APP_STRIPE_KEY=<YOUR-PUBLISHABLE-KEY>

2. Integration.

Once you have opened your account with Stripe, copy the script tag into the head of index.html.


    <head>
      <script src="https://js.stripe.com/v3/"></script>
    </head>

Immediately after getting the subtotal from the customer, create the onclick event to call the server and request the payment intent. Use the paymentIntent function in different parts of your app, place it in the login form and the guest form.


    <!-- template -->
    <v-btn
      v-if="isCart >= 1"
      block
      color="#385F73"
      class="mt-3"
      elevation="2"
      :loading=loading
      rounded
      dark
      @click="paymentIntent"
    >
      Subtotal
    </v-btn>


      // place this function in different parts of your app
      // like the login form and the guest form
      // methods
      paymentIntent () {
        if (this.isLoggedIn) {
          this.$store.dispatch('paymentIntent')
            .catch((_err) => {
              this.loading = false
              const show = true
              const color = 'red darken-3'
              const text = 'Server Error, try again later!'
              this.$store.commit('cartSnack', {
                show, color, text
              })
            })
        } else {
          this.$router.push('/pre-checkout')
        }
      }

To send the payment intent from Vue to the server, we are going to use Vuex and Axios. Vuex is the state management for Vuejs applications, and Axios is the http requests manager. In the following code, retrieve the user object and the shopping cart. Send the shopping cart to calculate the transaction total based on the product id. After sending these objects, get the response from the server with the client secret and the tax calculation, send them to the mutations and store them in the state.


    // vuex actions
    async paymentIntent ({ commit, state }) {
      const res = await axios.post('users/secret/', {
        user: state.user,
        cart: state.cart
      })
      if (res.status === 201) {
        commit('CLIENT_SECRET', {
          client_secret: res.data.client_secret,
          tax: res.data.tax
        })
        router.push('/checkout')
      }
    },


    // vuex mutations
    CLIENT_SECRET (state, payload) {
      const secret = state.secret
      secret.clientSecret = payload.client_secret
      secret.tax = payload.tax
    },

Initialize the state with the client secret in null and tax in 0.


    // vuex state
    state: {
      secret: {
        clientSecret: null,
        tax: 0
      },
      user: {},
      cart: []
    },

3. Mounting The Card Element.

Once we have the client secret store in the state, we can use it to mount the Stripe card element. This card element will show to the customer the Stripe form in which the customer will insert his credit card number. Remember Stripe has the transaction total. With this card element, the customer is authorizing and finalizing the transaction.


    <!-- template -->
    <form
      id="payment-form"
      v-if="isCart >= 1"
    >
      <br>
      <div ref="paymentElement" id="payment-element">
        <!-- Elements will create form elements here -->
      </div>
      <br>
      <div id="error-message">
        <!-- Display error message to your customers -->
      </div>
    </form>
    <!-- end -->
    <v-card-actions>
      <v-btn
        v-if="isCart >= 1"
        id="submit"
        :loading="loading"
        block
        color="success"
        class="mt-3"
        elevation="2"
        rounded
        dark
        @click="Submit"
      >
        Pay
      <v-icon class="ml-2">mdi-basket</v-icon>
      </v-btn>
    </v-card-actions>

Inside the script tag of Vue, import the store from vuex so we can access the client secret. Use your public secret key and window.Stripe() function to get the form element from Stripe. Your public secret key must be stored in the .env file; never put it directly in the code! Once we get the payment element, we can modify its appearance Stripe appearance-api.


      // import mapState and mapGetters to access
      // aditional customer variables
      // script
      import store from '../store'

      const stripe = window.Stripe(
        process.env.VUE_APP_STRIPE_KEY
      )
      const options = {
        clientSecret: store.state.secret.clientSecret,
        // Stripe themes are fully customizable
        appearance: { theme: 'stripe' }
      }

      const elements = stripe.elements(options)

      const paymentElement = elements.create('payment')

Inside export default, mount the Stripe Element using Vue's mounted function.


      // export default
      mounted () {
        paymentElement.mount(this.$refs.paymentElement)
        paymentElement.on('change', (event) => {
          this.displayError(event)
        })
      },

The DisplayError() function will show the customer if his card has errors such as insufficient funds.


      // methods
      displayError (event) {
        const displayError = document.getElementById(
          'error-message'
        )
        if (event.error) {
          displayError.textContent = event.error.message
        } else {
          displayError.textContent = ''
        }
      },

Finally, send the transaction through the Submit function. It is important to note that /thankyou/ is the URL parameter of our last route. This is located in the directory under Thankyou.vue. this project uses Vue Router for easy moving between pages. Use mapState to extract properties from the state and send them with the address object.


      // methods
      async Submit () {
        this.loading = true
        const { error } = await stripe.confirmPayment({
          elements,
          confirmParams: {
            // return_url: project final route thankyou.vue
            return_url: 'http://localhost:8080/#/thankyou/',
            shipping: {
              address: {
                city: this.city,
                line1: this.address,
                postal_code: this.zipcode,
                state: this.state,
                country: 'USA'
              },
              name: `${this.first_name} ${this.last_name}`,
              phone: this.phone
            }
          }
        })
        if (error) {
          this.loading = false
          const messageContainer = document.querySelector(
            '#error-message'
          )
          messageContainer.textContent = error.message
        } else {
          // Customer redirection to return_url.
        }
      }

4. Extracting Properties from Stripe.

If you need to retrieve customer information from Stripe, you should do so at the bottom of the Thankyou.vue page. Through the javascript function URLSearchParams(), we retrieve the payment_intent_client_secret from the URL, this will be used by the Stripe retrievePaymentIntent() function to access the transaction object and be able to send the properties to our server. Once the values have been sent, retrieve the response, and if everything is ok, use COMMIT_CHECKOUT and CLIENT_SECRET environment variables to clear the state.


      // mounted
      async mounted () {
        const stripe = window.Stripe(
          process.env.VUE_APP_STRIPE_KEY
        )
        const clientSecret = new URLSearchParams(
          window.location.search
        ).get(
          'payment_intent_client_secret'
        )
        const {
          paymentIntent, error
        } = await stripe.retrievePaymentIntent(
          clientSecret
        )
        if (error) {
          console.log(error)
          this.message = 'An error has ocurred'
        }
        if (paymentIntent.status === 'succeeded') {
          this.message = paymentIntent.status
          const payment_id = paymentIntent.id
          this.$store.dispatch('checkout', { payment_id })
            .catch((_err) => {
              this.loading = false
              const show = true
              const color = 'red darken-3'
              const text = 'An error has ocurred'
              this.$store.commit('cartSnack',
                {
                  show, color, text
                })
            })
        } else {
          this.message = paymentIntent.status
        }
      }


      // actions
      async checkout ({ commit, state, getters }, payload) {
        const res = await axios.post('orders/order/', {
          order: {
            stripe_id: payload.payment_id,
            subtotal: getters.subTotal,
            total: getters.grandTotal,
            tax: state.secret.tax,
            cart: state.cart,
            rating: state.stars,
            first_name: state.user.first_name,
            last_name: state.user.last_name,
            email: state.user.email,
            phone: state.user.phone,
            address: state.user.address,
            city: state.user.city,
            state: state.user.state,
            zipcode: state.user.zipcode
          }
        })
        if (res.status === 200) {
          // Clear the state except for the user
          commit('CHECKOUT_SUCCESS')
          commit('CLIENT_SECRET', {
            client_secret: null,
            tax: 0
          })
        }
      },

Clear the state on susccesful checkout. For the server-side code of this Stripe implementation checkout this blog: How to Connect Stripe to Django Rest Framework?


      // mutations
      CHECKOUT_SUCCESS (state) {
        state.stars = []
        state.cart = []
      },