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

Comparing version 1.4.0 to 1.4.1

dist/react-stripe.d.ts

@@ -231,2 +231,6 @@ import { FunctionComponent, ReactNode } from "react";
 type EpsBankElementComponent = FunctionComponent<EpsBankElementProps>;
+interface PaymentElementProps extends ElementProps {
+    options?: any;
+}
+type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
 interface PaymentRequestButtonElementProps extends ElementProps {
@@ -323,2 +327,3 @@ /**
         getElement(component: EpsBankElementComponent): stripeJs.StripeEpsBankElement | null;
+        getElement(component: PaymentElementComponent): stripeJs.StripeElement | null;
         /**
@@ -424,2 +429,3 @@ * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
 declare const EpsBankElement: EpsBankElementComponent;
+declare const PaymentElement: PaymentElementComponent;
 /**
@@ -433,2 +439,2 @@ * @docs https://stripe.com/docs/stripe-js/react#element-components
 declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };

dist/react-stripe.esm.d.ts

@@ -231,2 +231,6 @@ import { FunctionComponent, ReactNode } from "react";
 type EpsBankElementComponent = FunctionComponent<EpsBankElementProps>;
+interface PaymentElementProps extends ElementProps {
+    options?: any;
+}
+type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
 interface PaymentRequestButtonElementProps extends ElementProps {
@@ -323,2 +327,3 @@ /**
         getElement(component: EpsBankElementComponent): stripeJs.StripeEpsBankElement | null;
+        getElement(component: PaymentElementComponent): stripeJs.StripeElement | null;
         /**
@@ -424,2 +429,3 @@ * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
 declare const EpsBankElement: EpsBankElementComponent;
+declare const PaymentElement: PaymentElementComponent;
 /**
@@ -433,2 +439,2 @@ * @docs https://stripe.com/docs/stripe-js/react#element-components
 declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };

dist/react-stripe.esm.js

@@ -297,3 +297,3 @@ import React from 'react';
 
-    if (!anyStripe || !anyStripe._registerWrapper) {
+    if (!anyStripe || !anyStripe._registerWrapper || !anyStripe.registerAppInfo) {
       return;
@@ -304,4 +304,10 @@ }
       name: 'react-stripe-js',
-      version: "1.4.0"
+      version: "1.4.1"
     });
+
+    anyStripe.registerAppInfo({
+      name: 'react-stripe-js',
+      version: "1.4.1",
+      url: 'https://stripe.com/docs/stripe-js/react'
+    });
   }, [ctx.stripe]);
@@ -544,2 +550,3 @@ return /*#__PURE__*/React.createElement(ElementsContext.Provider, {
 var EpsBankElement = createElementComponent('epsBank', isServer);
+var PaymentElement = createElementComponent('payment', isServer);
 /**
@@ -556,2 +563,2 @@ * @docs https://stripe.com/docs/stripe-js/react#element-components
 
-export { AfterpayClearpayMessageElement, AuBankAccountElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, Elements, ElementsConsumer, EpsBankElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, PaymentRequestButtonElement, useElements, useStripe };
+export { AfterpayClearpayMessageElement, AuBankAccountElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, Elements, ElementsConsumer, EpsBankElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, PaymentElement, PaymentRequestButtonElement, useElements, useStripe };

dist/react-stripe.js

@@ -303,3 +303,3 @@ 'use strict';
 
-    if (!anyStripe || !anyStripe._registerWrapper) {
+    if (!anyStripe || !anyStripe._registerWrapper || !anyStripe.registerAppInfo) {
       return;
@@ -310,4 +310,10 @@ }
       name: 'react-stripe-js',
-      version: "1.4.0"
+      version: "1.4.1"
     });
+
+    anyStripe.registerAppInfo({
+      name: 'react-stripe-js',
+      version: "1.4.1",
+      url: 'https://stripe.com/docs/stripe-js/react'
+    });
   }, [ctx.stripe]);
@@ -550,2 +556,3 @@ return /*#__PURE__*/React.createElement(ElementsContext.Provider, {
 var EpsBankElement = createElementComponent('epsBank', isServer);
+var PaymentElement = createElementComponent('payment', isServer);
 /**
@@ -575,4 +582,5 @@ * @docs https://stripe.com/docs/stripe-js/react#element-components
 exports.P24BankElement = P24BankElement;
+exports.PaymentElement = PaymentElement;
 exports.PaymentRequestButtonElement = PaymentRequestButtonElement;
 exports.useElements = useElements;
 exports.useStripe = useStripe;

dist/react-stripe.umd.d.ts

@@ -231,2 +231,6 @@ import { FunctionComponent, ReactNode } from "react";
 type EpsBankElementComponent = FunctionComponent<EpsBankElementProps>;
+interface PaymentElementProps extends ElementProps {
+    options?: any;
+}
+type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
 interface PaymentRequestButtonElementProps extends ElementProps {
@@ -323,2 +327,3 @@ /**
         getElement(component: EpsBankElementComponent): stripeJs.StripeEpsBankElement | null;
+        getElement(component: PaymentElementComponent): stripeJs.StripeElement | null;
         /**
@@ -424,2 +429,3 @@ * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
 declare const EpsBankElement: EpsBankElementComponent;
+declare const PaymentElement: PaymentElementComponent;
 /**
@@ -433,2 +439,2 @@ * @docs https://stripe.com/docs/stripe-js/react#element-components
 declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };

dist/react-stripe.umd.js

@@ -380,3 +380,3 @@ (function (global, factory) {
 
-      if (!anyStripe || !anyStripe._registerWrapper) {
+      if (!anyStripe || !anyStripe._registerWrapper || !anyStripe.registerAppInfo) {
         return;
@@ -387,4 +387,10 @@ }
         name: 'react-stripe-js',
-        version: "1.4.0"
+        version: "1.4.1"
       });
+
+      anyStripe.registerAppInfo({
+        name: 'react-stripe-js',
+        version: "1.4.1",
+        url: 'https://stripe.com/docs/stripe-js/react'
+      });
     }, [ctx.stripe]);
@@ -627,2 +633,3 @@ return /*#__PURE__*/React.createElement(ElementsContext.Provider, {
   var EpsBankElement = createElementComponent('epsBank', isServer);
+  var PaymentElement = createElementComponent('payment', isServer);
   /**
@@ -652,2 +659,3 @@ * @docs https://stripe.com/docs/stripe-js/react#element-components
   exports.P24BankElement = P24BankElement;
+  exports.PaymentElement = PaymentElement;
   exports.PaymentRequestButtonElement = PaymentRequestButtonElement;
@@ -654,0 +662,0 @@ exports.useElements = useElements;

dist/react-stripe.umd.min.d.ts

@@ -231,2 +231,6 @@ import { FunctionComponent, ReactNode } from "react";
 type EpsBankElementComponent = FunctionComponent<EpsBankElementProps>;
+interface PaymentElementProps extends ElementProps {
+    options?: any;
+}
+type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
 interface PaymentRequestButtonElementProps extends ElementProps {
@@ -323,2 +327,3 @@ /**
         getElement(component: EpsBankElementComponent): stripeJs.StripeEpsBankElement | null;
+        getElement(component: PaymentElementComponent): stripeJs.StripeElement | null;
         /**
@@ -424,2 +429,3 @@ * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
 declare const EpsBankElement: EpsBankElementComponent;
+declare const PaymentElement: PaymentElementComponent;
 /**
@@ -433,2 +439,2 @@ * @docs https://stripe.com/docs/stripe-js/react#element-components
 declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };

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){return(n="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 r(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function o(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,a=e[Symbol.iterator]();!(r=(c=a.next()).done)&&(n.push(c.value),!t||n.length!==t);r=!0);}catch(e){o=!0,u=e}finally{try{r||null==a.return||a.return()}finally{if(o)throw u}}return n}(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 c(){}function a(){}a.resetWarningCache=c;var i=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 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:a,resetWarningCache:c};return n.PropTypes=n,n}()})),s=function(e){return null!==e&&"object"===n(e)},p=function e(t,n){if(!s(t)||!s(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!1;var u=Object.keys(t),c=Object.keys(n);if(u.length!==c.length)return!1;for(var a={},i=0;i<u.length;i+=1)a[u[i]]=!0;for(var p=0;p<c.length;p+=1)a[c[p]]=!0;var l=Object.keys(a);if(l.length!==u.length)return!1;var f=t,y=n;return l.every((function(t){return e(f[t],y[t])}))},l=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},f=function(e){if(null===e||s(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.")},y=function(e){if(function(e){return s(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(f)};var t=f(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},m=t.createContext(null);m.displayName="ElementsContext";var d=function(e){var n=e.stripe,r=e.options,u=e.children,c=t.useRef(!1),a=t.useRef(!0),i=t.useMemo((function(){return y(n)}),[n]),s=o(t.useState((function(){return{stripe:null,elements:null}})),2),f=s[0],d=s[1],v=l(n),h=l(r);return null!==v&&(v!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it."),p(r,h)||console.warn("Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.")),c.current||("sync"===i.tag&&(c.current=!0,d({stripe:i.stripe,elements:i.stripe.elements(r)})),"async"===i.tag&&(c.current=!0,i.stripePromise.then((function(e){e&&a.current&&d({stripe:e,elements:e.elements(r)})})))),t.useEffect((function(){return function(){a.current=!1}}),[]),t.useEffect((function(){var e=f.stripe;e&&e._registerWrapper&&e._registerWrapper({name:"react-stripe-js",version:"1.4.0"})}),[f.stripe]),t.createElement(m.Provider,{value:f},u)};d.propTypes={stripe:i.any,options:i.object};var 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(m),e)},h=function(e){return(0,e.children)(v("mounts <ElementsConsumer>"))};h.propTypes={children:i.func.isRequired};var b=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},E=function(e){if(!s(e))return{};e.paymentRequest;return r(e,["paymentRequest"])},g=function(){},O=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),u=n?function(e){v("mounts <".concat(o,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,u=n.className,c=n.options,a=void 0===c?{}:c,i=n.onBlur,s=void 0===i?g:i,l=n.onFocus,f=void 0===l?g:l,y=n.onReady,m=void 0===y?g:y,d=n.onChange,h=void 0===d?g:d,O=n.onEscape,j=void 0===O?g:O,C=n.onClick,S=void 0===C?g:C,R=v("mounts <".concat(o,">")).elements,k=t.useRef(null),w=t.useRef(null),x=b(m),P=b(s),A=b(f),T=b(S),B=b(h),_=b(j);t.useLayoutEffect((function(){if(null==k.current&&R&&null!=w.current){var t=R.create(e,a);k.current=t,t.mount(w.current),t.on("ready",(function(){return x(t)})),t.on("change",B),t.on("blur",P),t.on("focus",A),t.on("escape",_),t.on("click",T)}}));var I=t.useRef(a);return t.useEffect((function(){I.current&&I.current.paymentRequest!==a.paymentRequest&&console.warn("Unsupported prop change: options.paymentRequest is not a customizable property.");var e=E(a);0===Object.keys(e).length||p(e,E(I.current))||k.current&&(k.current.update(e),I.current=a)}),[a]),t.useLayoutEffect((function(){return function(){k.current&&k.current.destroy()}}),[]),t.createElement("div",{id:r,className:u,ref:w})};return u.propTypes={id:i.string,className:i.string,onChange:i.func,onBlur:i.func,onFocus:i.func,onReady:i.func,onClick:i.func,options:i.object},u.displayName=o,u.__elementType=e,u},j="undefined"==typeof window,C=O("auBankAccount",j),S=O("card",j),R=O("cardNumber",j),k=O("cardExpiry",j),w=O("cardCvc",j),x=O("fpxBank",j),P=O("iban",j),A=O("idealBank",j),T=O("p24Bank",j),B=O("epsBank",j),_=O("paymentRequestButton",j),I=O("afterpayClearpayMessage",j);e.AfterpayClearpayMessageElement=I,e.AuBankAccountElement=C,e.CardCvcElement=w,e.CardElement=S,e.CardExpiryElement=k,e.CardNumberElement=R,e.Elements=d,e.ElementsConsumer=h,e.EpsBankElement=B,e.FpxBankElement=x,e.IbanElement=P,e.IdealBankElement=A,e.P24BankElement=T,e.PaymentRequestButtonElement=_,e.useElements=function(){return v("calls useElements()").elements},e.useStripe=function(){return v("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){return(n="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 r(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function o(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,a=e[Symbol.iterator]();!(r=(c=a.next()).done)&&(n.push(c.value),!t||n.length!==t);r=!0);}catch(e){o=!0,u=e}finally{try{r||null==a.return||a.return()}finally{if(o)throw u}}return n}(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 c(){}function a(){}a.resetWarningCache=c;var i=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 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:a,resetWarningCache:c};return n.PropTypes=n,n}()})),s=function(e){return null!==e&&"object"===n(e)},p=function e(t,n){if(!s(t)||!s(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!1;var u=Object.keys(t),c=Object.keys(n);if(u.length!==c.length)return!1;for(var a={},i=0;i<u.length;i+=1)a[u[i]]=!0;for(var p=0;p<c.length;p+=1)a[c[p]]=!0;var l=Object.keys(a);if(l.length!==u.length)return!1;var f=t,y=n;return l.every((function(t){return e(f[t],y[t])}))},l=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},f=function(e){if(null===e||s(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.")},y=function(e){if(function(e){return s(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(f)};var t=f(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},m=t.createContext(null);m.displayName="ElementsContext";var d=function(e){var n=e.stripe,r=e.options,u=e.children,c=t.useRef(!1),a=t.useRef(!0),i=t.useMemo((function(){return y(n)}),[n]),s=o(t.useState((function(){return{stripe:null,elements:null}})),2),f=s[0],d=s[1],v=l(n),h=l(r);return null!==v&&(v!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it."),p(r,h)||console.warn("Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.")),c.current||("sync"===i.tag&&(c.current=!0,d({stripe:i.stripe,elements:i.stripe.elements(r)})),"async"===i.tag&&(c.current=!0,i.stripePromise.then((function(e){e&&a.current&&d({stripe:e,elements:e.elements(r)})})))),t.useEffect((function(){return function(){a.current=!1}}),[]),t.useEffect((function(){var e=f.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"1.4.1"}),e.registerAppInfo({name:"react-stripe-js",version:"1.4.1",url:"https://stripe.com/docs/stripe-js/react"}))}),[f.stripe]),t.createElement(m.Provider,{value:f},u)};d.propTypes={stripe:i.any,options:i.object};var 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(m),e)},h=function(e){return(0,e.children)(v("mounts <ElementsConsumer>"))};h.propTypes={children:i.func.isRequired};var b=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},g=function(e){if(!s(e))return{};e.paymentRequest;return r(e,["paymentRequest"])},E=function(){},j=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),u=n?function(e){v("mounts <".concat(o,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,u=n.className,c=n.options,a=void 0===c?{}:c,i=n.onBlur,s=void 0===i?E:i,l=n.onFocus,f=void 0===l?E:l,y=n.onReady,m=void 0===y?E:y,d=n.onChange,h=void 0===d?E:d,j=n.onEscape,O=void 0===j?E:j,C=n.onClick,S=void 0===C?E:C,R=v("mounts <".concat(o,">")).elements,k=t.useRef(null),w=t.useRef(null),x=b(m),P=b(s),A=b(f),T=b(S),B=b(h),_=b(O);t.useLayoutEffect((function(){if(null==k.current&&R&&null!=w.current){var t=R.create(e,a);k.current=t,t.mount(w.current),t.on("ready",(function(){return x(t)})),t.on("change",B),t.on("blur",P),t.on("focus",A),t.on("escape",_),t.on("click",T)}}));var I=t.useRef(a);return t.useEffect((function(){I.current&&I.current.paymentRequest!==a.paymentRequest&&console.warn("Unsupported prop change: options.paymentRequest is not a customizable property.");var e=g(a);0===Object.keys(e).length||p(e,g(I.current))||k.current&&(k.current.update(e),I.current=a)}),[a]),t.useLayoutEffect((function(){return function(){k.current&&k.current.destroy()}}),[]),t.createElement("div",{id:r,className:u,ref:w})};return u.propTypes={id:i.string,className:i.string,onChange:i.func,onBlur:i.func,onFocus:i.func,onReady:i.func,onClick:i.func,options:i.object},u.displayName=o,u.__elementType=e,u},O="undefined"==typeof window,C=j("auBankAccount",O),S=j("card",O),R=j("cardNumber",O),k=j("cardExpiry",O),w=j("cardCvc",O),x=j("fpxBank",O),P=j("iban",O),A=j("idealBank",O),T=j("p24Bank",O),B=j("epsBank",O),_=j("payment",O),I=j("paymentRequestButton",O),q=j("afterpayClearpayMessage",O);e.AfterpayClearpayMessageElement=q,e.AuBankAccountElement=C,e.CardCvcElement=w,e.CardElement=S,e.CardExpiryElement=k,e.CardNumberElement=R,e.Elements=d,e.ElementsConsumer=h,e.EpsBankElement=B,e.FpxBankElement=x,e.IbanElement=P,e.IdealBankElement=A,e.P24BankElement=T,e.PaymentElement=_,e.PaymentRequestButtonElement=I,e.useElements=function(){return v("calls useElements()").elements},e.useStripe=function(){return v("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@stripe/react-stripe-js",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "description": "React components for Stripe.js and Stripe Elements",
@@ -14,3 +14,3 @@ "main": "dist/react-stripe.js",
     "test:unit": "jest",
-    "lint": "eslint '{src,examples}/**/*.{ts,tsx,js}'",
+    "lint": "eslint --max-warnings=0 '{src,examples}/**/*.{ts,tsx,js}'",
     "lint:prettier": "prettier './**/*.js' './**/*.css' './**/*.md' --list-different",
@@ -17,0 +17,0 @@ "typecheck": "tsc",

src/index.ts

@@ -13,2 +13,3 @@ import createElementComponent from './components/createElementComponent';
   EpsBankElementComponent,
+  PaymentElementComponent,
   PaymentRequestButtonElementComponent,
@@ -112,2 +113,7 @@ AfterpayClearpayMessageElementComponent,
 
+export const PaymentElement: PaymentElementComponent = createElementComponent(
+  'payment',
+  isServer
+);
+
 /**
@@ -114,0 +120,0 @@ * @docs https://stripe.com/docs/stripe-js/react#element-components

src/types/index.ts

@@ -298,2 +298,8 @@ import {FunctionComponent} from 'react';
 
+export interface PaymentElementProps extends ElementProps {
+  options?: any;
+}
+
+export type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
+
 export interface PaymentRequestButtonElementProps extends ElementProps {
@@ -435,2 +441,6 @@ /**
 
+    getElement(
+      component: PaymentElementComponent
+    ): stripeJs.StripeElement | null;
+
     /**
@@ -437,0 +447,0 @@ * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.

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

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

233978

increased by1.31%

Lines of code

4916

increased by1.26%

No dependency changes