Skip to content

Instantly share code, notes, and snippets.

@uno-de-piera uno-de-piera/payment.blade.php Secret
Created Aug 18, 2019

Embed
What would you like to do?
<!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
You can’t perform that action at this time.