Update to Stripe v3

html/captive-portal/content/billing/stripe.js

@@ -1,48 +1,47 @@
 /* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 
+
 $(function() {
 
   var varsEl = document.getElementById('variables');
   var vars = JSON.parse(variables.textContent || variables.innerHTML);
-
-  function stripeResponseHandler(status, response) {
-    var $form = $('#payment-form');
-
-    if (response.error) {
-      // Show the errors on the form
-      $form.find('.payment-errors p').text(response.error.message);
-      $form.find('.payment-errors').removeClass('hide');
-    }
-    else {
-      // response contains id and card, which contains additional card details
-      var token = response.id;
-      // Insert the token into the form so it gets submitted to the server
-      $form.append($('<input type="hidden" name="stripeToken" />').val(token));
-      // and submit
-      $form.get(0).submit();
-    }
-  }
 
-  if (typeof Stripe !== 'undefined' ) {
-    // This identifies your website in the createToken call below
-    Stripe.setPublishableKey(vars.publishable_key);
+  var stripe = Stripe(vars.publishable_key);
+  var elements = stripe.elements();
+  var card = elements.create("card");
+  card.mount("#card-element");
 
-    $('#payment-form').submit(function(event) {
-      var $form = $(this);
+  // Create a token when the form is submitted.
+  var form = document.getElementById('payment-form');
+  form.addEventListener('submit', function(e) {
+    e.preventDefault();
+    createToken();
+  });
 
-      // Disable the submit button to prevent repeated clicks
-      $form.find('button').prop('disabled', true);
-
-      Stripe.card.createToken($form, stripeResponseHandler);
+  function stripeTokenHandler(token) {
+    // Insert the token ID into the form so it gets submitted to the server
+    var form = document.getElementById('payment-form');
+    var hiddenInput = document.createElement('input');
+    hiddenInput.setAttribute('type', 'hidden');
+    hiddenInput.setAttribute('name', 'stripeToken');
+    hiddenInput.setAttribute('value', token.id);
+    form.appendChild(hiddenInput);
 
-      // Prevent the form from submitting with the default action
-      return false;
-    });
-  }
-  else {
-    var $form = $('#payment-form');
-    $form.find('.payment-errors p').text('Unable to proceed with payment please contact your service provider');
-    $form.find('.payment-errors').removeClass('hide');
+    // Submit the form
+    form.submit();
   }
 
+  function createToken() {
+    stripe.createToken(card).then(function(result) {
+      if (result.error) {
+        // Inform the user if there was an error
+        var errorElement = document.getElementById('card-errors');
+        errorElement.textContent = result.error.message;
+      } else {
+        // Send the token to your server
+        stripeTokenHandler(result.token);
+      }
+    });
+  };
+
 });

html/captive-portal/lib/captiveportal.pm

@@ -142,7 +142,7 @@ sub csp_server_headers {
     my ($c) = @_;
 
     my $captive_portal_network_detection_ip = $Config{'captive_portal'}{'network_detection_ip'};
-    $c->response->header('Content-Security-Policy' => "default-src 'none'; frame-src https://js.stripe.com; script-src 'self' https://js.stripe.com https://jstest.authorize.net https://js.authorize.net; connect-src 'self'; img-src 'self' http://$captive_portal_network_detection_ip/; style-src 'self'; font-src 'self';");
+    $c->response->header('Content-Security-Policy' => "default-src 'none'; frame-src https://js.stripe.com https://hooks.stripe.com; script-src 'self' https://js.stripe.com https://jstest.authorize.net https://js.authorize.net; connect-src 'self' https://api.stripe.com; img-src 'self' http://$captive_portal_network_detection_ip/; style-src 'self'; font-src 'self';");
 }
 
 =head2 user_cache

html/captive-portal/templates/billing/confirm_Stripe.html

@@ -3,45 +3,30 @@
 <form action="/billing/[% billing.id %]/verify" method="POST" id="payment-form">
   <div class="payment-errors o-media o-media--error u-padding u-margin hide">
     <div class="o-media__img">[% flashIcon(level='error') %]</div>
-    <p class="o-media__body"></p>
+    <p id="card-errors" class="o-media__body"></p>
   </div>
 
   <div class="o-layout o-layout--center u-margin-top">
     <div class="o-layout__item u-1/1 u-2/3@tablet u-3/5@desktop">
 
       <div class="input-container">
-        <label for="name">Name</label>
-        <input id="name" type="text" size="20" data-stripe="name" />
+        <label for="number">Credit card</label>
       </div>
 
-      <div class="input-container">
-        <label for="number">Card Number</label>
-        <input id="number" type="text" size="20" data-stripe="number"/>
-      </div>
-
-      <div class="input-container">
-        <label for="cvc">CVC</label>
-        <input id="cvc" type="text" size="4" data-stripe="cvc"/>
-      </div>
-
-      <div class="input-container">
-        <label>Expiration (MM/YYYY)</label>
-        <input class="u-1/4" type="number" min="1" max="12" placeholder="MM" data-stripe="exp-month"/>
-        /
-        <input class="u-1/2" type="number" placeholder="YYYY" data-stripe="exp-year"/>
+      <div id="card-element">
       </div>
 
       <div class="u-padding-vertical">
         <button type="submit" name="submit-btn" class="c-btn c-btn--primary u-1/1">
-          [% i18n("Continue") %]
+          [% i18n("Pay") %]
         </button>
       </div>
     </div>
   </div>
 
 </form>
 
-<script type="text/javascript" src="https://js.stripe.com/v2/"></script>
+<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
 <script id="variables" type="text/json">
   {
     "publishable_key": "[% billing.publishable_key %]"

lib/pf/Authentication/Source/StripeSource.pm

@@ -109,6 +109,18 @@ sub _send_json {
     return $self->_do_request($curl);
 }
 
+=head2 _get_json
+
+GET JSON data from the Stripe API
+
+=cut
+
+sub _get_json {
+    my ($self, $curl, $path) = @_;
+    $self->_set_url($curl, $path);
+    return $self->_do_request($curl);
+}
+
 =head2 _send_form
 
 send form data
@@ -240,12 +252,15 @@ sub subscribe_customer {
     }
 
     my ($code, $data);
-    if(my $cus = $self->get_customer_by_email($session->{email})) {
-        ($code, $data) = $self->_send_form($self->curl, "v1/customers/".$cus->{id}, $object);
-    }
-    else {
-        ($code, $data) = $self->_send_form($self->curl, "v1/customers", $object);
+    ($code, $data) = $self->_send_form($self->curl, "v1/customers", $object);
+
+    my $subscriptions = $self->_get_json($self->curl, "v1/subscriptions?customer=".$data->{id});
+    if($subscriptions->{data}->[0]->{status} ne "active") {
+        my $msg = "The subscription is not active after payment(".$subscriptions->{data}->[0]->{status}."). Card payment didn't go through.";
+        $logger->error($msg);
+        return (500, {error => {message => $msg}});
     }
+
     $session->{stripe_customer_id} = $data->{id};
     return ($code, $data);
 }