<!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