| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment