LP1895679: Add Stripe v3 support to Bootstrap OPAC
[Evergreen.git] / 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.createToken(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 token to your server.
55           stripeTokenHandler(result.token);
56         }
57       });
58     });
59
60     function stripeTokenHandler(token) {
61       var form = document.getElementById('payment_form');
62       var hiddenInput = document.createElement('input');
63       hiddenInput.setAttribute('type', 'hidden');
64       hiddenInput.setAttribute('name', 'stripe_token');
65       hiddenInput.setAttribute('value', token.id);
66       form.appendChild(hiddenInput);
67
68       form.submit();
69     }
70 }
71     $(document).ready(build_stripe_form);
72 </script>
73 <form action="#payment" method="post" id="payment_form">
74   <input type="hidden" name="last_chance" value="1" />
75   [% FOR xact IN CGI.param('xact') %]
76   <input type="hidden" name="xact" value="[% xact | html %]" />
77   [% END %]
78   [% FOR xact IN CGI.param('xact_misc') %]
79   <input type="hidden" name="xact_misc" value="[% xact | html %]" />
80   [% END %]
81   <div>
82     <label for="card-element">
83       <h3>[% l('Credit Card Information') %]</h3>
84     </label>
85     <div id="card-element">
86       <!-- A Stripe Element will be inserted here. -->
87     </div>
88
89     <!-- Used to display form errors. -->
90     <div id="card-errors" role="alert"></div>
91   </div>
92   <div id="payment_actions">
93     <button type="submit" id="payment_submit" class="btn btn-confirm"><i class="fas fa-arrow-circle-right"></i> [% l('Next') %]</button>
94     <a href="[% mkurl(ctx.opac_root _ '/myopac/main', {}, 1) %]" class="btn btn-deny"><i class="fas fa-ban"></i> [% l('Cancel') %]</a>
95   </div>
96
97   [% INCLUDE "opac/parts/myopac/main_refund_policy.tt2" %]
98
99 </form>