Problème d'affichage avec Stripe et Twig
Jeff chevasson
Bonjour à toutes et à tous
Je suis en cous de développement d'un projet symfony et j'aimerai intégrer Stripe. J'ai suivi la doc pour Stripe Elements.
En html simple j'arrive à obtenir le formulaire de saisie de la carte bancaire. Mais dès que je passe dans un mode Twig (avec les balises de type Block) je perd l'affichage des champs.
Voici le code de mon template de base
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}Billetterie du Musée du Louvre{% endblock %}</title>
{% block stylesheets %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="{{ path('home') }}">Accueil <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('tickets') }}">billets</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('visitors') }}">visiteurs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('billing_details') }}">facturation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('order_summary') }}">récap</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('payment') }}">paiement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('payment_confirmation') }}">confirmation de paiement</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ path('contact') }}">contact</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="jumbotron">
<div id="header">
<h1>Bienvenue sur la billeterie du musée du Louvre</h1>
</div>
</div>
<div id="content" class="col-lg-12">
{% block body %}
{% endblock %}
</div>
</div>
<hr>
<footer>
<div class="container">
<p>Copyright musée du Louvre 2019</p>
</div>
</footer>
</div>
{% block javascripts %}
<script src="https://js.stripe.com/v3/"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>et celui de la page pour le paiement
{% extends "base.html.twig" %}
{% block title %}
Paiement
{% endblock %}
{% block body %}
<div >
<h2>Paiement</h2>
<br/>
<form action="/confirmation_du_paiement" method="post" id="payment-form">
<div class="form-row">
<label for="card-element">
Carte de paiement
</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>
<button>Submit Payment</button>
</form>
</div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script src="https://js.stripe.com/v3/"></script>
<script>
// Create a Stripe client.
var stripe = Stripe('pk_test_Uszqz9OBUHXeD3RqmeEjCt5O00sC6IRWXN');
// 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',
fontFamily: '"Helvetica Neue", 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});
// 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('payment-form');
form.addEventListener('submit', function(event) {
event.preventDefault();
stripe.createToken(card).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);
}
});
});
// Submit the form with the token ID.
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();
}
</script>
{% endblock %}Je suis un peu un rookie dans le domaine donc si qqn peut me mettre sur la voie pour debuger ce problème je lui en serais reconnaissant.
Bonne journée.
Jeff