Open-ILS/src/templates/opac/myopac/main_payment_form.tt2

   1 [%  PROCESS "opac/parts/header.tt2";
   2     PROCESS "opac/parts/misc_util.tt2";
   3     WRAPPER "opac/parts/myopac/main_base.tt2";
   4     myopac_page = "main";
   5     myopac_main_page = "payment_form";
   6
   7     last_chance = CGI.param("last_chance");
   8
   9     IF myopac_main_page == "payment_form" AND
  10         ctx.get_org_setting(ctx.user.home_ou.id, 'credit.processor.stripe.enabled') AND ctx.get_org_setting(ctx.user.home_ou.id, 'credit.processor.default') == 'Stripe';
  11         ctx.use_stripe = 1;
  12     END %]
  13
  14 <a name="payment"> </a>
  15 <h3 class="sr-only">[% l('Pay Charges') %]</h3>
  16 [% IF ctx.fines.balance_owed <= 0 %]
  17 <div>
  18     [% l("The minimum amount you can pay is \$0.01.") %]
  19 </div>
  20 [% ELSE %]
  21 [% IF ctx.use_stripe %]
  22 <noscript>
  23     [% l("Your browser does not have Javascript enabled, and we cannot " _
  24         "process credit card payments without it.  Please change your " _
  25         "browser settings and try again.") %]
  26 </noscript>
  27 <script type="text/javascript">
  28 function build_stripe_form() {
  29     var elements = stripe.elements();
  30
  31     var style = {
  32         base: {
  33             color: '#32325d',
  34             fontFamily: '"Helvetica Neue", Helvetica, sans-serif',
  35             fontSmoothing: 'antialiased',
  36             fontSize: '16px',
  37             '::placeholder': {
  38                 color: '#aab7c4'
  39             }
  40         },
  41         invalid: {
  42             color: '#fa755a',
  43             iconColor: '#fa755a'
  44         }
  45     };
  46
  47     var card = elements.create('card', {style: style});
  48     card.mount('#card-element');
  49
  50     // real-time validation
  51     card.on('change', function(event) {
  52       var displayError = document.getElementById('card-errors');
  53       if (event.error) {
  54         displayError.textContent = event.error.message;
  55       } else {
  56         displayError.textContent = '';
  57       }
  58     });
  59
  60     // let's try some auto-focus
  61     card.on('ready', function(event) {
  62         try { card.focus(); } catch(E) { console.log('failed to focus card element',E); }
  63     });
  64
  65     var form = document.getElementById('payment-form');
  66     form.addEventListener('submit', function(event) {
  67       event.preventDefault();
  68
  69       stripe.createToken(card).then(function(result) {
  70         if (result.error) {
  71           // Inform the user if there was an error.
  72           var errorElement = document.getElementById('card-errors');
  73           errorElement.textContent = result.error.message;
  74         } else {
  75           // Send the token to your server.
  76           stripeTokenHandler(result.token);
  77         }
  78       });
  79     });
  80
  81     function stripeTokenHandler(token) {
  82       var form = document.getElementById('payment-form');
  83       var hiddenInput = document.createElement('input');
  84       hiddenInput.setAttribute('type', 'hidden');
  85       hiddenInput.setAttribute('name', 'stripe_token');
  86       hiddenInput.setAttribute('value', token.id);
  87       form.appendChild(hiddenInput);
  88
  89       form.submit();
  90     }
  91 }
  92 [% IF ctx.want_jquery %]
  93     // jquery won't actually load until after this execution thread
  94     setTimeout(function() { $(document).ready(build_stripe_form) }, 0);
  95 [% ELSE %]
  96     // but jquery is preferable to doing this
  97     setTimeout(build_stripe_form,0);
  98 [% END %]
  99 </script>
 100 <form action="[% ctx.opac_root %]/myopac/main_pay_init" method="post" id="payment-form">
 101   <div class="form-row">
 102     <label for="card-element">
 103       <h1>Credit Card Information</h1>
 104     </label>
 105     <div id="card-element">
 106       <!-- A Stripe Element will be inserted here. -->
 107     </div>
 108
 109     <!-- Used to display form errors. -->
 110     <div id="card-errors" role="alert"></div>
 111   </div>
 112
 113   <button class="opac-button">Submit Payment</button>
 114 </form>
 115 [% ELSE %]
 116 <div id="pay_fines_now">
 117     [% IF last_chance %]
 118
 119     <p><big>[% l("Are you sure you are ready to charge ") %]
 120          <strong> [% l("[_1] ", money(ctx.fines.balance_owed))%]</strong>
 121         [% l("to your credit card?") %]</big></p>
 122     <form action="[% ctx.opac_root %]/myopac/main_pay_init" method="post">
 123         [% FOR k IN CGI.Vars;
 124             NEXT UNLESS k;
 125             FOR val IN CGI.param(k) %]
 126         <input type="hidden" name="[% k | html %]" value="[% val | html %]" />
 127         [% END; END %]
 128
 129         <input type="submit" value="[% l('Submit') %]" class="opac-button"/>
 130         <a href="[% mkurl(ctx.opac_root _ '/myopac/main#selected_fines', {}, 1) %]" class="opac-button">[% l('Cancel') %]</a>
 131
 132      <table title="[% l('List of Transactions') %]" id="acct_fines_confirm_header"
 133         class="table_no_border_space table_no_cell_pad" style="padding-top:1em;">
 134    <thead>
 135       <tr>
 136         <th>[% l('Charge/Fee') %]</th>
 137         <th>[% l('Amount') %]</th>
 138      </tr>
 139    </thead>
 140    <tbody>
 141       [%
 142        FOR f IN ctx.fines.circulation;
 143          NEXT IF CGI.param('xact').size &&
 144             !CGI.param('xact').grep(f.xact.id).size;
 145          attrs = {marc_xml => f.marc_xml};
 146          IF f.marc_xml;
 147              PROCESS get_marc_attrs args=attrs;
 148          ELSIF f.xact.reservation;
 149               attrs.title = f.xact.reservation.target_resource_type.name;
 150          END %]
 151          <tr>
 152             <td>[% attrs.title | html %]</td>
 153             <td class="text-right">[% money(f.xact.balance_owed) %]</td>
 154          </tr>
 155           [%
 156           END;
 157           FOR f IN ctx.fines.grocery;
 158               NEXT IF CGI.param('xact_misc').size &&
 159                   !CGI.param('xact_misc').grep(f.xact.id).size %]
 160               <tr>
 161                  <td>[% f.xact.last_billing_type | html %]</td>
 162                  <td class="text-right">[% money(f.xact.balance_owed) %]</td>
 163             </tr>
 164         [% END %]
 165      </tbody>
 166    </table>
 167
 168     <p style="padding-top: 2em;">
 169     <big>[% l("Are you sure you are ready to charge ") %]
 170          <strong> [% l("[_1] ", money(ctx.fines.balance_owed))%]</strong>
 171         [% l("to your credit card?") %]</big></p>
 172         <input type="submit" value="[% l('Submit') %]" class="opac-button"/>
 173         <a href="[% mkurl(ctx.opac_root _ '/myopac/main#selected_fines', {}, 1) %]" class="opac-button">[% l('Cancel') %]</a>
 174     [% ELSE %]
 175
 176     <form method="post" id="payment_form" action='#payment'>
 177         <input type="hidden" name="last_chance" value="1" />
 178         [% FOR xact IN CGI.param('xact') %]
 179         <input type="hidden" name="xact" value="[% xact | html %]" />
 180         [% END %]
 181         [% FOR xact IN CGI.param('xact_misc') %]
 182         <input type="hidden" name="xact_misc" value="[% xact | html %]" />
 183         [% END %]
 184
 185          <table id="billing_info_table">
 186           <tbody>
 187               <tr>
 188                   <td colspan='2' class="cc_header"><strong>[% l('Billing Information') %]</strong></td>
 189                </tr>
 190                <tr>
 191                 <td><label for="payment-first-name">[% l('First Name') %]</label></td>
 192                     <td><input type="text"  name="billing_first" id="payment-first-name"
 193                         value="[% ctx.user.first_given_name | html %]" /></td>
 194                 </tr>
 195                 <tr>
 196                     <td><label for="payment-last-name">[% l('Last Name') %]</label></td>
 197                     <td><input type="text" name="billing_last" id="payment-last-name"
 198                         value="[% ctx.user.family_name | html %]" /></td>
 199                 </tr>
 200
 201                 <tr>
 202                     <td><label for="payment-email-addr">[% l('Email Address') %]</label></td>
 203                     <td>
 204
 205                         <input id="payment-email-addr" type="text"
 206                              value="[% ctx.user.email | html %]" disabled="disabled"
 207                             readonly="readonly" />
 208                         <a title="[% l('Update Email Address') %]"
 209                             href="[% ctx.opac_root %]/myopac/update_email?return_to_referer=1">[% l("Update") %]</a>
 210                     </td
 211                 </tr>
 212                 <tr>
 213                     <td><label for="payment-billing-address">[% l('Street Address') %]</label></td>
 214                     <td><input type="text" name="billing_address" id="payment-billing-address"
 215                         value="[% ctx.user.billing_address.street1 _ ctx.user.billing_address.street2 | html %]" /></td>
 216                 </tr>
 217                 <tr>
 218                     <td><label for="payment-billing-city">[% l('City' )%]</label></td>
 219                     <td><input type="text" name="billing_city" id="payment-billing-city"
 220                         value="[% ctx.user.billing_address.city | html %]" /></td>
 221                 </tr>
 222                 <tr>
 223                     <td><label for="payment-billing-state">[% l('State or Province') %]</label></td>
 224                     <td><input type="text" name="billing_state" id="payment-billing-state"
 225                         value="[% ctx.user.billing_address.state | html %]" /></td>
 226                 </tr>
 227                 <tr>
 228                     <td><label for="paymenet-billing-zip">[% l('ZIP or Postal Code') %]</label></td>
 229                     [% USE zip=String(ctx.user.billing_address.post_code) %]
 230                     <td><input type="tel" pattern="[0-9]*" maxlength="5" size="5" name="billing_zip" id="paymenet-billing-zip"
 231                         value="[% zip.truncate(5)  %]" /></td>
 232                 </tr>
 233                </tbody>
 234                </table>
 235
 236                <table id="credit_card_info_table">
 237                <tbody>
 238                 <tr>
 239                   <td colspan='2' class="cc_header"><strong>[% l('Credit Card Information') %]</strong></td>
 240                 </tr>
 241                 <tr>
 242                     <td><label for="payment-credit-card">[% l('Credit Card #') %]</label></td>
 243
 244                      <!-- Make type tel, which prompts for numbers in mobile -->
 245                     <td><input type="tel" pattern="[0-9]*" maxlength="16" id="payment-credit-card" required name="number"/></td>
 246                 </tr>
 247                 <tr>
 248                     <td><label for="payment-security-code">[% l('Security Code') %]</label></td>
 249                     <td>
 250                          <!-- Make type tel, which prompts for numbers in mobile -->
 251                         <input type="tel" pattern="[0-9]*" size="4" maxlength="5" id="payment-security-code" name="cvv2"/></td>
 252                 </tr>
 253                 <tr>
 254                     <td><label for="payment-expire-month">[% l('Expiration Month') %]</label></td>
 255                     <td>
 256                         <select id="payment-expire-month" required name="expire_month">
 257                             <option value="-1"></option>
 258                             <option value="01">[% l("January (1)") %]</option>
 259                             <option value="02">[% l("February (2)") %]</option>
 260                             <option value="03">[% l("March (3)") %]</option>
 261                             <option value="04">[% l("April (4)") %]</option>
 262                             <option value="05">[% l("May (5)") %]</option>
 263                             <option value="06">[% l("June (6)") %]</option>
 264                             <option value="07">[% l("July (7)") %]</option>
 265                             <option value="08">[% l("August (8)") %]</option>
 266                             <option value="09">[% l("September (9)") %]</option>
 267                             <option value="10">[% l("October (10)") %]</option>
 268                             <option value="11">[% l("November (11)") %]</option>
 269                             <option value="12">[% l("December (12)") %]</option>
 270                         </select>
 271                     </td>
 272                 </tr>
 273                 <tr>
 274                     <td><label for="payment-expire-year">[% l('Expiration Year') %]</label></td>
 275                     <td>
 276                         <select id="payment-expire-year" name="expire_year">
 277                         [% year = date.format(date.now, '%Y');
 278                         y = year;
 279                         WHILE y < year + 10; # show ten years starting now %]
 280                             <option value="[% y %]">[% y %]</option>
 281                         [% y = y + 1; END %]
 282                         </select>
 283                     </td>
 284                 </tr>
 285                 <tr>
 286                    <td colspan='2'>
 287                        <div id="payment_actions">
 288                           [% l('Total amount:') %]
 289                            <strong>[% money(ctx.fines.balance_owed) %]</strong><br />
 290
 291                          <input type="submit" id="payment_submit" value="[% l('Next') %]" class="opac-button" />
 292                          <a href="[% mkurl(ctx.opac_root _ '/myopac/main', {}, 1) %]" class="opac-button">[% l('Cancel') %]</a>
 293                          <br/>
 294
 295
 296                        </div>
 297                    </td>
 298                 </tr>
 299
 300           </tbody>
 301         </table>
 302          [% INCLUDE "opac/parts/myopac/main_refund_policy.tt2" %]
 303
 304     [% END %]
 305     </form>
 306 </div>
 307 [% END %]
 308 [% END %]
 309 [% END %]