Open-ILS/src/templates-bootstrap/opac/myopac/stripe_payment_form.tt2

   1 <noscript>
   2     [% l("Your browser does not have Javascript enabled, and we cannot " _
   3         "process credit card payments without it.  Please adjust your " _
   4         "browser settings and try again.") %]
   5 </noscript>
   6 <script type="text/javascript">
   7 function build_stripe_form() {
   8     var elements = stripe.elements();
   9
  10     var style = {
  11         base: {
  12             color: '#32325d',
  13             fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
  14             fontSmoothing: 'antialiased',
  15             fontSize: '16px',
  16             '::placeholder': {
  17                 color: '#aab7c4'
  18             }
  19         },
  20         invalid: {
  21             color: '#fa755a',
  22             iconColor: '#fa755a'
  23         }
  24     };
  25
  26     var card = elements.create('card', {style: style});
  27     card.mount('#card-element');
  28
  29     // real-time validation
  30     card.on('change', function(event) {
  31       var displayError = document.getElementById('card-errors');
  32       if (event.error) {
  33         displayError.textContent = event.error.message;
  34       } else {
  35         displayError.textContent = '';
  36       }
  37     });
  38
  39     // let's try some auto-focus
  40     card.on('ready', function(event) {
  41         try { card.focus(); } catch(E) { console.log('failed to focus card element',E); }
  42     });
  43
  44     var form = document.getElementById('payment_form');
  45     form.addEventListener('submit', function(event) {
  46       event.preventDefault();
  47
  48       stripe.confirmCardPayment('[% ctx.stripe_client_secret %]',{ payment_method: { card: card} }).then(function(result) {
  49         if (result.error) {
  50           // Inform the user if there was an error.
  51           var errorElement = document.getElementById('card-errors');
  52           errorElement.textContent = result.error.message;
  53         } else {
  54           // Send the payment intent to your server.
  55           stripePaymentIntentHandler(result.paymentIntent);
  56         }
  57       });
  58     });
  59
  60     function stripePaymentIntentHandler(payment_intent) {
  61       var form = document.getElementById('payment_form');
  62       var hiddenInput = document.createElement('input');
  63       hiddenInput.setAttribute('type', 'hidden');
  64       hiddenInput.setAttribute('name', 'stripe_payment_intent');
  65       hiddenInput.setAttribute('value', payment_intent.id);
  66       form.appendChild(hiddenInput);
  67       var hiddenInput2 = document.createElement('input');
  68       hiddenInput2.setAttribute('type', 'hidden');
  69       hiddenInput2.setAttribute('name', 'stripe_client_secret');
  70       hiddenInput2.setAttribute('value', payment_intent.client_secret);
  71       form.appendChild(hiddenInput2);
  72
  73       form.submit();
  74     }
  75 }
  76     $(document).ready(build_stripe_form);
  77 </script>
  78 <form action="[% ctx.opac_root %]/myopac/main_pay_init" method="post" id="payment_form">
  79   <input type="hidden" name="last_chance" value="1" />
  80   [% FOR xact IN CGI.param('xact') %]
  81   <input type="hidden" name="xact" value="[% xact | html %]" />
  82   [% END %]
  83   [% FOR xact IN CGI.param('xact_misc') %]
  84   <input type="hidden" name="xact_misc" value="[% xact | html %]" />
  85   [% END %]
  86   <div>
  87     <label for="card-element">
  88       <h3>[% l('Credit Card Information') %]</h3>
  89     </label>
  90     <div id="card-element">
  91       <!-- A Stripe Element will be inserted here. -->
  92     </div>
  93
  94     <!-- Used to display form errors. -->
  95     <div id="card-errors" role="alert"></div>
  96   </div>
  97   <div id="payment_actions">
  98     <button type="submit" id="payment_submit" class="btn btn-confirm"><i class="fas fa-arrow-circle-right"></i> [% l('Submit Payment') %]</button>
  99     <a href="[% mkurl(ctx.opac_root _ '/myopac/main', {}, 1) %]" class="btn btn-deny"><i class="fas fa-ban"></i> [% l('Cancel') %]</a>
 100   </div>
 101
 102   [% INCLUDE "opac/parts/myopac/main_refund_policy.tt2" %]
 103
 104 </form>