handle sca in js frontend

app/assets/javascripts/directives/cart.js.erb

@@ -502,39 +502,8 @@ Application.Directives.directive('cart', [ '$rootScope', '$uibModal', 'dialogs',
                 /**
                  * Callback to process the payment with Stripe, triggered on button click
                  */
-                $scope.payment = function (status, response) {
-                  if (response.error) {
-                    growl.error(response.error.message);
-                  } else {
-                    $scope.attempting = true;
-                    $scope.reservation.card_token = response.id;
-                    Reservation.save(
-                      mkRequestParams($scope.reservation, coupon),
-                      function (reservation) { $uibModalInstance.close(reservation); },
-                      function (response) {
-                        $scope.alerts = [];
-                        if (response.status === 500) {
-                          $scope.alerts.push({
-                            msg: response.statusText,
-                            type: 'danger'
-                          });
-                        } else {
-                          if (response.data.card && (response.data.card.join('').length > 0)) {
-                            $scope.alerts.push({
-                              msg: response.data.card.join('. '),
-                              type: 'danger'
-                            });
-                          } else if (response.data.payment && (response.data.payment.join('').length > 0)) {
-                            $scope.alerts.push({
-                              msg: response.data.payment.join('. '),
-                              type: 'danger'
-                            });
-                          }
-                        }
-                        return $scope.attempting = false;
-                      }
-                    );
-                  }
+                $scope.onPaymentSuccess = function (response) {
+                  $uibModalInstance.close(response);
                 };
               }
             ]

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

@@ -1,11 +1,12 @@
 /* global Stripe */
 
-Application.Directives.directive('stripeForm', ['Payment', 'growl',
-  function (Payment, growl) {
+Application.Directives.directive('stripeForm', ['Payment', 'growl', '_t',
+  function (Payment, growl, _t) {
     return ({
       restrict: 'A',
       scope: {
-        cartItems: '='
+        cartItems: '=',
+        onPaymentSuccess: '='
       },
       link: function($scope, element, attributes) {
         const stripe = Stripe('<%= Rails.application.secrets.stripe_publishable_key %>');
@@ -50,46 +51,42 @@ Application.Directives.directive('stripeForm', ['Payment', 'growl',
           // TODO https://stripe.com/docs/payments/payment-intents/web-manual
           stripe.createPaymentMethod('card', card).then(function({ paymentMethod, error }) {
             if (error) {
-              growl.error(error);
+              growl.error(error.message);
+              button.prop('disabled', false);
             } else {
               // Send paymentMethod.id to your server (see Step 2)
               Payment.confirm({ payment_method_id: paymentMethod.id, cart_items: $scope.cartItems }, function (response) {
                 // Handle server response (see Step 3)
-                handleServerResponse(response);
+                handleServerResponse(response, button);
               });
             }
           });
         });
 
-        function handleServerResponse(response) {
+        function handleServerResponse(response, confirmButton) {
           if (response.error) {
-            growl.error(error);
+            growl.error(`${_t('payment_card_error')} ${response.error}`);
+            confirmButton.prop('disabled', false);
           } 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);
+                growl.error(result.error.message);
+                confirmButton.prop('disabled', false);
               } else {
                 // The card action has been handled
                 // The PaymentIntent can be confirmed again on the server
                 Payment.confirm({ payment_intent_id: result.paymentIntent.id, cart_items: $scope.cartItems }, function(confirmResult) {
-                  paymentSuccess(confirmResult);
-                }).then(handleServerResponse);
+                  handleServerResponse(confirmResult, confirmButton);
+                });
               }
             });
           } else {
-            paymentSuccess(response);
+            $scope.onPaymentSuccess(response);
           }
         }
-
-        function paymentSuccess(response) {
-          // TODO Show success message
-          $scope.$apply(function () {
-            $scope[form].apply($scope, response);
-          });
-        }
       }
     });
   }]);

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

@@ -7,7 +7,7 @@
     <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>
 
     <div class="panel panel-default bg-light m-n">
-      <form name="stripeForm" stripe:form="payment" cart-items="cartItems" class="form-horizontal">
+      <form name="stripeForm" stripe:form="payment" cart-items="cartItems" on-payment-success="onPaymentSuccess" class="form-horizontal">
         <div class="panel-body">
 
           <h3 class="m-t-xs" ng-if="walletAmount" ng-bind-html="'you_have_amount_in_wallet' | translate:{ amount: numberFilter(walletAmount, 2), currency: currencySymbol }"></h3>

app/controllers/api/payments_controller.rb

@@ -46,7 +46,7 @@ class API::PaymentsController < API::ApiController
       end
     rescue Stripe::CardError => e
       # Display error on client
-      render status: 200, json: { error: e.message }
+      render(status: 200, json: { error: e.message }) and return
     end
 
     render(on_payment_success) and return if intent.status == 'succeeded'

config/locales/app.shared.en.yml

@@ -99,6 +99,7 @@ en:
         share_on_twitter: "Share on Twitter"
         incomplete_profile: "Incomplete profile"
         unlimited: "Unlimited"
+        payment_card_error: "A problem occurred with your payment card:"
 
       messages:
         you_will_lose_any_unsaved_modification_if_you_quit_this_page: "You will lose any unsaved modification if you quit this page"

config/locales/app.shared.es.yml

@@ -99,6 +99,7 @@ es:
         share_on_twitter: "Compartir en Twitter"
         incomplete_profile: "Perfil completo"
         unlimited: "Ilimitado"
+        payment_card_error: "Hubo un problema con su tarjeta:"
 
       messages:
         you_will_lose_any_unsaved_modification_if_you_quit_this_page: "Si cierra la página se perderán todas las modificaciones que no se hayan guardado"

config/locales/app.shared.fr.yml

@@ -99,6 +99,7 @@ fr:
         share_on_twitter: "Partager sur Twitter"
         incomplete_profile: "Profil incomplet"
         unlimited: "Illimité"
+        payment_card_error: "Un problème est survenu avec votre carte bancaire :"
 
       messages:
         you_will_lose_any_unsaved_modification_if_you_quit_this_page: "Vous perdrez les modifications non enregistrées si vous quittez cette page"

config/locales/app.shared.pt.yml

@@ -99,6 +99,7 @@ pt:
         share_on_twitter: "Compartilhar no Twitter"
         incomplete_profile: "Perfil incompleto"
         unlimited: "Ilimitado"
+        payment_card_error: "A problem occurred with your payment card:"  # translation_missing
 
       messages:
         you_will_lose_any_unsaved_modification_if_you_quit_this_page: "Você irá perder todas as modificações não salvas se sair desta página"