Merge pull request #135 from CodeNow/update-payment-form

update terms

src/html/private/setup-payment/payment-hero.hbs

@@ -5,36 +5,42 @@
   <p class="p text-center">To show our appreciation, we promised preview users a 50% discount off our regular price for their first billing year.</p>
   <div class="card card-flipper">
     <div class="grid-block vertical justify-center card-a padding-md">
-      <p class="p">Add your payment info to claim your discount. Don’t worry, you won’t be charged until we enter our public beta (we’ll email you).</p>
+      <p class="p p-header">Add your payment info to claim your discount. Don’t worry, you won’t be charged until we enter our public beta (we’ll email you).</p>
       <ul class="grid-block shrink vertical ul">
         <li class="grid-block li">
-          <svg class="grid-content shrink icons">
+          <svg class="grid-content shrink icons li-anchor">
             <use xlink:href="#icons-check">
           </svg>
           <span>Your current estimated charge is <strong class="weight-strong">$<span class="js-replace-price"></span></strong> monthly after your discount.</span>
+        <li class="grid-block vertical li">
+          <div class="grid-block">
+            <svg class="grid-content shrink icons li-anchor">
+              <use xlink:href="#icons-check">
+            </svg>
+            <span>Your monthly pricing is based on your organization’s number of users and configuration templates.
+              <a href="private/preview-pricing/" class="link" target="_blank">Details
+                <svg class="icons">
+                  <use xlink:href="#icons-external">
+                </svg>
+              </a>
+            </span>
+          </div>
+          <ul class="grid-block vertical ul">
+            <li class="grid-content li">Adding or removing configuration templates may automatically adjust your pricing plan for your next billing period.
+            <li class="grid-content li">Adding or removing users will take effect immediately, and charges will be prorated as part of your next billing period.
+          </ul>
         <li class="grid-block li">
-          <svg class="grid-content shrink icons">
-            <use xlink:href="#icons-check">
-          </svg>
-          <span>Your monthly rate is calculated based upon user and configuration template count each billing period.
-            <a href="private/preview-pricing/" class="link" target="_blank">Details
-              <svg class="icons">
-                <use xlink:href="#icons-external">
-              </svg>
-            </a>
-          </span>
-        <li class="grid-block li">
-          <svg class="grid-content shrink icons">
+          <svg class="grid-content shrink icons li-anchor">
             <use xlink:href="#icons-check">
           </svg>
           <span>You can cancel any time by emailing [email protected].</span>
         <li class="grid-block li">
-          <svg class="grid-content shrink icons">
+          <svg class="grid-content shrink icons li-anchor">
             <use xlink:href="#icons-check">
           </svg>
-          <span>If you cancel, you may be charged for the remaining billing period.</span>
+          <span>To avoid being charged, you must cancel by September 9<sup class="sup">th</sup>, 2016. If you cancel after that date, you may be charged for the current billing period.</span>
       </ul>
-      <small class="grid-content shrink small text-center text-gray"> By adding your payment info, you are authorizing Runnable to charge you every month, once we enter public beta, until you cancel.</small>
+      <p class="grid-content shrink p p-footer">By pressing the Add Payment Info button below, you agree to the above payment terms and are authorizing Runnable to charge the payment method you add, every month, once we enter public beta, until you cancel.</p>
       <button class="grid-content align-center justify-center shrink btn btn-lg btn-stripe" disabled>
         <div class="grid-content spinner-wrapper spinner-sm spinner-white">
           <svg class="spinner" viewbox='0 0 16 16'>

src/js/payment.js

@@ -47,12 +47,18 @@ function setUpStripe(email,orgName,stripeButton) {
       // Get the token ID to your server-side code for use.
       paymentCard.classList.add('flip');
       checkImage.classList.add('in');
+
+      // Track success
+      analytics.track('Payment Info Added');
     }
   });
 
   stripeButton.addEventListener('click',function(e) {
     handler.open();
     e.preventDefault();
+
+    // Track button click
+    analytics.track('Clicked Add Payment Info');
   });
 
   // Close Checkout on page navigation:
@@ -65,7 +71,8 @@ function setUpStripe(email,orgName,stripeButton) {
 window.addEventListener('load', function(){
   var orgName = getParameterByName('org');
   var email = getParameterByName('email');
-  var price = getParameterByName('price');
+  // ensure price has two decimal digits
+  var price = parseFloat(getParameterByName('price')).toFixed(2);
 
   if (orgName && email && price) {
     var stripeButton = document.getElementsByClassName('btn-stripe')[0];

src/styles/payment/payment-hero.scss

@@ -8,7 +8,7 @@
     color: $gray-dark;
     margin: 30px 15px 0;
     max-width: calc(100% - 30px);
-    width: 480px;
+    width: 570px;
 
     &.flip {
 
@@ -46,15 +46,22 @@
     .ul {
       font-size: 14px;
       list-style-type: none;
-      margin: 15px 15px 30px 0;
+      margin: 15px 15px 15px 0;
       padding: 0;
+
+      .ul {
+        border-left: $input-border solid $gray-lighter;
+        margin-bottom: 0;
+        margin-left: 45px;
+        padding-left: 15px;
+      }
     }
 
     .li + .li {
       margin-top: 15px;
     }
 
-    .li > .icons {
+    .li-anchor {
       color: $green;
       height: $input-xxs;
       margin: 3px 13px;
@@ -63,12 +70,20 @@
     }
 
     .p {
-      border-bottom: 1px solid $gray-lighter;
       font-size: 16px;
       margin: 15px;
+    }
+
+    .p-header {
+      border-bottom: 1px solid $gray-lighter;
       padding-bottom: 30px;
     }
 
+    .p-footer {
+      border-top: 1px solid $gray-lighter;
+      padding-top: 30px;
+    }
+
     // for external icon
     .link {
       display: inline-block;