handle 2nd confirmation on server + display confirmation modal on the client

app/assets/javascripts/directives/stripe-form.js.erb

@@ -1,7 +1,7 @@
 /* global Stripe */
 
-Application.Directives.directive('stripeForm', ['Payment',
+Application.Directives.directive('stripeForm', ['Payment', 'growl',
-  function (Payment) {
+  function (Payment, growl) {
     return ({
       restrict: 'A',
       link: function($scope, element, attributes) {
@@ -47,18 +47,46 @@ Application.Directives.directive('stripeForm', ['Payment',
           // TODO https://stripe.com/docs/payments/payment-intents/web-manual
           stripe.createPaymentMethod('card', card).then(function({ paymentMethod, error }) {
             if (error) {
-              // Show error in payment form
+              growl.error(error);
             } else {
               // Send paymentMethod.id to your server (see Step 2)
-              Payment.confirm({ payment_method_id: paymentMethod.id }).then(function (response) {
+              Payment.confirm({ payment_method_id: paymentMethod.id }, function (response) {
                 // Handle server response (see Step 3)
-                $scope.$apply(function () {
+                handleServerResponse(response);
-                  $scope[form].apply($scope, response);
-                });
               });
             }
           });
         });
+
+        function handleServerResponse(response) {
+          if (response.error) {
+            growl.error(error);
+          } else if (response.requires_action) {
+            // Use Stripe.js to handle required card action
+            stripe.handleCardAction(
+              response.payment_intent_client_secret
+            ).then(function(result) {
+              if (result.error) {
+                growl.error(error);
+              } else {
+                // The card action has been handled
+                // The PaymentIntent can be confirmed again on the server
+                Payment.confirm({ payment_intent_id: result.paymentIntent.id }, function(confirmResult) {
+                  paymentSuccess(confirmResult);
+                }).then(handleServerResponse);
+              }
+            });
+          } else {
+            paymentSuccess(response);
+          }
+        }
+
+        function paymentSuccess(response) {
+          // TODO Show success message
+          $scope.$apply(function () {
+            $scope[form].apply($scope, response);
+          });
+        }
       }
     });
   }]);

app/assets/templates/stripe/payment_modal.html.erb

@@ -1,4 +1,4 @@
-<div>
+<div xmlns:stripe="http://www.w3.org/1999/xhtml">
   <div class="modal-header">
     <img ng-src="{{logoBlack.custom_asset_file_attributes.attachment_url}}" alt="{{logo.custom_asset_file_attributes.attachment}}" class="modal-logo"/>
     <h1 translate>{{ 'online_payment' }}</h1>

app/controllers/api/payments_controller.rb

@@ -10,6 +10,8 @@ class API::PaymentsController < API::ApiController
     begin
       if data['payment_method_id']
         # Create the PaymentIntent
+        # TODO the client has to provide the reservation details. Then, we use Price.compute - user.walletAmount to get the amount
+        # currency is set in Rails.secrets
         intent = Stripe::PaymentIntent.create(
           payment_method: data['payment_method_id'],
           amount: 1099,
@@ -22,7 +24,7 @@ class API::PaymentsController < API::ApiController
       end
     rescue Stripe::CardError => e
       # Display error on client
-      return [200, { error: e.message }.to_json]
+      render status: 200, json: { error: e.message }
     end
 
     render generate_payment_response(intent)