Hola estoy haciendo los metodos de pago, y pueden elegir entre Stripe y Paypal. Para los dos gasto el mismo formulario, y según el check que elija me cambia la ruta del form. Hasta ahí voy bien, el problema es que Stripe se construye así:
<div id="strypePay" style="display: none;">
<div class="form-group">
<label for="name_on_card">Name on Card</label>
<input type="text" class="form-control" id="name_on_card" name="name_on_card">
</div>
<div class="form-group">
<label for="card-element">Credit Card</label>
<div id="card-element">
<!-- a Stripe Element will be inserted here. -->
</div>
<!-- Used to display form errors -->
<div id="card-errors" role="alert"></div>
</div>
<div class="spacer"></div>
</div>
Es por que en Stripe hay que poner el número de la tarjeta, entonces yo he hecho que cuando este paypal marcado esto este oculto y si marco stripe se muestra.
Luego la función de Stripe es la siguiente:
<script>
(function(){
// Create a Stripe client
var stripe = Stripe('{{ config('services.stripe.key') }}');
// Create an instance of Elements
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
// (Note that this demo uses a wider set of styles than the guide below.)
var style = {
base: {
color: '#32325d',
lineHeight: '18px',
fontFamily: '"Raleway", Helvetica, sans-serif',
fontSmoothing: 'antialiased',
fontSize: '16px',
'::placeholder': {
color: '#aab7c4'
}
},
invalid: {
color: '#fa755a',
iconColor: '#fa755a'
}
};
// Create an instance of the card Element
var card = elements.create('card', {
style: style,
hidePostalCode: true
});
// Add an instance of the card Element into the `card-element` <div>
card.mount('#card-element');
// Handle real-time validation errors from the card Element.
card.addEventListener('change', function(event) {
var displayError = document.getElementById('card-errors');
if (event.error) {
displayError.textContent = event.error.message;
} else {
displayError.textContent = '';
}
});
// Handle form submission
var form = document.getElementById('confirmar_pedido');
form.addEventListener('submit', function(event) {
event.preventDefault();
var options = {
name: document.getElementById('name_on_card').value,
}
stripe.createToken(card, options).then(function(result) {
if (result.error) {
// Inform the user if there was an error
var errorElement = document.getElementById('card-errors');
errorElement.textContent = result.error.message;
} else {
// Send the token to your server
stripeTokenHandler(result.token);
}
});
});
function stripeTokenHandler(token) {
// Insert the token ID into the form so it gets submitted to the server
var form = document.getElementById('confirmar_pedido');
var hiddenInput = document.createElement('input');
hiddenInput.setAttribute('type', 'hidden');
hiddenInput.setAttribute('name', 'stripeToken');
hiddenInput.setAttribute('value', token.id);
form.appendChild(hiddenInput);
// Submit the form
form.submit();
}
})();
</script>
Y yo oculto y muestro el contenido de la tarjeta en stripe del siguiente modo:
$('#paypal').click(function(){
$('#confirmar_pedido').attr('action', '{{ route('PaymentController.pay') }}');
$('#strypePay').css("display","none");
});
$('#stripe').click(function(){
$('#confirmar_pedido').attr('action', '{{ route('stripe.pay') }}');
$('#strypePay').css("display","block");
});
Entonces cuando click en paypal, hay modo de desactivar la función de Stripe?? es que si no, no envia el formulario por que poner la tarjeta es requerido.
Idea:
Habia pensado, en el Stripe en lugar de llevar una id Form llevara una clase css, así si pulso paypal elimino la clase css del form, pero no funciona, no reconoce el formulario:
Uncaught TypeError: form.addEventListener is not a function
He cambiado estas lineas
var form = document.getElementById('confirmar_pedido');
var form = document.getElementById('confirmar_pedido');
Poniendo esto: document.getElementsByClassName('prueba');
Estoy probando así
$('#confirmar_pedido input').on('change', function() {
var selection = ($('input[name=metodoPago]:checked', '#confirmar_pedido').val());
if(selection == 'stripe'){
funcionStripe()
}else{
}
});
Cuando recibo el valor stripe, carga la función. Pero el problema es que si de stripe paso a paypal que es otro input radio sigue funcionando esa función
funcionStripe();
Y la función de el Stripe por defecto autoinvocada, le he llamado asífunction funcionStripe(){
como lo primero que me cargas es el paypal y stripe es otra opción, funciona bien, pero si selecciono stripe y luego paypal de nuevo ya no se ejecuta @Jorius