@stripe/react-stripe-js - npm Package Compare versions

Comparing version 1.7.2 to 1.8.0-0

dist/react-stripe.esm.js

 import React from 'react';
 import PropTypes from 'prop-types';
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _typeof(obj) {
@@ -35,36 +73,2 @@ "@babel/helpers - typeof";
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 function _slicedToArray(arr, i) {
@@ -79,10 +83,13 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
 
+  var _s, _e;
+
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
@@ -274,14 +281,10 @@
       children = _ref.children;
-
-  var _final = React.useRef(false);
-
-  var isMounted = React.useRef(true);
   var parsed = React.useMemo(function () {
     return parseStripeProp(rawStripeProp);
-  }, [rawStripeProp]);
+  }, [rawStripeProp]); // For a sync stripe instance, initialize into context
 
   var _React$useState = React.useState(function () {
     return {
-      stripe: null,
-      elements: null
+      stripe: parsed.tag === 'sync' ? parsed.stripe : null,
+      elements: parsed.tag === 'sync' ? parsed.stripe.elements(options) : null
     };
@@ -293,23 +296,8 @@ }),
 
-  var prevStripe = usePrevious(rawStripeProp);
+  React.useEffect(function () {
+    var isMounted = true; // For an async stripePromise, store it in context once resolved
 
-  if (prevStripe !== null) {
-    if (prevStripe !== rawStripeProp) {
-      console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
-    }
-  }
-
-  if (!_final.current) {
-    if (parsed.tag === 'sync') {
-      _final.current = true;
-      setContext({
-        stripe: parsed.stripe,
-        elements: parsed.stripe.elements(options)
-      });
-    }
-
-    if (parsed.tag === 'async') {
-      _final.current = true;
+    if (parsed.tag === 'async' && !ctx.stripe) {
       parsed.stripePromise.then(function (stripe) {
-        if (stripe && isMounted.current) {
+        if (stripe && isMounted) {
           // Only update Elements context if the component is still mounted
@@ -324,5 +312,22 @@ // and stripe is not null. We allow stripe to be null to make
       });
+    } else if (parsed.tag === 'sync' && !ctx.stripe) {
+      // Or, handle a sync stripe instance going from null -> populated
+      setContext({
+        stripe: parsed.stripe,
+        elements: parsed.stripe.elements(options)
+      });
     }
-  }
 
+    return function () {
+      isMounted = false;
+    };
+  }, [parsed, ctx, options]); // Warn on changes to stripe prop
+
+  var prevStripe = usePrevious(rawStripeProp);
+  React.useEffect(function () {
+    if (prevStripe !== null && prevStripe !== rawStripeProp) {
+      console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
+    }
+  }, [prevStripe, rawStripeProp]); // Apply updates to elements when options prop has relevant changes
+
   var prevOptions = usePrevious(options);
@@ -339,9 +344,5 @@ React.useEffect(function () {
     }
-  }, [options, prevOptions, ctx.elements]);
+  }, [options, prevOptions, ctx.elements]); // Attach react-stripe-js version to stripe.js instance
+
   React.useEffect(function () {
-    return function () {
-      isMounted.current = false;
-    };
-  }, []);
-  React.useEffect(function () {
     var anyStripe = ctx.stripe;
@@ -355,3 +356,3 @@
       name: 'react-stripe-js',
-      version: "1.7.2"
+      version: "1.8.0-0"
     });
@@ -361,3 +362,3 @@
       name: 'react-stripe-js',
-      version: "1.7.2",
+      version: "1.8.0-0",
       url: 'https://stripe.com/docs/stripe-js/react'
@@ -496,2 +497,3 @@ });
           elementRef.current.destroy();
+          elementRef.current = null;
         }
@@ -498,0 +500,0 @@ };

dist/react-stripe.js

@@ -10,2 +10,40 @@ 'use strict';
 
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+
+    if (enumerableOnly) {
+      symbols = symbols.filter(function (sym) {
+        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+      });
+    }
+
+    keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = arguments[i] != null ? arguments[i] : {};
+
+    if (i % 2) {
+      ownKeys(Object(source), true).forEach(function (key) {
+        _defineProperty(target, key, source[key]);
+      });
+    } else if (Object.getOwnPropertyDescriptors) {
+      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+      ownKeys(Object(source)).forEach(function (key) {
+        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+      });
+    }
+  }
+
+  return target;
+}
+
 function _typeof(obj) {
@@ -42,36 +80,2 @@ "@babel/helpers - typeof";
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
-
-  if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    });
-    keys.push.apply(keys, symbols);
-  }
-
-  return keys;
-}
-
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i] != null ? arguments[i] : {};
-
-    if (i % 2) {
-      ownKeys(Object(source), true).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      });
-    } else if (Object.getOwnPropertyDescriptors) {
-      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-    } else {
-      ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
-    }
-  }
-
-  return target;
-}
-
 function _slicedToArray(arr, i) {
@@ -86,10 +90,13 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 function _iterableToArrayLimit(arr, i) {
-  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+  if (_i == null) return;
   var _arr = [];
   var _n = true;
   var _d = false;
-  var _e = undefined;
 
+  var _s, _e;
+
   try {
-    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
       _arr.push(_s.value);
@@ -281,14 +288,10 @@
       children = _ref.children;
-
-  var _final = React.useRef(false);
-
-  var isMounted = React.useRef(true);
   var parsed = React.useMemo(function () {
     return parseStripeProp(rawStripeProp);
-  }, [rawStripeProp]);
+  }, [rawStripeProp]); // For a sync stripe instance, initialize into context
 
   var _React$useState = React.useState(function () {
     return {
-      stripe: null,
-      elements: null
+      stripe: parsed.tag === 'sync' ? parsed.stripe : null,
+      elements: parsed.tag === 'sync' ? parsed.stripe.elements(options) : null
     };
@@ -300,23 +303,8 @@ }),
 
-  var prevStripe = usePrevious(rawStripeProp);
+  React.useEffect(function () {
+    var isMounted = true; // For an async stripePromise, store it in context once resolved
 
-  if (prevStripe !== null) {
-    if (prevStripe !== rawStripeProp) {
-      console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
-    }
-  }
-
-  if (!_final.current) {
-    if (parsed.tag === 'sync') {
-      _final.current = true;
-      setContext({
-        stripe: parsed.stripe,
-        elements: parsed.stripe.elements(options)
-      });
-    }
-
-    if (parsed.tag === 'async') {
-      _final.current = true;
+    if (parsed.tag === 'async' && !ctx.stripe) {
       parsed.stripePromise.then(function (stripe) {
-        if (stripe && isMounted.current) {
+        if (stripe && isMounted) {
           // Only update Elements context if the component is still mounted
@@ -331,5 +319,22 @@ // and stripe is not null. We allow stripe to be null to make
       });
+    } else if (parsed.tag === 'sync' && !ctx.stripe) {
+      // Or, handle a sync stripe instance going from null -> populated
+      setContext({
+        stripe: parsed.stripe,
+        elements: parsed.stripe.elements(options)
+      });
     }
-  }
 
+    return function () {
+      isMounted = false;
+    };
+  }, [parsed, ctx, options]); // Warn on changes to stripe prop
+
+  var prevStripe = usePrevious(rawStripeProp);
+  React.useEffect(function () {
+    if (prevStripe !== null && prevStripe !== rawStripeProp) {
+      console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
+    }
+  }, [prevStripe, rawStripeProp]); // Apply updates to elements when options prop has relevant changes
+
   var prevOptions = usePrevious(options);
@@ -346,9 +351,5 @@ React.useEffect(function () {
     }
-  }, [options, prevOptions, ctx.elements]);
+  }, [options, prevOptions, ctx.elements]); // Attach react-stripe-js version to stripe.js instance
+
   React.useEffect(function () {
-    return function () {
-      isMounted.current = false;
-    };
-  }, []);
-  React.useEffect(function () {
     var anyStripe = ctx.stripe;
@@ -362,3 +363,3 @@
       name: 'react-stripe-js',
-      version: "1.7.2"
+      version: "1.8.0-0"
     });
@@ -368,3 +369,3 @@
       name: 'react-stripe-js',
-      version: "1.7.2",
+      version: "1.8.0-0",
       url: 'https://stripe.com/docs/stripe-js/react'
@@ -503,2 +504,3 @@ });
           elementRef.current.destroy();
+          elementRef.current = null;
         }
@@ -505,0 +507,0 @@ };

dist/react-stripe.umd.js

@@ -87,2 +87,40 @@ (function (global, factory) {
 
+	function ownKeys(object, enumerableOnly) {
+	  var keys = Object.keys(object);
+
+	  if (Object.getOwnPropertySymbols) {
+	    var symbols = Object.getOwnPropertySymbols(object);
+
+	    if (enumerableOnly) {
+	      symbols = symbols.filter(function (sym) {
+	        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+	      });
+	    }
+
+	    keys.push.apply(keys, symbols);
+	  }
+
+	  return keys;
+	}
+
+	function _objectSpread2(target) {
+	  for (var i = 1; i < arguments.length; i++) {
+	    var source = arguments[i] != null ? arguments[i] : {};
+
+	    if (i % 2) {
+	      ownKeys(Object(source), true).forEach(function (key) {
+	        _defineProperty(target, key, source[key]);
+	      });
+	    } else if (Object.getOwnPropertyDescriptors) {
+	      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+	    } else {
+	      ownKeys(Object(source)).forEach(function (key) {
+	        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+	      });
+	    }
+	  }
+
+	  return target;
+	}
+
 	function _typeof(obj) {
@@ -119,36 +157,2 @@ "@babel/helpers - typeof";
 
-	function ownKeys(object, enumerableOnly) {
-	  var keys = Object.keys(object);
-
-	  if (Object.getOwnPropertySymbols) {
-	    var symbols = Object.getOwnPropertySymbols(object);
-	    if (enumerableOnly) symbols = symbols.filter(function (sym) {
-	      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-	    });
-	    keys.push.apply(keys, symbols);
-	  }
-
-	  return keys;
-	}
-
-	function _objectSpread2(target) {
-	  for (var i = 1; i < arguments.length; i++) {
-	    var source = arguments[i] != null ? arguments[i] : {};
-
-	    if (i % 2) {
-	      ownKeys(Object(source), true).forEach(function (key) {
-	        _defineProperty(target, key, source[key]);
-	      });
-	    } else if (Object.getOwnPropertyDescriptors) {
-	      Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
-	    } else {
-	      ownKeys(Object(source)).forEach(function (key) {
-	        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-	      });
-	    }
-	  }
-
-	  return target;
-	}
-
 	function _slicedToArray(arr, i) {
@@ -163,10 +167,13 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 	function _iterableToArrayLimit(arr, i) {
-	  if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return;
+	  var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
+
+	  if (_i == null) return;
 	  var _arr = [];
 	  var _n = true;
 	  var _d = false;
-	  var _e = undefined;
 
+	  var _s, _e;
+
 	  try {
-	    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
+	    for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
 	      _arr.push(_s.value);
@@ -358,14 +365,10 @@
 	      children = _ref.children;
-
-	  var _final = React.useRef(false);
-
-	  var isMounted = React.useRef(true);
 	  var parsed = React.useMemo(function () {
 	    return parseStripeProp(rawStripeProp);
-	  }, [rawStripeProp]);
+	  }, [rawStripeProp]); // For a sync stripe instance, initialize into context
 
 	  var _React$useState = React.useState(function () {
 	    return {
-	      stripe: null,
-	      elements: null
+	      stripe: parsed.tag === 'sync' ? parsed.stripe : null,
+	      elements: parsed.tag === 'sync' ? parsed.stripe.elements(options) : null
 	    };
@@ -377,23 +380,8 @@ }),
 
-	  var prevStripe = usePrevious(rawStripeProp);
+	  React.useEffect(function () {
+	    var isMounted = true; // For an async stripePromise, store it in context once resolved
 
-	  if (prevStripe !== null) {
-	    if (prevStripe !== rawStripeProp) {
-	      console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
-	    }
-	  }
-
-	  if (!_final.current) {
-	    if (parsed.tag === 'sync') {
-	      _final.current = true;
-	      setContext({
-	        stripe: parsed.stripe,
-	        elements: parsed.stripe.elements(options)
-	      });
-	    }
-
-	    if (parsed.tag === 'async') {
-	      _final.current = true;
+	    if (parsed.tag === 'async' && !ctx.stripe) {
 	      parsed.stripePromise.then(function (stripe) {
-	        if (stripe && isMounted.current) {
+	        if (stripe && isMounted) {
 	          // Only update Elements context if the component is still mounted
@@ -408,5 +396,22 @@ // and stripe is not null. We allow stripe to be null to make
 	      });
+	    } else if (parsed.tag === 'sync' && !ctx.stripe) {
+	      // Or, handle a sync stripe instance going from null -> populated
+	      setContext({
+	        stripe: parsed.stripe,
+	        elements: parsed.stripe.elements(options)
+	      });
 	    }
-	  }
 
+	    return function () {
+	      isMounted = false;
+	    };
+	  }, [parsed, ctx, options]); // Warn on changes to stripe prop
+
+	  var prevStripe = usePrevious(rawStripeProp);
+	  React.useEffect(function () {
+	    if (prevStripe !== null && prevStripe !== rawStripeProp) {
+	      console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
+	    }
+	  }, [prevStripe, rawStripeProp]); // Apply updates to elements when options prop has relevant changes
+
 	  var prevOptions = usePrevious(options);
@@ -423,9 +428,5 @@ React.useEffect(function () {
 	    }
-	  }, [options, prevOptions, ctx.elements]);
+	  }, [options, prevOptions, ctx.elements]); // Attach react-stripe-js version to stripe.js instance
+
 	  React.useEffect(function () {
-	    return function () {
-	      isMounted.current = false;
-	    };
-	  }, []);
-	  React.useEffect(function () {
 	    var anyStripe = ctx.stripe;
@@ -439,3 +440,3 @@
 	      name: 'react-stripe-js',
-	      version: "1.7.2"
+	      version: "1.8.0-0"
 	    });
@@ -445,3 +446,3 @@
 	      name: 'react-stripe-js',
-	      version: "1.7.2",
+	      version: "1.8.0-0",
 	      url: 'https://stripe.com/docs/stripe-js/react'
@@ -580,2 +581,3 @@ });
 	          elementRef.current.destroy();
+	          elementRef.current = null;
 	        }
@@ -582,0 +584,0 @@ };

dist/react-stripe.umd.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactStripe={},e.React)}(this,(function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function n(){}function r(){}r.resetWarningCache=n;var o=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,u){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==u){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var o={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:n};return o.PropTypes=o,o}()}));function u(e){return(u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function i(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?i(Object(n),!0).forEach((function(t){c(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):i(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,u=void 0;try{for(var c,i=e[Symbol.iterator]();!(r=(c=i.next()).done)&&(n.push(c.value),!t||n.length!==t);r=!0);}catch(e){o=!0,u=e}finally{try{r||null==i.return||i.return()}finally{if(o)throw u}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return p(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var f=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},l=function(e){return null!==e&&"object"===u(e)},y=function(e,t,n){return l(e)?Object.keys(e).reduce((function(r,o){var u=!l(t)||!function e(t,n){if(!l(t)||!l(n))return t===n;var r=Array.isArray(t);if(r!==Array.isArray(n))return!1;var o="[object Object]"===Object.prototype.toString.call(t);if(o!==("[object Object]"===Object.prototype.toString.call(n)))return!1;if(!o&&!r)return t===n;var u=Object.keys(t),c=Object.keys(n);if(u.length!==c.length)return!1;for(var i={},a=0;a<u.length;a+=1)i[u[a]]=!0;for(var s=0;s<c.length;s+=1)i[c[s]]=!0;var p=Object.keys(i);if(p.length!==u.length)return!1;var f=t,y=n;return p.every((function(t){return e(f[t],y[t])}))}(e[o],t[o]);return n.includes(o)?(u&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),r):u?a(a({},r||{}),{},c({},o,e[o])):r}),null):null},m=function(e){if(null===e||l(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;var t;throw new Error("Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")},d=function(e){if(function(e){return l(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(m)};var t=m(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},b=t.createContext(null);b.displayName="ElementsContext";var v=function(e){var n=e.stripe,r=e.options,o=e.children,u=t.useRef(!1),c=t.useRef(!0),i=t.useMemo((function(){return d(n)}),[n]),a=s(t.useState((function(){return{stripe:null,elements:null}})),2),p=a[0],l=a[1],m=f(n);null!==m&&m!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it."),u.current||("sync"===i.tag&&(u.current=!0,l({stripe:i.stripe,elements:i.stripe.elements(r)})),"async"===i.tag&&(u.current=!0,i.stripePromise.then((function(e){e&&c.current&&l({stripe:e,elements:e.elements(r)})}))));var v=f(r);return t.useEffect((function(){if(p.elements){var e=y(r,v,["clientSecret","fonts"]);e&&p.elements.update(e)}}),[r,v,p.elements]),t.useEffect((function(){return function(){c.current=!1}}),[]),t.useEffect((function(){var e=p.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"1.7.2"}),e.registerAppInfo({name:"react-stripe-js",version:"1.7.2",url:"https://stripe.com/docs/stripe-js/react"}))}),[p.stripe]),t.createElement(b.Provider,{value:p},o)};v.propTypes={stripe:o.any,options:o.object};var h=function(e){return function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e}(t.useContext(b),e)},g=function(e){return(0,e.children)(h("mounts <ElementsConsumer>"))};g.propTypes={children:o.func.isRequired};var E=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},O=function(){},j=function(e,n){var r,u="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=n?function(e){h("mounts <".concat(u,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,o=n.className,c=n.options,i=void 0===c?{}:c,a=n.onBlur,s=void 0===a?O:a,p=n.onFocus,l=void 0===p?O:p,m=n.onReady,d=void 0===m?O:m,b=n.onChange,v=void 0===b?O:b,g=n.onEscape,j=void 0===g?O:g,S=n.onClick,P=void 0===S?O:S,k=h("mounts <".concat(u,">")).elements,C=t.useRef(null),w=t.useRef(null),A=E(d),R=E(s),x=E(l),T=E(P),B=E(v),_=E(j);t.useLayoutEffect((function(){if(null==C.current&&k&&null!=w.current){var t=k.create(e,i);C.current=t,t.mount(w.current),t.on("ready",(function(){return A(t)})),t.on("change",B),t.on("blur",R),t.on("focus",x),t.on("escape",_),t.on("click",T)}}));var I=f(i);return t.useEffect((function(){if(C.current){var e=y(i,I,["paymentRequest"]);e&&C.current.update(e)}}),[i,I]),t.useLayoutEffect((function(){return function(){C.current&&C.current.destroy()}}),[]),t.createElement("div",{id:r,className:o,ref:w})};return c.propTypes={id:o.string,className:o.string,onChange:o.func,onBlur:o.func,onFocus:o.func,onReady:o.func,onClick:o.func,options:o.object},c.displayName=u,c.__elementType=e,c},S="undefined"==typeof window,P=j("auBankAccount",S),k=j("card",S),C=j("cardNumber",S),w=j("cardExpiry",S),A=j("cardCvc",S),R=j("fpxBank",S),x=j("iban",S),T=j("idealBank",S),B=j("p24Bank",S),_=j("epsBank",S),I=j("payment",S),N=j("paymentRequestButton",S),M=j("linkAuthentication",S),q=j("shippingAddress",S),D=j("affirmMessage",S),U=j("afterpayClearpayMessage",S);e.AffirmMessageElement=D,e.AfterpayClearpayMessageElement=U,e.AuBankAccountElement=P,e.CardCvcElement=A,e.CardElement=k,e.CardExpiryElement=w,e.CardNumberElement=C,e.Elements=v,e.ElementsConsumer=g,e.EpsBankElement=_,e.FpxBankElement=R,e.IbanElement=x,e.IdealBankElement=T,e.LinkAuthenticationElement=M,e.P24BankElement=B,e.PaymentElement=I,e.PaymentRequestButtonElement=N,e.ShippingAddressElement=q,e.useElements=function(){return h("calls useElements()").elements},e.useStripe=function(){return h("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactStripe={},e.React)}(this,(function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function n(){}function r(){}r.resetWarningCache=n;var o=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,u){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==u){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var o={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:n};return o.PropTypes=o,o}()}));function u(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?u(Object(n),!0).forEach((function(t){a(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):u(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function a(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,o,u=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(u.push(r.value),!t||u.length!==t);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return u}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return p(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var l=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},f=function(e){return null!==e&&"object"===i(e)},y=function(e,t,n){return f(e)?Object.keys(e).reduce((function(r,o){var u=!f(t)||!function e(t,n){if(!f(t)||!f(n))return t===n;var r=Array.isArray(t);if(r!==Array.isArray(n))return!1;var o="[object Object]"===Object.prototype.toString.call(t);if(o!==("[object Object]"===Object.prototype.toString.call(n)))return!1;if(!o&&!r)return t===n;var u=Object.keys(t),c=Object.keys(n);if(u.length!==c.length)return!1;for(var i={},a=0;a<u.length;a+=1)i[u[a]]=!0;for(var s=0;s<c.length;s+=1)i[c[s]]=!0;var p=Object.keys(i);if(p.length!==u.length)return!1;var l=t,y=n;return p.every((function(t){return e(l[t],y[t])}))}(e[o],t[o]);return n.includes(o)?(u&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),r):u?c(c({},r||{}),{},a({},o,e[o])):r}),null):null},m=function(e){if(null===e||f(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;var t;throw new Error("Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")},d=function(e){if(function(e){return f(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(m)};var t=m(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},v=t.createContext(null);v.displayName="ElementsContext";var b=function(e){var n=e.stripe,r=e.options,o=e.children,u=t.useMemo((function(){return d(n)}),[n]),c=s(t.useState((function(){return{stripe:"sync"===u.tag?u.stripe:null,elements:"sync"===u.tag?u.stripe.elements(r):null}})),2),i=c[0],a=c[1];t.useEffect((function(){var e=!0;return"async"!==u.tag||i.stripe?"sync"!==u.tag||i.stripe||a({stripe:u.stripe,elements:u.stripe.elements(r)}):u.stripePromise.then((function(t){t&&e&&a({stripe:t,elements:t.elements(r)})})),function(){e=!1}}),[u,i,r]);var p=l(n);t.useEffect((function(){null!==p&&p!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[p,n]);var f=l(r);return t.useEffect((function(){if(i.elements){var e=y(r,f,["clientSecret","fonts"]);e&&i.elements.update(e)}}),[r,f,i.elements]),t.useEffect((function(){var e=i.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"1.8.0-0"}),e.registerAppInfo({name:"react-stripe-js",version:"1.8.0-0",url:"https://stripe.com/docs/stripe-js/react"}))}),[i.stripe]),t.createElement(v.Provider,{value:i},o)};b.propTypes={stripe:o.any,options:o.object};var h=function(e){return function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e}(t.useContext(v),e)},g=function(e){return(0,e.children)(h("mounts <ElementsConsumer>"))};g.propTypes={children:o.func.isRequired};var E=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},O=function(){},j=function(e,n){var r,u="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=n?function(e){h("mounts <".concat(u,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,o=n.className,c=n.options,i=void 0===c?{}:c,a=n.onBlur,s=void 0===a?O:a,p=n.onFocus,f=void 0===p?O:p,m=n.onReady,d=void 0===m?O:m,v=n.onChange,b=void 0===v?O:v,g=n.onEscape,j=void 0===g?O:g,P=n.onClick,S=void 0===P?O:P,k=h("mounts <".concat(u,">")).elements,C=t.useRef(null),w=t.useRef(null),A=E(d),x=E(s),R=E(f),T=E(S),B=E(b),_=E(j);t.useLayoutEffect((function(){if(null==C.current&&k&&null!=w.current){var t=k.create(e,i);C.current=t,t.mount(w.current),t.on("ready",(function(){return A(t)})),t.on("change",B),t.on("blur",x),t.on("focus",R),t.on("escape",_),t.on("click",T)}}));var I=l(i);return t.useEffect((function(){if(C.current){var e=y(i,I,["paymentRequest"]);e&&C.current.update(e)}}),[i,I]),t.useLayoutEffect((function(){return function(){C.current&&(C.current.destroy(),C.current=null)}}),[]),t.createElement("div",{id:r,className:o,ref:w})};return c.propTypes={id:o.string,className:o.string,onChange:o.func,onBlur:o.func,onFocus:o.func,onReady:o.func,onClick:o.func,options:o.object},c.displayName=u,c.__elementType=e,c},P="undefined"==typeof window,S=j("auBankAccount",P),k=j("card",P),C=j("cardNumber",P),w=j("cardExpiry",P),A=j("cardCvc",P),x=j("fpxBank",P),R=j("iban",P),T=j("idealBank",P),B=j("p24Bank",P),_=j("epsBank",P),I=j("payment",P),N=j("paymentRequestButton",P),M=j("linkAuthentication",P),q=j("shippingAddress",P),D=j("affirmMessage",P),U=j("afterpayClearpayMessage",P);e.AffirmMessageElement=D,e.AfterpayClearpayMessageElement=U,e.AuBankAccountElement=S,e.CardCvcElement=A,e.CardElement=k,e.CardExpiryElement=w,e.CardNumberElement=C,e.Elements=b,e.ElementsConsumer=g,e.EpsBankElement=_,e.FpxBankElement=x,e.IbanElement=R,e.IdealBankElement=T,e.LinkAuthenticationElement=M,e.P24BankElement=B,e.PaymentElement=I,e.PaymentRequestButtonElement=N,e.ShippingAddressElement=q,e.useElements=function(){return h("calls useElements()").elements},e.useStripe=function(){return h("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@stripe/react-stripe-js",
-  "version": "1.7.2",
+  "version": "1.8.0-0",
   "description": "React components for Stripe.js and Stripe Elements",
@@ -64,10 +64,10 @@ "main": "dist/react-stripe.js",
     "@babel/preset-react": "^7.7.0",
-    "@storybook/react": "^6.2.9",
+    "@storybook/react": "^6.5.0-beta.8",
     "@stripe/stripe-js": "^1.26.0",
-    "@testing-library/jest-dom": "^5.11.8",
-    "@testing-library/react": "^11.2.3",
-    "@testing-library/react-hooks": "^4.0.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/react-hooks": "^8.0.0",
     "@types/jest": "^25.1.1",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^2.18.0",
@@ -91,6 +91,6 @@ "@typescript-eslint/parser": "^2.18.0",
     "prettier": "^1.19.1",
-    "react": "^17.0.1",
+    "react": "18.1.0",
     "react-docgen-typescript-loader": "^3.6.0",
-    "react-dom": "^17.0.1",
-    "react-test-renderer": "16.9",
+    "react-dom": "18.1.0",
+    "react-test-renderer": "^18.0.0",
     "rimraf": "^2.6.2",
@@ -107,7 +107,10 @@ "rollup": "^1.27.0",
   },
+  "resolutions": {
+    "@types/react": "18.0.5"
+  },
   "peerDependencies": {
     "@stripe/stripe-js": "^1.26.0",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }
 }

README.md

@@ -11,5 +11,2 @@ # React Stripe.js
 
-We don't currently support React 18, but plan to
-([#273](https://github.com/stripe/react-stripe-js/issues/273)).
-
 The minimum supported version of React is v16.8. If you use an older version,
@@ -16,0 +13,0 @@ upgrade React to use this library. If you prefer not to upgrade your React

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

275596

increased by1.34%

Lines of code

5776

increased by0.79%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of low quality alerts

3

increased by50%

Number of lines in readme file

158

decreased by-1.86%

No dependency changes