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

Comparing version 2.1.0 to 2.1.1

dist/react-stripe.esm.js

@@ -376,3 +376,3 @@ import React from 'react';
       name: 'react-stripe-js',
-      version: "2.1.0"
+      version: "2.1.1"
     });
@@ -382,3 +382,3 @@
       name: 'react-stripe-js',
-      version: "2.1.0",
+      version: "2.1.1",
       url: 'https://stripe.com/docs/stripe-js/react'
@@ -609,5 +609,8 @@ });
       return function () {
-        if (elementRef.current) {
-          elementRef.current.destroy();
-          elementRef.current = null;
+        if (elementRef.current && typeof elementRef.current.destroy === 'function') {
+          try {
+            elementRef.current.destroy();
+            elementRef.current = null;
+          } catch (error) {// Do nothing
+          }
         }
@@ -614,0 +617,0 @@ };

dist/react-stripe.js

@@ -382,3 +382,3 @@ 'use strict';
       name: 'react-stripe-js',
-      version: "2.1.0"
+      version: "2.1.1"
     });
@@ -388,3 +388,3 @@
       name: 'react-stripe-js',
-      version: "2.1.0",
+      version: "2.1.1",
       url: 'https://stripe.com/docs/stripe-js/react'
@@ -615,5 +615,8 @@ });
       return function () {
-        if (elementRef.current) {
-          elementRef.current.destroy();
-          elementRef.current = null;
+        if (elementRef.current && typeof elementRef.current.destroy === 'function') {
+          try {
+            elementRef.current.destroy();
+            elementRef.current = null;
+          } catch (error) {// Do nothing
+          }
         }
@@ -620,0 +623,0 @@ };

dist/react-stripe.umd.js

@@ -459,3 +459,3 @@ (function (global, factory) {
         name: 'react-stripe-js',
-        version: "2.1.0"
+        version: "2.1.1"
       });
@@ -465,3 +465,3 @@
         name: 'react-stripe-js',
-        version: "2.1.0",
+        version: "2.1.1",
         url: 'https://stripe.com/docs/stripe-js/react'
@@ -692,5 +692,8 @@ });
         return function () {
-          if (elementRef.current) {
-            elementRef.current.destroy();
-            elementRef.current = null;
+          if (elementRef.current && typeof elementRef.current.destroy === 'function') {
+            try {
+              elementRef.current.destroy();
+              elementRef.current = null;
+            } catch (error) {// Do nothing
+            }
           }
@@ -697,0 +700,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";function n(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 r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function o(e){return(o="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 c(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,a=[],c=!0,u=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(u)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(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 u(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 u(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}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function i(){}function s(){}s.resetWarningCache=i;var l=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,a){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==a){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 n={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:s,resetWarningCache:i};return n.PropTypes=n,n}()})),f=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},p=function(e){return null!==e&&"object"===o(e)},m=function(e,t,n){return p(e)?Object.keys(e).reduce((function(o,c){var u=!p(t)||!function e(t,n){if(!p(t)||!p(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 a=Object.keys(t),c=Object.keys(n);if(a.length!==c.length)return!1;for(var u={},i=0;i<a.length;i+=1)u[a[i]]=!0;for(var s=0;s<c.length;s+=1)u[c[s]]=!0;var l=Object.keys(u);if(l.length!==a.length)return!1;var f=t,m=n;return l.every((function(t){return e(f[t],m[t])}))}(e[c],t[c]);return n.includes(c)?(u&&console.warn("Unsupported prop change: options.".concat(c," is not a mutable property.")),o):u?r(r({},o||{}),{},a({},c,e[c])):o}),null):null},y=function(e){if(null===e||p(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 p(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(y)};var t=y(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},h=t.createContext(null);h.displayName="ElementsContext";var g=t.createContext(null);g.displayName="CartElementContext";var E=function(e){var n=e.stripe,r=e.options,o=e.children,a=t.useMemo((function(){return d(n)}),[n]),u=c(t.useState(null),2),i=u[0],s=u[1],l=c(t.useState(null),2),p=l[0],y=l[1],E=c(t.useState((function(){return{stripe:"sync"===a.tag?a.stripe:null,elements:"sync"===a.tag?a.stripe.elements(r):null}})),2),b=E[0],v=E[1];t.useEffect((function(){var e=!0,t=function(e){v((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==a.tag||b.stripe?"sync"!==a.tag||b.stripe||t(a.stripe):a.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[a,b,r]);var C=f(n);t.useEffect((function(){null!==C&&C!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[C,n]);var S=f(r);return t.useEffect((function(){if(b.elements){var e=m(r,S,["clientSecret","fonts"]);e&&b.elements.update(e)}}),[r,S,b.elements]),t.useEffect((function(){var e=b.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"2.1.0"}),e.registerAppInfo({name:"react-stripe-js",version:"2.1.0",url:"https://stripe.com/docs/stripe-js/react"}))}),[b.stripe]),t.createElement(h.Provider,{value:b},t.createElement(g.Provider,{value:{cart:i,setCart:s,cartState:p,setCartState:y}},o))};E.propTypes={stripe:l.any,options:l.object};var b=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(h),e)},v=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(g),e)},C=function(e){return(0,e.children)(b("mounts <ElementsConsumer>"))};C.propTypes={children:l.func.isRequired};var S=function(e,n,r){var o=!!r,a=t.useRef(r);t.useEffect((function(){a.current=r}),[r]),t.useEffect((function(){if(!o||!e)return function(){};var t=function(){a.current&&a.current.apply(a,arguments)};return e.on(n,t),function(){e.off(n,t)}}),[o,n,e,a])},O=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),a=n?function(e){b("mounts <".concat(o,">")),v("mounts <".concat(o,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r,a=n.id,u=n.className,i=n.options,s=void 0===i?{}:i,l=n.onBlur,p=n.onFocus,y=n.onReady,d=n.onChange,h=n.onEscape,g=n.onClick,E=n.onLoadError,C=n.onLoaderStart,O=n.onNetworksChange,j=n.onCheckout,k=n.onLineItemClick,w=n.onConfirm,P=n.onCancel,A=n.onShippingAddressChange,x=n.onShippingRateChange,R=b("mounts <".concat(o,">")).elements,T=c(t.useState(null),2),B=T[0],_=T[1],I=t.useRef(null),N=t.useRef(null),M=v("mounts <".concat(o,">")),L=M.setCart,q=M.setCartState;S(B,"blur",l),S(B,"focus",p),S(B,"escape",h),S(B,"click",g),S(B,"loaderror",E),S(B,"loaderstart",C),S(B,"networkschange",O),S(B,"lineitemclick",k),S(B,"confirm",w),S(B,"cancel",P),S(B,"shippingaddresschange",A),S(B,"shippingratechange",x),"cart"===e?r=function(e){q(e),y&&y(e)}:y&&(r="expressCheckout"===e?y:function(){y(B)}),S(B,"ready",r),S(B,"change","cart"===e?function(e){q(e),d&&d(e)}:d),S(B,"checkout","cart"===e?function(e){q(e),j&&j(e)}:j),t.useLayoutEffect((function(){if(null===I.current&&R&&null!==N.current){var t=R.create(e,s);"cart"===e&&L&&L(t),I.current=t,_(t),t.mount(N.current)}}),[R,s,L]);var D=f(s);return t.useEffect((function(){if(I.current){var e=m(s,D,["paymentRequest"]);e&&I.current.update(e)}}),[s,D]),t.useLayoutEffect((function(){return function(){I.current&&(I.current.destroy(),I.current=null)}}),[]),t.createElement("div",{id:a,className:u,ref:N})};return a.propTypes={id:l.string,className:l.string,onChange:l.func,onBlur:l.func,onFocus:l.func,onReady:l.func,onEscape:l.func,onClick:l.func,onLoadError:l.func,onLoaderStart:l.func,onNetworksChange:l.func,onCheckout:l.func,onLineItemClick:l.func,onConfirm:l.func,onCancel:l.func,onShippingAddressChange:l.func,onShippingRateChange:l.func,options:l.object},a.displayName=o,a.__elementType=e,a},j="undefined"==typeof window,k=O("auBankAccount",j),w=O("card",j),P=O("cardNumber",j),A=O("cardExpiry",j),x=O("cardCvc",j),R=O("fpxBank",j),T=O("iban",j),B=O("idealBank",j),_=O("p24Bank",j),I=O("epsBank",j),N=O("payment",j),M=O("expressCheckout",j),L=O("paymentRequestButton",j),q=O("linkAuthentication",j),D=O("address",j),U=O("shippingAddress",j),W=O("cart",j),F=O("paymentMethodMessaging",j),Y=O("affirmMessage",j),H=O("afterpayClearpayMessage",j);e.AddressElement=D,e.AffirmMessageElement=Y,e.AfterpayClearpayMessageElement=H,e.AuBankAccountElement=k,e.CardCvcElement=x,e.CardElement=w,e.CardExpiryElement=A,e.CardNumberElement=P,e.CartElement=W,e.Elements=E,e.ElementsConsumer=C,e.EpsBankElement=I,e.ExpressCheckoutElement=M,e.FpxBankElement=R,e.IbanElement=T,e.IdealBankElement=B,e.LinkAuthenticationElement=q,e.P24BankElement=_,e.PaymentElement=N,e.PaymentMethodMessagingElement=F,e.PaymentRequestButtonElement=L,e.ShippingAddressElement=U,e.useCartElement=function(){return v("calls useCartElement()").cart},e.useCartElementState=function(){return v("calls useCartElementState()").cartState},e.useElements=function(){return b("calls useElements()").elements},e.useStripe=function(){return b("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";function n(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 r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function o(e){return(o="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 a(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,c=[],a=!0,u=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(c.push(r.value),!t||c.length!==t);a=!0);}catch(e){u=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(u)throw o}}return c}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(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 u(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 u(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}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function i(){}function s(){}s.resetWarningCache=i;var l=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,c){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==c){var a=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 a.name="Invariant Violation",a}}function t(){return e}e.isRequired=e;var n={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:s,resetWarningCache:i};return n.PropTypes=n,n}()})),f=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},p=function(e){return null!==e&&"object"===o(e)},m=function(e,t,n){return p(e)?Object.keys(e).reduce((function(o,a){var u=!p(t)||!function e(t,n){if(!p(t)||!p(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 c=Object.keys(t),a=Object.keys(n);if(c.length!==a.length)return!1;for(var u={},i=0;i<c.length;i+=1)u[c[i]]=!0;for(var s=0;s<a.length;s+=1)u[a[s]]=!0;var l=Object.keys(u);if(l.length!==c.length)return!1;var f=t,m=n;return l.every((function(t){return e(f[t],m[t])}))}(e[a],t[a]);return n.includes(a)?(u&&console.warn("Unsupported prop change: options.".concat(a," is not a mutable property.")),o):u?r(r({},o||{}),{},c({},a,e[a])):o}),null):null},y=function(e){if(null===e||p(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 p(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(y)};var t=y(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},h=t.createContext(null);h.displayName="ElementsContext";var g=t.createContext(null);g.displayName="CartElementContext";var E=function(e){var n=e.stripe,r=e.options,o=e.children,c=t.useMemo((function(){return d(n)}),[n]),u=a(t.useState(null),2),i=u[0],s=u[1],l=a(t.useState(null),2),p=l[0],y=l[1],E=a(t.useState((function(){return{stripe:"sync"===c.tag?c.stripe:null,elements:"sync"===c.tag?c.stripe.elements(r):null}})),2),b=E[0],v=E[1];t.useEffect((function(){var e=!0,t=function(e){v((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==c.tag||b.stripe?"sync"!==c.tag||b.stripe||t(c.stripe):c.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[c,b,r]);var C=f(n);t.useEffect((function(){null!==C&&C!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[C,n]);var S=f(r);return t.useEffect((function(){if(b.elements){var e=m(r,S,["clientSecret","fonts"]);e&&b.elements.update(e)}}),[r,S,b.elements]),t.useEffect((function(){var e=b.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"2.1.1"}),e.registerAppInfo({name:"react-stripe-js",version:"2.1.1",url:"https://stripe.com/docs/stripe-js/react"}))}),[b.stripe]),t.createElement(h.Provider,{value:b},t.createElement(g.Provider,{value:{cart:i,setCart:s,cartState:p,setCartState:y}},o))};E.propTypes={stripe:l.any,options:l.object};var b=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(h),e)},v=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(g),e)},C=function(e){return(0,e.children)(b("mounts <ElementsConsumer>"))};C.propTypes={children:l.func.isRequired};var S=function(e,n,r){var o=!!r,c=t.useRef(r);t.useEffect((function(){c.current=r}),[r]),t.useEffect((function(){if(!o||!e)return function(){};var t=function(){c.current&&c.current.apply(c,arguments)};return e.on(n,t),function(){e.off(n,t)}}),[o,n,e,c])},O=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=n?function(e){b("mounts <".concat(o,">")),v("mounts <".concat(o,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r,c=n.id,u=n.className,i=n.options,s=void 0===i?{}:i,l=n.onBlur,p=n.onFocus,y=n.onReady,d=n.onChange,h=n.onEscape,g=n.onClick,E=n.onLoadError,C=n.onLoaderStart,O=n.onNetworksChange,j=n.onCheckout,k=n.onLineItemClick,w=n.onConfirm,P=n.onCancel,A=n.onShippingAddressChange,x=n.onShippingRateChange,R=b("mounts <".concat(o,">")).elements,T=a(t.useState(null),2),B=T[0],_=T[1],I=t.useRef(null),N=t.useRef(null),M=v("mounts <".concat(o,">")),L=M.setCart,q=M.setCartState;S(B,"blur",l),S(B,"focus",p),S(B,"escape",h),S(B,"click",g),S(B,"loaderror",E),S(B,"loaderstart",C),S(B,"networkschange",O),S(B,"lineitemclick",k),S(B,"confirm",w),S(B,"cancel",P),S(B,"shippingaddresschange",A),S(B,"shippingratechange",x),"cart"===e?r=function(e){q(e),y&&y(e)}:y&&(r="expressCheckout"===e?y:function(){y(B)}),S(B,"ready",r),S(B,"change","cart"===e?function(e){q(e),d&&d(e)}:d),S(B,"checkout","cart"===e?function(e){q(e),j&&j(e)}:j),t.useLayoutEffect((function(){if(null===I.current&&R&&null!==N.current){var t=R.create(e,s);"cart"===e&&L&&L(t),I.current=t,_(t),t.mount(N.current)}}),[R,s,L]);var D=f(s);return t.useEffect((function(){if(I.current){var e=m(s,D,["paymentRequest"]);e&&I.current.update(e)}}),[s,D]),t.useLayoutEffect((function(){return function(){if(I.current&&"function"==typeof I.current.destroy)try{I.current.destroy(),I.current=null}catch(e){}}}),[]),t.createElement("div",{id:c,className:u,ref:N})};return c.propTypes={id:l.string,className:l.string,onChange:l.func,onBlur:l.func,onFocus:l.func,onReady:l.func,onEscape:l.func,onClick:l.func,onLoadError:l.func,onLoaderStart:l.func,onNetworksChange:l.func,onCheckout:l.func,onLineItemClick:l.func,onConfirm:l.func,onCancel:l.func,onShippingAddressChange:l.func,onShippingRateChange:l.func,options:l.object},c.displayName=o,c.__elementType=e,c},j="undefined"==typeof window,k=O("auBankAccount",j),w=O("card",j),P=O("cardNumber",j),A=O("cardExpiry",j),x=O("cardCvc",j),R=O("fpxBank",j),T=O("iban",j),B=O("idealBank",j),_=O("p24Bank",j),I=O("epsBank",j),N=O("payment",j),M=O("expressCheckout",j),L=O("paymentRequestButton",j),q=O("linkAuthentication",j),D=O("address",j),U=O("shippingAddress",j),W=O("cart",j),F=O("paymentMethodMessaging",j),Y=O("affirmMessage",j),H=O("afterpayClearpayMessage",j);e.AddressElement=D,e.AffirmMessageElement=Y,e.AfterpayClearpayMessageElement=H,e.AuBankAccountElement=k,e.CardCvcElement=x,e.CardElement=w,e.CardExpiryElement=A,e.CardNumberElement=P,e.CartElement=W,e.Elements=E,e.ElementsConsumer=C,e.EpsBankElement=I,e.ExpressCheckoutElement=M,e.FpxBankElement=R,e.IbanElement=T,e.IdealBankElement=B,e.LinkAuthenticationElement=q,e.P24BankElement=_,e.PaymentElement=N,e.PaymentMethodMessagingElement=F,e.PaymentRequestButtonElement=L,e.ShippingAddressElement=U,e.useCartElement=function(){return v("calls useCartElement()").cart},e.useCartElementState=function(){return v("calls useCartElementState()").cartState},e.useElements=function(){return b("calls useElements()").elements},e.useStripe=function(){return b("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@stripe/react-stripe-js",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "React components for Stripe.js and Stripe Elements",
@@ -5,0 +5,0 @@ "main": "dist/react-stripe.js",

README.md

@@ -18,3 +18,3 @@ # React Stripe.js
 
-- [Learn how to accept a payment](https://stripe.com/docs/payments/accept-a-payment#web)
+- [Learn how to accept a payment](https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements)
 - [Add React Stripe.js to your React app](https://stripe.com/docs/stripe-js/react#setup)
@@ -42,7 +42,7 @@ - [Try it out using CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark)
 ```jsx
-import React from 'react';
+import React, {useState} from 'react';
 import ReactDOM from 'react-dom';
 import {loadStripe} from '@stripe/stripe-js';
 import {
-  CardElement,
+  PaymentElement,
   Elements,
@@ -57,2 +57,4 @@ useStripe,
 
+  const [errorMessage, setErrorMessage] = useState(null);
+
   const handleSubmit = async (event) => {
@@ -65,6 +67,36 @@ event.preventDefault();
 
-    const {error, paymentMethod} = await stripe.createPaymentMethod({
-      type: 'card',
-      card: elements.getElement(CardElement),
+    // Trigger form validation and wallet collection
+    const {error: submitError} = await elements.submit();
+    if (submitError) {
+      // Show error to your customer
+      setErrorMessage(submitError.message);
+      return;
+    }
+
+    // Create the PaymentIntent and obtain clientSecret from your server endpoint
+    const res = await fetch('/create-intent', {
+      method: 'POST',
     });
+
+    const {client_secret: clientSecret} = await res.json();
+
+    const {error} = await stripe.confirmPayment({
+      //`Elements` instance that was used to create the Payment Element
+      elements,
+      clientSecret,
+      confirmParams: {
+        return_url: 'https://example.com/order/123/complete',
+      },
+    });
+
+    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)
+      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`.
+    }
   };
@@ -74,6 +106,8 @@
     <form onSubmit={handleSubmit}>
-      <CardElement />
+      <PaymentElement />
       <button type="submit" disabled={!stripe || !elements}>
         Pay
       </button>
+      {/* Show error message to your customers */}
+      {errorMessage && <div>{errorMessage}</div>}
     </form>
@@ -85,4 +119,14 @@ );
 
+const options = {
+  mode: 'payment',
+  amount: 1099,
+  currency: 'usd',
+  // Fully customizable with appearance API.
+  appearance: {
+    /*...*/
+  },
+};
+
 const App = () => (
-  <Elements stripe={stripePromise}>
+  <Elements stripe={stripePromise} options={options}>
     <CheckoutForm />
@@ -101,3 +145,7 @@ </Elements>
 import {loadStripe} from '@stripe/stripe-js';
-import {CardElement, Elements, ElementsConsumer} from '@stripe/react-stripe-js';
+import {
+  PaymentElement,
+  Elements,
+  ElementsConsumer,
+} from '@stripe/react-stripe-js';
 
@@ -113,6 +161,34 @@ class CheckoutForm extends React.Component {
 
-    const {error, paymentMethod} = await stripe.createPaymentMethod({
-      type: 'card',
-      card: elements.getElement(CardElement),
+    // Trigger form validation and wallet collection
+    const {error: submitError} = await elements.submit();
+    if (submitError) {
+      // Show error to your customer
+      return;
+    }
+
+    // Create the PaymentIntent and obtain clientSecret
+    const res = await fetch('/create-intent', {
+      method: 'POST',
     });
+
+    const {client_secret: clientSecret} = await res.json();
+
+    const {error} = await stripe.confirmPayment({
+      //`Elements` instance that was used to create the Payment Element
+      elements,
+      clientSecret,
+      confirmParams: {
+        return_url: 'https://example.com/order/123/complete',
+      },
+    });
+
+    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)
+    } 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`.
+    }
   };
@@ -124,3 +200,3 @@
       <form onSubmit={this.handleSubmit}>
-        <CardElement />
+        <PaymentElement />
         <button type="submit" disabled={!stripe}>
@@ -144,4 +220,14 @@ Pay
 
+const options = {
+  mode: 'payment',
+  amount: 1099,
+  currency: 'usd',
+  // Fully customizable with appearance API.
+  appearance: {
+    /*...*/
+  },
+};
+
 const App = () => (
-  <Elements stripe={stripePromise}>
+  <Elements stripe={stripePromise} options={options}>
     <InjectedCheckoutForm />
@@ -148,0 +234,0 @@ </Elements>

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

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

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

Improved metrics

Total package byte prevSize

382420

increased by0.85%

Lines of code

8138

increased by0.21%

Number of lines in readme file

244

increased by54.43%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes