Stripe Checkout with Vue

StripeCheckout.vue

<template>
  <div>
    <div v-if="!authenticating">
      <v-layout
        align-center
        justify-center
      >
        <v-flex
          xs12
          sm8
          md8
        >
          <v-card>
            <v-toolbar
              dark
              color="primary"
            >
              <v-toolbar-title>
                <v-icon left>
                  far fa-shopping-cart
                </v-icon>
                <span class="title">Checkout</span>
              </v-toolbar-title>
            </v-toolbar>
            <v-card-text>
              <h1 class="display-1">
                Model Based Definition Assessment
              </h1>
              <span class="subheading"><em>(One-Time Access Only)</em></span>
              <p class="display-2 mt-5 text-xs-right">
                $500.00
              </p>
              <h3>
                <v-icon
                  small
                  style="position: relative; top:-3px;"
                  color="primary"
                >
                  fal fa-credit-card-front
                </v-icon>&nbsp;Credit Card
              </h3>
              <card
                class="stripe-card my-2"
                :class="{complete}"
                stripe="pk_test_MeLD90eGbE4H6wadAFxmVA8X"
                @change="complete = $event.complete"
              />
              <label>Please enter your card details above...</label>
            </v-card-text>
            <v-card-actions>
              <v-spacer />
              <v-btn
                large
                color="primary"
                class="pay-with-stripe"
                prepend-icon="fa-cart"
                :disabled="!complete"
                :loading="processingPayment"
                @click="pay"
              >
                Pay Now
              </v-btn>
            </v-card-actions>
          </v-card>
          <br>
          <v-layout
            align-center
            justify-center
          >
            <v-flex sm4>
              <v-btn
                outline
                flat
                @click="checkout"
              >
                Go To Stripe Checkout
              </v-btn>
            </v-flex>
          </v-layout>
        </v-flex>
      </v-layout>

      {{ error }}
    </div>

    <div v-if="authenticating">
      <v-container>
        <v-progress-circular
          indeterminate
          color="grey"
          class="mt-5"
          size="50"
        />
      </v-container>
    </div>
  </div>
</template>

<script>

import {mapState, mapActions} from 'vuex'
import CheckoutService from "../services/CheckoutService"
import {stripeKey} from './../stripeConfig.json'
import {Card, createToken } from 'vue-stripe-elements-plus'
const stripe = Stripe(stripeKey)

export default {
  name: "MbdSalesPage",
  components: { Card },
  data() {
    return {
      error: '',
      complete: false,
      processingPayment: false,
      authenticating: true
    }
  },
  computed: {
    ...mapState({
      session: state => state.session.session
    }),
  },
  beforeCreate(){
    if(!auth.currentUser){
      if(auth.isSignInWithEmailLink(window.location.href)){
        let email = window.prompt('Please provide your email for confirmation:')

        auth.signInWithEmailLink(email, window.location.href)
          .then((response) => {
            console.log(response)
            this.printNotice({type: 'success', message: `Authentication successful... You've been signed in with the following email address: ${email}`})
          })
          .catch((error) => {
            console.log(error.message)
            this.$router.push('/')
            this.printNotice({type: 'error', message: error.message})
          })
      }
    }
  },
  created(){
    this.authenticating = false;
  },
  mounted() {


  },
  methods: {
    ...mapActions(['printNotice','clearNotice']),
    checkout(){

      stripe.redirectToCheckout({
        items: [{sku: 'sku_F9zoh7y1v2VecN', quantity: 1}],
        successUrl: window.location.protocol + '//192.168.1.144:8080/success',
        cancelUrl: window.location.protocol + '//192.168.1.144:8080/cancel'
      })
        .then((response) => {
          if(response.error) {
            this.error = response.error.message
          }

        })
    },
    pay(){
      this.processingPayment = true

      createToken().then((response) => {
        const token = response.token.id
        CheckoutService.mbdAccess({token}).then((response) => {
          const data = response.data
          this.printNotice({type: 'success', message: `Your payment of $${(data.amount * 0.01).toFixed(2)} was successful for ${data.description}`})
          this.processingPayment = false
        })
      }).catch((error) => {
        this.printNotice({type: 'error', message: error})
        this.processingPayment = false
      })
    },

  }

}
</script>

<style lang="scss">
  .stripe-card {
    font-family: Roboto, sans-serif;
    padding: 1rem;
    border: 1px solid #d0e1f0;
    &.complete {
      border: 1px solid #188005;
    }
  }
</style>