Vue Stripe: Componente para realizar pagos en línea 5

Vamos a crear el componente y adaptarlo a nuestras necesidades de Stripe para realizar los pagos

Bueno estamos acá recuerda que yo estoy partiendo de la solución de laravel para la Api en la cual consumimos la Api con vue Entonces ya tengo aquí varias cositas ya prácticamente listas si tú partiste un proyecto limpio entonces tienes que configurar por ejemplo Vue o algo para poder probar esto más fácilmente así que venimospara resources js vue compon voy a crear aquí una llamada stripe voy a colocarle minúscula ya que colo aquí todo de minúscula y por aquí voy a colocarle 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>

Aquí el componente de success y cancel el componente realmente me da igual obviamente tuviera que crear alguno par stripe pero no nos importa ahorita mucho entonces aquí lo tenemos:

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

Ya yo también hice clases específic para que podamos aprender a Cómo podemos obtener estas claves, de momento, la dejamos hard code:

pk_test_51QXxxx

De una manera sencilla de momento no voy a voy a intentar ir lo más rápido posible Así que no sería como quien dice el mejor esquema también recuerda que las claves están acá en el de casher.php y desde el cliente es decir Vue, se emplea la clave pública.

02-01-2025 - Andrés Cruz

In english

• Categoría
• /
• Laravel
• /
• Vue Stripe: Componente para realizar pagos en línea 5