Voici votre URL de partage https://sharemycode.io/c/e4f0351 (Cliquer pour copier) (Copié)

{% extends 'base.html.twig' %}

{% block title %}Payment{% endblock %}

{% block body %}
    <section class="features-icons bg-light text-center">
        <div class="container">
            <div class="row">
                <div class="col">
                    <div class="card-body">
                        <form action="{{path("subscription_paiement", {'id': products.id}) }}" method="post" id="payment-form">
                            <div class="form-row">
                                <div id="card-elements" class="StripeElement StripeElement--focus StripeElement--invalid StripeElement--webkit-autofill" ></div>
                                <script src="https://js.stripe.com/v3/"></script>
                                <div id="card-error" role="alert"></div>
                            </div>
                            <button type="button" class="btn btn-primary mt-4">
                                Acheter {{products.price}} €
                            </button>
                        </form>
                    </div>
                </div>
                <div class="col-md">
                    <div class="features-icons-item mx-auto mb-5 mb-lg-0 mb-lg-3">
                        {# <img src="{{products.image}}" alt"..." class="img-thumbnail"> #}
                        <h3>{{products.name}}</3>
                        <p>
                            {{products.description}}
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    
{% endblock %}

{% block javascripts %}
<script>

        {% if app.environment == 'dev' %}
            var stripeToken = "stripe_public_key_test";
        {% else %}
            var stripeToken = "{{stripe_public_key_live}}";
        {% endif %}

        var stripe = Stripe(stripeToken);
        var elements = stripe.elements();
        var subscription = "{{ products.id }}";
        var clientSecret = "{{ intentSecret }}";
        var cardholderName = "{{ app.user.lastname }}";
        var cardholderEmail = "{{ app.user.email }}";

                    console.log('clientSecret', clientSecret);


        var styleCustom = {
            base: {
                fontSize: '16px',
                color: '#191970'
            }
        }

        // On ajt le json pour notre form stipe
        var card = elements.create('card', {style: styleCustom});
        // associer a un identifiant
        cardmount("#card-elements");
        // pour changement de carte + message d'erreur
        card.addEventListener('change', function(event){
            var displayError = document.getElementById('card-error');

            if(event.error) {
                displayError.textContent = event.error.message;
            } else {
                displayError.textContent = '';
            }
        });


        // On recup id
        var form = document.getElementById('payment-form');

        // On detecte l'evnmt
        form.addEventListener('submit', function(event) {
            event.preventDefault();

            stripe.handleCardPayment(
                clientSecret,
                card,
                {
                    payment_method_data: {
                        billing_details: {
                            name: cardholderName,
                            email: cardholderEmail
                        }
                    }
                }
            ).then((result) => {
                if(result.error) {
                    // pour afficher message d'erreur
                } else if('paymentIntent' in result){
                    console.log('Result: ', result);
                    stripeTokenHandler(result.paymentIntent);
                    console.log('Result PaymentInten: ', result.paymentIntent);
                }
            })
        });

        function stripeTokenHandler(intent) {

            var form = document.getElementById('payment-form');

            var InputIntentId = document.createElement('input');
            var InputIntentPaymentMethod = document.createElement('input');
            var InputIntentStatus = document.createElement('input');
            var InputSubscription = document.createElement('input');

            InputIntentId.setAttribute('type','hidden');
            InputIntentId.setAttribute('name','stripeIntentId');
            InputIntentId.setAttribute('value', intent.id);

            InputIntentPaymentMethod.setAttribute('type','hidden');
            InputIntentPaymentMethod.setAttribute('name','stripeIntentPaymentMethod');
            InputIntentPaymentMethod.setAttribute('value', intent.payment_method);

            InputIntentStatus.setAttribute('type','hidden');
            InputIntentStatus.setAttribute('name','stripeIntentStatus');
            InputIntentStatus.setAttribute('value', intent.status);

            InputSubscription.setAttribute('type','hidden');
            InputSubscription.setAttribute('name','subscription');
            InputSubscription.setAttribute('value', 'subscription');

            form.appendChild(InputIntentId);
            form.appendChild(InputIntentPaymentMethod);
            form.appendChild(InputIntentStatus);
            form.appendChild(InputSubscription);
            form.submit();


        }

</script>
{% endblock %}