Bonjour,
j'essaie de mettre en place un paiement stripe, avec le formulaire de base ça fonctionne sans soucis mais avec un formulaire customisé cela ne fonctionne pas, impossible de récupérer le token
j'ai donc deux fichier js le premier pour la customisation du formulaire:
(function() {
'use strict';
var elements = stripe.elements({
fonts: [
{
cssSrc: 'https://fonts.googleapis.com/css?family=Source+Code+Pro',
},
],
// Stripe's examples are localized to specific languages, but if
// you wish to have Elements automatically detect your user's locale,
// use `locale: 'auto'` instead.
locale: window.__exampleLocale
});
// Floating labels
var inputs = document.querySelectorAll('.cell.example.example2 .input');
Array.prototype.forEach.call(inputs, function(input) {
input.addEventListener('focus', function() {
input.classList.add('focused');
});
input.addEventListener('blur', function() {
input.classList.remove('focused');
});
input.addEventListener('keyup', function() {
if (input.value.length === 0) {
input.classList.add('empty');
} else {
input.classList.remove('empty');
}
});
});
var elementStyles = {
base: {
color: '#32325D',
fontWeight: 500,
fontFamily: 'Source Code Pro, Consolas, Menlo, monospace',
fontSize: '16px',
fontSmoothing: 'antialiased',
'::placeholder': {
color: '#CFD7DF',
},
':-webkit-autofill': {
color: '#e39f48',
},
},
invalid: {
color: '#E25950',
'::placeholder': {
color: '#FFCCA5',
},
},
};
var elementClasses = {
focus: 'focused',
empty: 'empty',
invalid: 'invalid',
};
var cardNumber = elements.create('cardNumber', {
style: elementStyles,
classes: elementClasses,
});
cardNumber.mount('#example2-card-number');
var cardExpiry = elements.create('cardExpiry', {
style: elementStyles,
classes: elementClasses,
});
cardExpiry.mount('#example2-card-expiry');
var cardCvc = elements.create('cardCvc', {
style: elementStyles,
classes: elementClasses,
});
cardCvc.mount('#example2-card-cvc');
registerElements([cardNumber, cardExpiry, cardCvc], 'example2');
})();
un second pour la validation:
// Set your publishable key: remember to change this to your live publishable key in production
// See your keys here: https://dashboard.stripe.com/account/apikeys
var stripe = Stripe('***');
var elements = stripe.elements();
// Custom styling can be passed to options when creating an Element.
var style = {
base: {
// Add your base input styles here. For example:
fontSize: '16px',
color: '#32325d',
},
};
// Create an instance of the card Element.
var card = elements.create('card', {style: style});
// Add an instance of the card Element into the `card-element` <div>.
card.mount('#card-element');
// Create a token or display an error when the form is submitted.
var form = document.getElementById('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).then(function(result) {
if (result.error) {
// Inform the customer that 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('payment-form');
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();
}
voici ma vue:
{% extends "base.html.twig" %}
{% block title %}Espace client{% endblock %}
{% block body %}
<div class="container">
<!-- Début de la section réservation -->
<section id="reserver" class="pt-5 pb-5 justify-content-center">
<h2 class="text-uppercase text-center pb-3">Demander une intervention</h2>
<h5 class="text-uppercase text-center pb-3">Intervention du {{ date|format_datetime('full', 'none', locale='fr') }}</h5>
<p class="text-center pb-3">Vous pouvez maintenant procéder au paiement</p>
<div class="row justify-content-center">
<div class="col-6 cell example example2">
<form action="/charge" method="post" id="payment-form">
<div class="row">
<div class="col-12">
<div class="field">
<div id="example2-card-number" class="input empty"></div>
<label for="example2-card-number" data-tid="elements_examples.form.card_number_label">Card number</label>
<div class="baseline"></div>
</div>
</div>
<div class="col-12">
<div class="row">
<div class="col-6">
<div class="field">
<div id="example2-card-expiry" class="input empty"></div>
<label for="example2-card-expiry" data-tid="elements_examples.form.card_expiry_label">Expiration</label>
<div class="baseline"></div>
</div>
</div>
<div class="col-6">
<div class="field half-width">
<div id="example2-card-cvc" class="input empty"></div>
<label for="example2-card-cvc" data-tid="elements_examples.form.card_cvc_label">CVC</label>
<div class="baseline"></div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" data-tid="elements_examples.form.pay_button">Procéder au paiement</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Fin de la section réservation -->
</div>
{% endblock %}
{% block javascripts %}
<script src="/js/example2.js" data-rel-js></script>
{% endblock %}