payment.blade.php

## payment.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>{{ __('Confirmación de pago') }} - {{ config('app.name', 'Laravel') }}</title>

    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

    <script src="https://js.stripe.com/v3"></script>
</head>
<body class="font-sans text-gray-600 bg-gray-200 leading-normal p-4 h-full">
    <div id="app" class="h-full md:flex md:justify-center md:items-center">
        <div class="w-full max-w-lg">
            <!-- Status Messages -->
            <p class="flex items-center mb-4 bg-red-100 border border-red-200 px-5 py-2 rounded-lg text-red-500" v-if="errorMessage">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6">
                    <path class="fill-current text-red-300" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z"/>
                    <path class="fill-current text-red-500" d="M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm1-5.9c-.13 1.2-1.88 1.2-2 0l-.5-5a1 1 0 0 1 1-1.1h1a1 1 0 0 1 1 1.1l-.5 5z"/>
                </svg>

                <span class="ml-3">@{{ errorMessage }}</span>
            </p>

            <p class="flex items-center mb-4 bg-green-100 border border-green-200 px-5 py-4 rounded-lg text-green-700" v-if="paymentProcessed && successMessage">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6">
                    <circle cx="12" cy="12" r="10" class="fill-current text-green-300"/>
                    <path class="fill-current text-green-500" d="M10 14.59l6.3-6.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.42l2.3 2.3z"/>
                </svg>

                <span class="ml-3">@{{ successMessage }}</span>
            </p>

            <div class="bg-white rounded-lg shadow-xl p-4 sm:py-6 sm:px-10 mb-5">
                @if ($payment->isSucceeded())
                    <h1 class="text-xl mt-2 mb-4 text-gray-700">
                        {{ __('Pago completado satisfactoriamente') }}
                    </h1>

                    <p class="mb-6">{{ __('Este pago ya fue confirmado con éxito.') }}</p>
                @elseif ($payment->isCancelled())
                    <h1 class="text-xl mt-2 mb-4 text-gray-700">
                        {{ __('Pago cancelado') }}
                    </h1>

                    <p class="mb-6">{{ __('Este pago fue cancelado.') }}</p>
                @else
                    <div id="payment-elements" v-if="! paymentProcessed">
                        <!-- Instructions -->
                        <h1 class="text-xl mt-2 mb-4 text-gray-700">
                            {{ __('Confirma la cantidad :amount del pago que se va a efectuar', ['amount' => $payment->amount()]) }}
                        </h1>

                        <p class="mb-6">
                            {{ __('Se necesita confirmación adicional para procesar su pago. Confirme su pago completando los detalles de pago a continuación.') }}
                        </p>

                        <!-- Name -->
                        <label for="cardholder-name" class="inline-block text-sm text-gray-700 font-semibold mb-2">{{ __('Nombre completo') }}</label>

                        <input id="cardholder-name" type="text" placeholder="Jane Doe" required
                               class="inline-block bg-gray-200 border border-gray-400 rounded-lg w-full px-4 py-3 mb-3 focus:outline-none"
                               v-model="name">

                        <!-- Card -->
                        <label for="card-element" class="inline-block text-sm text-gray-700 font-semibold mb-2">{{ __('Tarjeta') }}</label>

                        <div id="card-element" class="bg-gray-200 border border-gray-400 rounded-lg p-4 mb-6"></div>

                        <!-- Pay Button -->
                        <button id="card-button"
                                class="inline-block w-full px-4 py-3 mb-4 text-white rounded-lg hover:bg-blue-500"
                                :class="{ 'bg-blue-400': paymentProcessing, 'bg-blue-600': ! paymentProcessing }"
                                @click="confirmPayment"
                                :disabled="paymentProcessing">
                            {{ __('Pagar :amount', ['amount' => $payment->amount()]) }}
                        </button>
                    </div>
                @endif

                <a href="{{ $redirect ?? url('/') }}"
                   class="inline-block w-full px-4 py-3 bg-gray-200 hover:bg-gray-300 text-center text-gray-700 rounded-lg">
                    {{ __('Volver') }}
                </a>
            </div>

            <p class="text-center text-gray-500 text-sm">
                © {{ date('Y') }} {{ config('app.name') }}. {{ __('Todos los derechos reservados.') }}
            </p>
        </div>
    </div>

    <script>
        window.stripe = Stripe('{{ $stripeKey }}');

        var app = new Vue({
            el: '#app',

            data: {
                name: '',
                cardElement: null,
                paymentProcessing: false,
                paymentProcessed: false,
                successMessage: '',
                errorMessage: ''
            },

            mounted: function () {
                const elements = stripe.elements();

                this.cardElement = elements.create('card');
                this.cardElement.mount('#card-element');
            },

            methods: {
                confirmPayment: function () {
                    var self = this;

                    this.paymentProcessing = true;
                    this.paymentProcessed = false;
                    this.successMessage = '';
                    this.errorMessage = '';

                    stripe.handleCardPayment(
                        '{{ $payment->clientSecret() }}', this.cardElement, {
                            payment_method_data: {
                                billing_details: { name: this.name }
                            }
                        }
                    ).then(function (result) {
                        self.paymentProcessing = false;

                        if (result.error) {
                            if (result.error.code === 'parameter_invalid_empty' &&
                                result.error.param === 'payment_method_data[billing_details][name]') {
                                self.errorMessage = '{{ __('Por favor proporcione su nombre.') }}';
                            } else {
                                self.errorMessage = result.error.message;
                            }
                        } else {
                            self.paymentProcessed = true;

                            self.successMessage = '{{ __('El pago fue exitoso.') }}';
                        }
                    });
                },
            },
        })
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<title>{{ __('Confirmación de pago') }} - {{ config('app.name', 'Laravel') }}</title>

	<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min.js"></script>

	<script src="https://js.stripe.com/v3"></script>
	</head>
	<body class="font-sans text-gray-600 bg-gray-200 leading-normal p-4 h-full">
	<div id="app" class="h-full md:flex md:justify-center md:items-center">
	<div class="w-full max-w-lg">
	<!-- Status Messages -->
	<p class="flex items-center mb-4 bg-red-100 border border-red-200 px-5 py-2 rounded-lg text-red-500" v-if="errorMessage">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6">
	<path class="fill-current text-red-300" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20z"/>
	<path class="fill-current text-red-500" d="M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm1-5.9c-.13 1.2-1.88 1.2-2 0l-.5-5a1 1 0 0 1 1-1.1h1a1 1 0 0 1 1 1.1l-.5 5z"/>
	</svg>

	<span class="ml-3">@{{ errorMessage }}</span>
	</p>

	<p class="flex items-center mb-4 bg-green-100 border border-green-200 px-5 py-4 rounded-lg text-green-700" v-if="paymentProcessed && successMessage">
	<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="w-6 h-6">
	<circle cx="12" cy="12" r="10" class="fill-current text-green-300"/>
	<path class="fill-current text-green-500" d="M10 14.59l6.3-6.3a1 1 0 0 1 1.4 1.42l-7 7a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.42l2.3 2.3z"/>
	</svg>

	<span class="ml-3">@{{ successMessage }}</span>
	</p>

	<div class="bg-white rounded-lg shadow-xl p-4 sm:py-6 sm:px-10 mb-5">
	@if ($payment->isSucceeded())
	<h1 class="text-xl mt-2 mb-4 text-gray-700">
	{{ __('Pago completado satisfactoriamente') }}
	</h1>

	<p class="mb-6">{{ __('Este pago ya fue confirmado con éxito.') }}</p>
	@elseif ($payment->isCancelled())
	<h1 class="text-xl mt-2 mb-4 text-gray-700">
	{{ __('Pago cancelado') }}
	</h1>

	<p class="mb-6">{{ __('Este pago fue cancelado.') }}</p>
	@else
	<div id="payment-elements" v-if="! paymentProcessed">
	<!-- Instructions -->
	<h1 class="text-xl mt-2 mb-4 text-gray-700">
	{{ __('Confirma la cantidad :amount del pago que se va a efectuar', ['amount' => $payment->amount()]) }}
	</h1>

	<p class="mb-6">
	{{ __('Se necesita confirmación adicional para procesar su pago. Confirme su pago completando los detalles de pago a continuación.') }}
	</p>

	<!-- Name -->
	<label for="cardholder-name" class="inline-block text-sm text-gray-700 font-semibold mb-2">{{ __('Nombre completo') }}</label>

	<input id="cardholder-name" type="text" placeholder="Jane Doe" required
	class="inline-block bg-gray-200 border border-gray-400 rounded-lg w-full px-4 py-3 mb-3 focus:outline-none"
	v-model="name">

	<!-- Card -->
	<label for="card-element" class="inline-block text-sm text-gray-700 font-semibold mb-2">{{ __('Tarjeta') }}</label>

	<div id="card-element" class="bg-gray-200 border border-gray-400 rounded-lg p-4 mb-6"></div>

	<!-- Pay Button -->
	<button id="card-button"
	class="inline-block w-full px-4 py-3 mb-4 text-white rounded-lg hover:bg-blue-500"
	:class="{ 'bg-blue-400': paymentProcessing, 'bg-blue-600': ! paymentProcessing }"
	@click="confirmPayment"
	:disabled="paymentProcessing">
	{{ __('Pagar :amount', ['amount' => $payment->amount()]) }}
	</button>
	</div>
	@endif

	<a href="{{ $redirect ?? url('/') }}"
	class="inline-block w-full px-4 py-3 bg-gray-200 hover:bg-gray-300 text-center text-gray-700 rounded-lg">
	{{ __('Volver') }}
	</a>
	</div>

	<p class="text-center text-gray-500 text-sm">
	© {{ date('Y') }} {{ config('app.name') }}. {{ __('Todos los derechos reservados.') }}
	</p>
	</div>
	</div>

	<script>
	window.stripe = Stripe('{{ $stripeKey }}');

	var app = new Vue({
	el: '#app',

	data: {
	name: '',
	cardElement: null,
	paymentProcessing: false,
	paymentProcessed: false,
	successMessage: '',
	errorMessage: ''
	},

	mounted: function () {
	const elements = stripe.elements();

	this.cardElement = elements.create('card');
	this.cardElement.mount('#card-element');
	},

	methods: {
	confirmPayment: function () {
	var self = this;

	this.paymentProcessing = true;
	this.paymentProcessed = false;
	this.successMessage = '';
	this.errorMessage = '';

	stripe.handleCardPayment(
	'{{ $payment->clientSecret() }}', this.cardElement, {
	payment_method_data: {
	billing_details: { name: this.name }
	}
	}
	).then(function (result) {
	self.paymentProcessing = false;

	if (result.error) {
	if (result.error.code === 'parameter_invalid_empty' &&
	result.error.param === 'payment_method_data[billing_details][name]') {
	self.errorMessage = '{{ __('Por favor proporcione su nombre.') }}';
	} else {
	self.errorMessage = result.error.message;
	}
	} else {
	self.paymentProcessed = true;

	self.successMessage = '{{ __('El pago fue exitoso.') }}';
	}
	});
	},
	},
	})
	</script>
	</body>
	</html>