<script src="https://js.stripe.com/v3/"></script>

<div class='separator'></div>
    
<section class='centerContainer container'>
   <h2>{{GetCode(Swcf.PayementProduct)}}</h2>
 
   <div class='col-md-6'>
       <h3>{{GetCode(Swcf.Recapitulatif)}}</h3>
       <table class='facture'>
           <tr>
               <th>{{GetCode(Swcf.Product)}}</th>
               <th>{{GetCode(Swcf.Price)}}</th>
           </tr> 
           <tr>
               <td>
                  <h4>{{Product->GetMarqueModel()}}</h4>
                   
                    {{Product->GetImageMini()}}
                   
               </td>
               <td><h3>{{Command->GetPrice()}}&euro;</h3></th>
           </tr>
           <tr>
               <td>{{GetCode(Swcf.TransactionDealegitFees)}}
               </td>
               <td>{{Command->GetTransactionPrice()}}&euro;</th>
           </tr>
           <tr>
               <td>{{GetCode(Swcf.TransactionFees)}}
               </td>
               <td>{{Command->GetTransactionStripe()}}&euro;</th>
           </tr>
            <tr style='border:none'>
               <td class='alignRight' style='font-size:15px'>{{GetCode(Swcf.Total)}}</td>
               <td  class='alignRight'>{{Command->GetTotalWhiteStripe()}}&euro;</td>
           </tr>
           
       </table>
   </div> 
       
    <div class='col-md-6'>
        <form id="payment-form" class='paymentForm'>
            <h3>{{GetCode(Swcf.Payement)}}</h3>
            
            <div id="link-authentication-element">
              <!-- Elements will create authentication element here -->
            </div>
            <div id="payment-element">
              <!-- Elements will create form elements here -->
            </div>
            <div class='center marginTop' style='margin-top:15px'>
                <button id="submit" class='btn btn-primary'>{{GetCode(Swcf.PayNow)}}</button>
            </div>
            <div id="error-message" class="error">
              <!-- Display error message to your customers here -->
            </div>
          </form>
            
            {{if stripeMode == true}}
             4242 4242 4242 4242	-  12/34 - 567 <br/>
                4360 0000 0100 0005	-- 03/2030 - 737
            {{/if stripeMode == true}}
           
    </div>       
</section>

<script>

const stripe = Stripe('{{stripeKey}}');

const appearance = { /* appearance */ };
const options = { /* options */ };
const clientSecret ='{{clientSecret}}';
const elements = stripe.elements({clientSecret, appearance });
const paymentElement = elements.create('payment', options);
paymentElement.mount('#payment-element');

 const paymentForm = document.querySelector('#payment-form');
        paymentForm.addEventListener('submit', async (e) => {
          // Avoid a full page POST request.
          e.preventDefault();
          let errorMessage = document.getElementById("error-message");
           
          // Disable the form from submitting twice.
          paymentForm.querySelector('button').disabled = true;

          // Confirm the card payment that was created server side:
          const {error} = await stripe.confirmPayment({
            elements,
            confirmParams: {
              return_url: document.location.href.replace("Pay", "ValidationPay")   
            }
          });
          if(error) {
              
            errorMessage.innerHTML = error.message;
            // Re-enable the form so the customer can resubmit.
            paymentForm.querySelector('button').disabled = false;
            return;
          }
        });
     
</script>
