From 3659e2a6fa66ec049c546c105bfb170b48f118e3 Mon Sep 17 00:00:00 2001
From: Jason Boyer <JBoyer1@library.in.gov>
Date: Thu, 19 Sep 2013 09:16:30 -0400
Subject: [PATCH] Rough draft of integrating Stripe support into the opac
 payment page.

---
 .../templates/opac/myopac/main_payment_form.tt2    | 59 ++++++++++++++--------
 Open-ILS/src/templates/opac/parts/base.tt2         | 41 +++++++++++++--
 2 files changed, 76 insertions(+), 24 deletions(-)

diff --git a/Open-ILS/src/templates/opac/myopac/main_payment_form.tt2 b/Open-ILS/src/templates/opac/myopac/main_payment_form.tt2
index 8da0287e85..c5cd8ed029 100644
--- a/Open-ILS/src/templates/opac/myopac/main_payment_form.tt2
+++ b/Open-ILS/src/templates/opac/myopac/main_payment_form.tt2
@@ -5,7 +5,7 @@
     myopac_main_page = "payment_form";
 
     last_chance = CGI.param("last_chance");
-
+    use_stripe = ctx.get_org_setting(ctx.user.home_ou.id, 'opac.processor.stripe.enabled');
 %]
 [% IF ctx.fines.balance_owed <= 0 %]
 <div>
@@ -25,7 +25,11 @@
         <input type="submit" value="[% l('Submit Payment') %]" />
         <a href="[% mkurl(ctx.opac_root _ '/myopac/main', {}, 1) %]">[% l('Cancel') %]</a>
     [% ELSE %]
-    <form method="post">
+    <form method="post" id="payment_form"
+    [% IF use_stripe %]
+    onsubmit="return stripe_onsubmit();"
+    [% ENDIF %]
+    >
         <input type="hidden" name="last_chance" value="1" />
         [% FOR xact IN CGI.param('xact') %]
         <input type="hidden" name="xact" value="[% xact | html %]" />
@@ -33,7 +37,9 @@
         [% FOR xact IN CGI.param('xact_misc') %]
         <input type="hidden" name="xact_misc" value="[% xact | html %]" />
         [% END %]
-
+        [% IF use_stripe %]
+        <input type="hidden" name="stripe_token" id="stripe_token" />
+        [% ENDIF %]
         <table>
             <tbody>
                 <tr>
@@ -117,32 +123,37 @@
                 <tr>
                   <td colspan='2'><strong>[% l('Credit Card Information') %]</strong></td>
                 </tr>
-                <!-- Technically not needed since card type is derived from the CC number
-                <tr>
-                    <td>[% l('Type of Card') %]</td>
-                    <td>
-                        <select name="type">
-                            <option value='VISA'>[% l('VISA') %]</option>
-                            <option value='MasterCard'>[% l('MasterCard') %]</option>
-                            <option value='American Express'>[% l('American Express') %]</option>
-                        </select>
-                    </td>
-                </tr>
-                -->
                 <tr>
                     <td>[% l('Credit Card #') %]</td>
-                    <td><input type="text" name="number" maxlength="16" /></td>
+                    <td><input type="number" maxlength="16" 
+                    [% IF use_stripe %]
+                    data-stripe="number"
+                    [% ELSE %]
+                    name="number"
+                    [% ENDIF %]
+                    /></td>
                 </tr>
                 <tr>
                     <td>[% l('Security Code') %]</td>
                     <td>
-                        <input type="text" size="4" maxlength="5" name="cvv2" />
-                    </td>
+                        <input type="number" size="4" maxlength="5" 
+                        [% IF use_stripe %]
+                        data-stripe="cvc"
+                        [% ELSE %]
+                        name="cvv2"
+                        [% ENDIF %]
+                        /></td>
                 </tr>
                 <tr>
                     <td>[% l('Expiration Month') %]</td>
                     <td>
-                        <select name="expire_month">
+                        <select 
+                        [% IF use_stripe %]
+                        data-stripe="exp_month"
+                        [% ELSE %]
+                        name="expire_month"
+                        [% END IF %]
+                        >
                             <option value="01">[% l("January") %]</option>
                             <option value="02">[% l("February") %]</option>
                             <option value="03">[% l("March") %]</option>
@@ -161,7 +172,13 @@
                 <tr>
                     <td>[% l('Expiration Year') %]</td>
                     <td>
-                        <select name="expire_year">
+                        <select 
+                        [% IF use_stripe %]
+                        data-stripe="exp_year"
+                        [% ELSE %]
+                        name="expire_year"
+                        [% ENDIF %]
+                        >
                         [% year = date.format(date.now, '%Y');
                         y = year;
                         WHILE y < year + 10; # show ten years starting now %]
@@ -172,7 +189,7 @@
                 </tr>
                 <tr>
                     <td colspan='2' align="center">
-                        <input type="submit" value="[% l('Next') %]" />
+                        <input type="submit" id="payment_submit" value="[% l('Next') %]" />
                         <a href="[% mkurl(ctx.opac_root _ '/myopac/main', {}, 1) %]">[% l('Cancel') %]</a>
                     </td>
                 </tr>
diff --git a/Open-ILS/src/templates/opac/parts/base.tt2 b/Open-ILS/src/templates/opac/parts/base.tt2
index 95b3c31a14..cd99f7a319 100644
--- a/Open-ILS/src/templates/opac/parts/base.tt2
+++ b/Open-ILS/src/templates/opac/parts/base.tt2
@@ -4,9 +4,9 @@
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         [% IF ctx.refresh %]
-        <meta http-equiv="refresh" content="[% ctx.refresh %]">
+        <meta http-equiv="refresh" content="[% ctx.refresh %]" />
         [% ELSIF ctx.authtime %]
-        <meta http-equiv="refresh" content="[% ctx.authtime %]; url=[% ctx.logout_page %]">
+        <meta http-equiv="refresh" content="[% ctx.authtime %]; url=[% ctx.logout_page %]" />
         [% END %]
         <meta name = "viewport" content = "initial-scale = 1.0">
         <link rel="stylesheet" type="text/css" href="[% ctx.media_prefix %]/css/skin/default/opac/semiauto.css" />
@@ -19,7 +19,42 @@
         </style>
         [% END %]
         [% INCLUDE 'opac/parts/goog_analytics.tt2' %]
-    </head>
+        [% IF myopac_main_page == "payment_form" AND ctx.get_org_setting(ctx.user.home_ou.id, 'opac.processor.stripe.enabled')%]
+        <script type="text/javascript" src="https://js.stripe.com/v2/"></script> <!-- use an ou setting for this url? -->
+        <script type="text/javascript">
+        // This script is only displayed when logged in, so ctx.user.home_ou is always available
+        Stripe.setPublishableKey('[% ctx.get_org_setting(ctx.user.home_ou.id, 'credit.processor.stripe.pubkey') %]');
+
+        function stripe_onsubmit() {
+            var form = document.getElementById("stripe_form");
+            var button = document.getElementById("payment_submit");
+
+            button.disabled = true;
+
+            Stripe.card.createToken(form, stripe_callback);
+
+            return false;
+        }
+
+        function stripe_callback(status, response) {
+            var form = document.getElementById("payment_form");
+            var button = document.getElementById("payment_submit");
+            var stripe_token = document.getElementById("stripe_token");
+
+            if(response.error) {
+                alert(response.error.message);
+                button.disabled = false;
+                return;
+            }
+
+            stripe_token.value = response.id; // response.id is the token id, though there are more fields available if needed.
+            form.setAttribute("onsubmit","");
+            form.submit();
+        }
+        </script>
+        [% END %]
+
+        </head>
     <body[% IF want_dojo; ' class="tundra"'; END %]>
         [% content %] 
         [% INCLUDE 'opac/parts/footer.tt2' %]
-- 
2.11.0