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.") %]
6 <script type="text/javascript">
7 function build_stripe_form() {
8 var elements = stripe.elements();
13 fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
14 fontSmoothing: 'antialiased',
26 var card = elements.create('card', {style: style});
27 card.mount('#card-element');
29 // real-time validation
30 card.on('change', function(event) {
31 var displayError = document.getElementById('card-errors');
33 displayError.textContent = event.error.message;
35 displayError.textContent = '';
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); }
44 var form = document.getElementById('payment_form');
45 form.addEventListener('submit', function(event) {
46 event.preventDefault();
48 stripe.createToken(card).then(function(result) {
50 // Inform the user if there was an error.
51 var errorElement = document.getElementById('card-errors');
52 errorElement.textContent = result.error.message;
54 // Send the token to your server.
55 stripeTokenHandler(result.token);
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);
71 $(document).ready(build_stripe_form);
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 %]" />
78 [% FOR xact IN CGI.param('xact_misc') %]
79 <input type="hidden" name="xact_misc" value="[% xact | html %]" />
82 <label for="card-element">
83 <h3>[% l('Credit Card Information') %]</h3>
85 <div id="card-element">
86 <!-- A Stripe Element will be inserted here. -->
89 <!-- Used to display form errors. -->
90 <div id="card-errors" role="alert"></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>
97 [% INCLUDE "opac/parts/myopac/main_refund_policy.tt2" %]