Vue Stripe: Component for making online payments 5

Let's create the component and adapt it to our Stripe needs to make payments

Okay, here we are, remember that I'm starting from the Laravel solution for the API in which we consume the API with Vue. So I already have several things here that are practically ready. If you started a clean project, then you have to configure, for example, Vue or something to be able to test this more easily. So, let's go to resources js vue compos. I'm going to create a stripe call here. I'm going to put a lowercase letter since I put everything in lowercase here and here I'm going to put one payment:

stripe/OnePayment.vue

<template>
    <div>

      <stripe-checkout
        
        ref="checkoutRef"
        mode="payment"
        :pk="publishableKey"
        :line-items="lineItems"
        :success-url="successURL"
        :cancel-url="cancelURL"
        @loading="v => loading = v"
      />
      <button :readonly="loading" @click="submit">Pay now!</button>
    </div>
  </template>
  
  <script>
  import { StripeCheckout } from '@vue-stripe/vue-stripe';
  export default {
    components: {
      StripeCheckout,
    },
    data () {
      this.publishableKey = 'pk_test_51QXxxx';
      return {
        loading: false,
        lineItems: [
          {
            price: 'price_1QYPKhCWud7Ri9mJwr0ZAFBP', // The id of the one-time price you created in your Stripe dashboard
            quantity: 1,
          },
        ],
        successURL: 'http://laravelbaseapi.test/vue/stripe/success',
        cancelURL: 'http://laravelbaseapi.test/vue/stripe/cancel',
      };
    },
    methods: {
      submit () {
        // You will be redirected to Stripe's secure checkout page
        this.$refs.checkoutRef.redirectToCheckout();
      },
    },
  };
  </script>

Here the success and cancel components do not really matter to me, obviously I would have to create some for stripe but we do not care much right now so here we have it:

router.js

import { createRouter, createWebHistory } from "vue-router";

import { useCookies } from 'vue3-cookies'
const { cookies } = useCookies()

import List from './componets/ListComponent.vue'

import OnePayment from "./componets/stripe/OnePayment.vue";

const routes = [
    ***
    {
        name: 'stripe',
        path: '/vue/stripe/one-payment',
        component: OnePayment
    },
    {
        name: 'success',
        path: '/vue/stripe/success',
        component: List
    },
    {
        name: 'cancel',
        path: '/vue/stripe/cancel',
        component: List
    },
]

const router = createRouter({
    history: createWebHistory(),
    routes: routes
})


export default router

I have also already made specific classes so that we can learn how we can obtain these keys, for now, we leave it hard code:

pk_test_51QXxxx

In a simple way, at the moment I am not going to try to go as fast as possible. So it would not be like who says the best scheme. Also remember that the keys are here in casher.php and from the client, that is, Vue, the public key is used.

02-01-2025 - Andrés Cruz

En español

• Category
• /
• Laravel
• /
• Vue Stripe: Component for making online payments 5