authscape 1.0.140 → 1.0.141

package/index.js

@@ -1178,13 +1178,13 @@ var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
 var _DialogContent = _interopRequireDefault(require("@mui/material/DialogContent"));
 var _DialogTitle = _interopRequireDefault(require("@mui/material/DialogTitle"));
-var _checkoutForm = _interopRequireDefault(require("./checkoutForm"));
 var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
 var _Close = _interopRequireDefault(require("@mui/icons-material/Close"));
 var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
 var _Select = _interopRequireDefault(require("@mui/material/Select"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
+var _PaymentRounded = _interopRequireDefault(require("@mui/icons-material/PaymentRounded"));
 var _excluded = ["children", "value", "index"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -1201,36 +1201,217 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-var StripePayment = function StripePayment() {
-  var stripePromise = (0, _stripeJs.loadStripe)(process.env.stripePublicKey);
-  var _useState = (0, _react.useState)(null),
+var CheckoutForm = function CheckoutForm(_ref) {
+  var payButtonText = _ref.payButtonText,
+    clientSecret = _ref.clientSecret,
+    onResponse = _ref.onResponse,
+    amount = _ref.amount;
+  var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
-    options = _useState2[0],
-    setOptions = _useState2[1];
-  var _useState3 = (0, _react.useState)(0),
+    isPaymentProcessing = _useState2[0],
+    setIsPaymentProcessing = _useState2[1];
+  var stripe = (0, _reactStripeJs.useStripe)();
+  var elements = (0, _reactStripeJs.useElements)();
+  var _useState3 = (0, _react.useState)(null),
     _useState4 = _slicedToArray(_useState3, 2),
-    value = _useState4[0],
-    setValue = _useState4[1];
-  var _useState5 = (0, _react.useState)([]),
+    errorMessage = _useState4[0],
+    setErrorMessage = _useState4[1];
+  var handleSubmit = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
+      var _yield$stripe$confirm, error, response, setupIntent, _yield$stripe$confirm2, _error, _response, paymentIntent;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            setIsPaymentProcessing(true);
+
+            // We don't want to let default form submission happen here,
+            // which would refresh the page.
+            event.preventDefault();
+            if (!(!stripe || !elements)) {
+              _context.next = 4;
+              break;
+            }
+            return _context.abrupt("return");
+          case 4:
+            if (!(amount == null)) {
+              _context.next = 35;
+              break;
+            }
+            _context.next = 7;
+            return stripe.confirmSetup({
+              //`Elements` instance that was used to create the Payment Element
+              elements: elements,
+              redirect: "if_required"
+              // confirmParams: {
+              //   return_url: process.env.WebsiteBaseUri + '/confirmSetup?redirectUrl=' + encodeURIComponent(window.location.search),
+              // },
+            });
+          case 7:
+            _yield$stripe$confirm = _context.sent;
+            error = _yield$stripe$confirm.error;
+            if (!error) {
+              _context.next = 14;
+              break;
+            }
+            // This point will only be reached if there is an immediate error when
+            // confirming the payment. Show error to your customer (for example, payment
+            // details incomplete)
+            setIsPaymentProcessing(false);
+            setErrorMessage(error.message);
+            _context.next = 33;
+            break;
+          case 14:
+            // Your customer will be redirected to your `return_url`. For some payment
+            // methods like iDEAL, your customer will be redirected to an intermediate
+            // site first to authorize the payment, then redirected to the `return_url`.
+            //setIsPaymentProcessing(false);
+            response = null;
+            _context.next = 17;
+            return stripe.retrieveSetupIntent(clientSecret);
+          case 17:
+            response = _context.sent;
+            setupIntent = response.setupIntent;
+            _context.t0 = setupIntent.status;
+            _context.next = _context.t0 === 'succeeded' ? 22 : _context.t0 === 'processing' ? 24 : _context.t0 === 'requires_payment_method' ? 27 : 30;
+            break;
+          case 22:
+            // need to store the payment intent with the customer if they are logged in... currentUser
+            onResponse("succeeded", setupIntent.id, setupIntent.payment_method);
+            return _context.abrupt("break", 33);
+          case 24:
+            onResponse("processing", setupIntent.id, setupIntent.payment_method);
+            setIsPaymentProcessing(false);
+            return _context.abrupt("break", 33);
+          case 27:
+            onResponse("requires_payment_method", null);
+            setIsPaymentProcessing(false);
+            return _context.abrupt("break", 33);
+          case 30:
+            onResponse("failed", null);
+            setIsPaymentProcessing(false);
+            return _context.abrupt("break", 33);
+          case 33:
+            _context.next = 69;
+            break;
+          case 35:
+            _context.next = 37;
+            return stripe.confirmPayment({
+              //`Elements` instance that was used to create the Payment Element
+              elements: elements,
+              redirect: "if_required",
+              confirmParams: {
+                return_url: process.env.WebsiteBaseUri + '/confirmPayment?redirectUrl=' + encodeURIComponent(window.location.search)
+              }
+            });
+          case 37:
+            _yield$stripe$confirm2 = _context.sent;
+            _error = _yield$stripe$confirm2.error;
+            if (!_error) {
+              _context.next = 44;
+              break;
+            }
+            // This point will only be reached if there is an immediate error when
+            // confirming the payment. Show error to your customer (for example, payment
+            // details incomplete)
+            setIsPaymentProcessing(false);
+            setErrorMessage(_error.message);
+            _context.next = 69;
+            break;
+          case 44:
+            // Your customer will be redirected to your `return_url`. For some payment
+            // methods like iDEAL, your customer will be redirected to an intermediate
+            // site first to authorize the payment, then redirected to the `return_url`.
+            _response = null;
+            if (!(amount == null)) {
+              _context.next = 51;
+              break;
+            }
+            _context.next = 48;
+            return stripe.retrieveSetupIntent(clientSecret);
+          case 48:
+            _response = _context.sent;
+            _context.next = 54;
+            break;
+          case 51:
+            _context.next = 53;
+            return stripe.retrievePaymentIntent(clientSecret);
+          case 53:
+            _response = _context.sent;
+          case 54:
+            paymentIntent = _response.paymentIntent;
+            _context.t1 = paymentIntent.status;
+            _context.next = _context.t1 === 'succeeded' ? 58 : _context.t1 === 'processing' ? 60 : _context.t1 === 'requires_payment_method' ? 63 : 66;
+            break;
+          case 58:
+            // need to store the payment intent with the customer if they are logged in... currentUser
+            onResponse("succeeded", paymentIntent.id);
+            return _context.abrupt("break", 69);
+          case 60:
+            onResponse("processing", paymentIntent.id);
+            setIsPaymentProcessing(false);
+            return _context.abrupt("break", 69);
+          case 63:
+            onResponse("requires_payment_method", null);
+            setIsPaymentProcessing(false);
+            return _context.abrupt("break", 69);
+          case 66:
+            onResponse("failed", null);
+            setIsPaymentProcessing(false);
+            return _context.abrupt("break", 69);
+          case 69:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleSubmit(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_react["default"].createElement("form", {
+    onSubmit: handleSubmit
+  }, /*#__PURE__*/_react["default"].createElement(_reactStripeJs.PaymentElement, null), /*#__PURE__*/_react["default"].createElement(Button, {
+    startIcon: /*#__PURE__*/_react["default"].createElement(_PaymentRounded["default"], null),
+    type: "submit",
+    fullWidth: true,
+    variant: "contained",
+    disabled: !stripe || isPaymentProcessing,
+    sx: {
+      marginTop: 2,
+      padding: 2
+    }
+  }, payButtonText), errorMessage && /*#__PURE__*/_react["default"].createElement("div", null, errorMessage));
+};
+var StripePayment = function StripePayment() {
+  var stripePromise = (0, _stripeJs.loadStripe)(process.env.stripePublicKey);
+  var _useState5 = (0, _react.useState)(null),
     _useState6 = _slicedToArray(_useState5, 2),
-    paymentMethods = _useState6[0],
-    setPaymentMethods = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
+    options = _useState6[0],
+    setOptions = _useState6[1];
+  var _useState7 = (0, _react.useState)(0),
     _useState8 = _slicedToArray(_useState7, 2),
-    paymentMethod = _useState8[0],
-    setPaymentMethod = _useState8[1];
+    value = _useState8[0],
+    setValue = _useState8[1];
+  var _useState9 = (0, _react.useState)([]),
+    _useState10 = _slicedToArray(_useState9, 2),
+    paymentMethods = _useState10[0],
+    setPaymentMethods = _useState10[1];
+  var _useState11 = (0, _react.useState)(null),
+    _useState12 = _slicedToArray(_useState11, 2),
+    paymentMethod = _useState12[0],
+    setPaymentMethod = _useState12[1];
   var paymentMethodOpened = /*#__PURE__*/function () {
-    var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
       var response, responsePayments;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
           case 0:
             response = null;
             if (!(currentUser == null)) {
-              _context.next = 7;
+              _context2.next = 7;
               break;
             }
-            _context.next = 4;
+            _context2.next = 4;
             return apiService().post("/Payment/ConnectCustomerNoAuth", {
               paymentRequestType: paymentRequestType,
               amount: amount,
@@ -1241,11 +1422,11 @@ var StripePayment = function StripePayment() {
               stripeCustomerId: stripeCustomerId
             });
           case 4:
-            response = _context.sent;
-            _context.next = 10;
+            response = _context2.sent;
+            _context2.next = 10;
             break;
           case 7:
-            _context.next = 9;
+            _context2.next = 9;
             return apiService().post("/Payment/ConnectCustomer", {
               paymentRequestType: paymentRequestType,
               amount: amount,
@@ -1254,19 +1435,19 @@ var StripePayment = function StripePayment() {
               stripeCustomerId: stripeCustomerId
             });
           case 9:
-            response = _context.sent;
+            response = _context2.sent;
           case 10:
             if (!(response != null && response.status == 200)) {
-              _context.next = 16;
+              _context2.next = 16;
               break;
             }
             setOptions({
               clientSecret: response.data
             });
-            _context.next = 14;
+            _context2.next = 14;
             return apiService().get("/Payment/GetPaymentMethods");
           case 14:
-            responsePayments = _context.sent;
+            responsePayments = _context2.sent;
             if (responsePayments != null && responsePayments.status == 200) {
               if (responsePayments.data.length > 0) {
                 setValue(1);
@@ -1275,12 +1456,12 @@ var StripePayment = function StripePayment() {
             }
           case 16:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee);
+      }, _callee2);
     }));
     return function paymentMethodOpened() {
-      return _ref.apply(this, arguments);
+      return _ref3.apply(this, arguments);
     };
   }();
   (0, _react.useEffect)(function () {
@@ -1297,9 +1478,9 @@ var StripePayment = function StripePayment() {
       'aria-controls': "simple-tabpanel-".concat(index)
     };
   }
-  var PaymentMethod = function PaymentMethod(_ref2) {
-    var paymentMethod = _ref2.paymentMethod,
-      clicked = _ref2.clicked;
+  var PaymentMethod = function PaymentMethod(_ref4) {
+    var paymentMethod = _ref4.paymentMethod,
+      clicked = _ref4.clicked;
     return /*#__PURE__*/_react["default"].createElement(_Box["default"], {
       fullWidth: true,
       sx: {
@@ -1435,7 +1616,7 @@ var StripePayment = function StripePayment() {
     }, options != null && process.env.stripePublicKey != null && /*#__PURE__*/_react["default"].createElement(_reactStripeJs.Elements, {
       stripe: stripePromise,
       options: options
-    }, /*#__PURE__*/_react["default"].createElement(_checkoutForm["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(CheckoutForm, {
       payButtonText: payButtonText,
       clientSecret: options != null ? options.clientSecret : null,
       onResponse: onResponse,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.140",
+  "version": "1.0.141",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/StripePayment.js

@@ -1,18 +1,172 @@
 import React, {useEffect, useState} from 'react';
-import {Elements} from '@stripe/react-stripe-js';
+import {Elements, useStripe, useElements, PaymentElement} from '@stripe/react-stripe-js';
 import {loadStripe} from '@stripe/stripe-js';
 import Box from '@mui/material/Box';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import CheckoutForm from './checkoutForm';
 import IconButton from '@mui/material/IconButton';
 import CloseIcon from '@mui/icons-material/Close';
 import Typography from '@mui/material/Typography';
 import Select from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
 import Grid from '@mui/material/Grid';
+import PaymentRoundedIcon from '@mui/icons-material/PaymentRounded';
+
+
+const CheckoutForm = ({payButtonText, clientSecret, onResponse, amount}) => {
+
+    const [isPaymentProcessing, setIsPaymentProcessing] = useState(false);
+  
+    const stripe = useStripe();
+    const elements = useElements();
+  
+    const [errorMessage, setErrorMessage] = useState(null);
+  
+    const handleSubmit = async (event) => {
+  
+      setIsPaymentProcessing(true);
+  
+      // We don't want to let default form submission happen here,
+      // which would refresh the page.
+      event.preventDefault();
+  
+      if (!stripe || !elements) {
+        // Stripe.js has not yet loaded.
+        // Make sure to disable form submission until Stripe.js has loaded.
+  
+        //setIsPaymentProcessing(false);
+        return;
+      }
+  
+  
+      if (amount == null)
+      {
+        const {error} = await stripe.confirmSetup({
+          //`Elements` instance that was used to create the Payment Element
+          elements,
+          redirect:"if_required",
+          // confirmParams: {
+          //   return_url: process.env.WebsiteBaseUri + '/confirmSetup?redirectUrl=' + encodeURIComponent(window.location.search),
+          // },
+        });
+    
+        if (error) {
+          // This point will only be reached if there is an immediate error when
+          // confirming the payment. Show error to your customer (for example, payment
+          // details incomplete)
+          setIsPaymentProcessing(false);
+          setErrorMessage(error.message);
+        } else {
+          // Your customer will be redirected to your `return_url`. For some payment
+          // methods like iDEAL, your customer will be redirected to an intermediate
+          // site first to authorize the payment, then redirected to the `return_url`.
+    
+          //setIsPaymentProcessing(false);
+    
+          let response = null;
+    
+          response = await stripe.retrieveSetupIntent(clientSecret);
+  
+          let setupIntent = response.setupIntent;
+    
+          switch (setupIntent.status) {
+            case 'succeeded':
+    
+              // need to store the payment intent with the customer if they are logged in... currentUser
+              onResponse("succeeded", setupIntent.id, setupIntent.payment_method);
+              break;
+    
+            case 'processing':
+              onResponse("processing", setupIntent.id, setupIntent.payment_method);
+              setIsPaymentProcessing(false);
+              break;
+    
+            case 'requires_payment_method':
+              onResponse("requires_payment_method", null);
+              setIsPaymentProcessing(false);
+              break;
+    
+            default:
+              onResponse("failed", null);
+              setIsPaymentProcessing(false);
+              break;
+          }
+        }
+  
+      }
+      else
+      {
+        const {error} = await stripe.confirmPayment({
+          //`Elements` instance that was used to create the Payment Element
+          elements,
+          redirect:"if_required",
+          confirmParams: {
+            return_url: process.env.WebsiteBaseUri + '/confirmPayment?redirectUrl=' + encodeURIComponent(window.location.search),
+          },
+        });
+    
+        if (error) {
+          // This point will only be reached if there is an immediate error when
+          // confirming the payment. Show error to your customer (for example, payment
+          // details incomplete)
+          setIsPaymentProcessing(false);
+          setErrorMessage(error.message);
+        } else {
+          // Your customer will be redirected to your `return_url`. For some payment
+          // methods like iDEAL, your customer will be redirected to an intermediate
+          // site first to authorize the payment, then redirected to the `return_url`.
+    
+          let response = null;
+    
+          if (amount == null)
+          {
+            response = await stripe.retrieveSetupIntent(clientSecret);
+          }
+          else
+          {
+            response = await stripe.retrievePaymentIntent(clientSecret);
+          }
+          
+          let paymentIntent = response.paymentIntent;
+    
+          switch (paymentIntent.status) {
+            case 'succeeded':
+    
+              // need to store the payment intent with the customer if they are logged in... currentUser
+              onResponse("succeeded", paymentIntent.id);
+              break;
+    
+            case 'processing':
+              onResponse("processing", paymentIntent.id);
+              setIsPaymentProcessing(false);
+              break;
+    
+            case 'requires_payment_method':
+              onResponse("requires_payment_method", null);
+              setIsPaymentProcessing(false);
+              break;
+    
+            default:
+              onResponse("failed", null);
+              setIsPaymentProcessing(false);
+              break;
+          }
+  
+          
+        }
+      }
+    };
+  
+    return (
+      <form onSubmit={handleSubmit}>
+        <PaymentElement />
+        <Button startIcon={<PaymentRoundedIcon/>} type="submit" fullWidth={true} variant="contained" disabled={(!stripe || isPaymentProcessing)} sx={{marginTop:2, padding:2}}>{payButtonText}</Button>
+        {errorMessage && <div>{errorMessage}</div>}
+      </form>
+    )
+  };
 
 export const StripePayment = () => {