Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@stripe/react-stripe-js
Advanced tools
@stripe/react-stripe-js - npm Package Compare versions
Comparing version 1.0.3 to 1.1.0
115
CHANGELOG.md
| # Changelog | ||
| React Stripe.js adheres to | ||
| [Semantic Versioning](https://semver.org/spec/v2.0.0.html). | ||
| ## v1.0.0-beta.3 2020-01-24 | ||
| More examples and miscellaneous documentation updates. | ||
| ### Fixes | ||
| - Removes a warning about `useLayoutEffect` when using React Stripe.js with | ||
| server side rendering. | ||
| ## v1.0.0-beta.2 2020-01-21 | ||
| Reversion to v1. | ||
| ### New Features | ||
| - Add support for passing `Promise<StripeObject | null>` to the stripe prop of | ||
| `Elements`. This removes the need for users to create and manage their own | ||
| state when asynchronously loading Stripe.js and can be used with the | ||
| `loadStripe` function from the | ||
| [Stripe.js module](https://github.com/stripe/stripe-js). | ||
| ```jsx | ||
| import {loadStripe} from '@stripe/stripe-js'; | ||
| const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh'); | ||
| const App = () => <Elements stripe={stripePromise}>{/* ... */}</Elements>; | ||
| ``` | ||
| ## v1.0.0-beta.1 2019-12-20 | ||
| Rename from @stripe/react-stripe to @stripe/react-stripe-js | ||
| ## v7.0.0-beta.0 2019-12-18 | ||
| - No code changes from the last alpha release | ||
| - Add official docs | ||
| - Add a migration guide | ||
| - Update Readme | ||
| ## v7.0.0-alpha.5 2019-12-17 | ||
| - Fix a vulnerability in a build dependency | ||
| - Code quality | ||
| ## v7.0.0-alpha.4 2019-12-06 | ||
| ### New Features | ||
| - Add support for passing an Element component to `elements.getElement` | ||
| ```js | ||
| const cardElement = elements.getElement(CardElement); | ||
| ``` | ||
| - Add a new hook, `useStripe` which returns the Stripe object passed to | ||
| `<Elements>` | ||
| ```js | ||
| const stripe = useStripe(); | ||
| ``` | ||
| - Expand `<ElementsConsumer>` to provide both the Elements and Stripe objects. | ||
| ```jsx | ||
| <ElementsConsumer> | ||
| {({stripe, elements}) => ( | ||
| <MyCheckoutForm stripe={stripe} elements={elements} /> | ||
| )} | ||
| </ElementsConsumer> | ||
| ``` | ||
| ### Breaking Changes | ||
| - Passing `undefined` to the `stripe` prop of `<Elements>` is no longer | ||
| possible. If you are async loading Stripe.js, you will need to explicitly pass | ||
| `null`. | ||
| - The value provided by `<ElementsConsumer>` has changed to support providing | ||
| Stripe as well as Elements. | ||
| ## v7.0.0-alpha.3 - 2019-11-15 | ||
| Fix minified UMD build | ||
| ## v7.0.0-alpha.2 - 2019-11-15 | ||
| Fix dependencies | ||
| ## v7.0.0-alpha.1 - 2019-11-15 | ||
| ### Breaking Changes | ||
| - Drop injectElements since it is easy to implement with `ElementsConsumer` if | ||
| users want to use the HOC pattern. | ||
| ### Fixes | ||
| - Better errors when trying to call `useElements` or mount components that rely | ||
| on Elements context outside of an provider. | ||
| - Test cleanup | ||
| ## v7.0.0-alpha.0 - 2019-11-05 | ||
| Initial alpha release | ||
| --- | ||
| For changes to versions before v7.0.0 please refer to the | ||
| `react-stripe-elements` | ||
| [changelog](https://github.com/stripe/react-stripe-elements/blob/master/CHANGELOG.md). | ||
| See the [releases page](https://github.com/stripe/react-stripe-js/releases) on | ||
| GitHub for release notes. |
@@ -36,2 +36,6 @@ import { FunctionComponent, ReactNode } from "react"; | ||
| onReady?: (element: stripeJs.StripeAuBankAccountElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -54,2 +58,6 @@ type AuBankAccountElementComponent = FunctionComponent<AuBankAccountElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -72,2 +80,6 @@ type CardElementComponent = FunctionComponent<CardElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardNumberElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -90,2 +102,6 @@ type CardNumberElementComponent = FunctionComponent<CardNumberElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardExpiryElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -108,2 +124,6 @@ type CardExpiryElementComponent = FunctionComponent<CardExpiryElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardCvcElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -126,2 +146,6 @@ type CardCvcElementComponent = FunctionComponent<CardCvcElementProps>; | ||
| onReady?: (element: stripeJs.StripeFpxBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -144,2 +168,6 @@ type FpxBankElementComponent = FunctionComponent<FpxBankElementProps>; | ||
| onReady?: (element: stripeJs.StripeIbanElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -162,2 +190,6 @@ type IbanElementComponent = FunctionComponent<IbanElementProps>; | ||
| onReady?: (element: stripeJs.StripeIdealBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -164,0 +196,0 @@ type IdealBankElementComponent = FunctionComponent<IdealBankElementProps>; |
@@ -36,2 +36,6 @@ import { FunctionComponent, ReactNode } from "react"; | ||
| onReady?: (element: stripeJs.StripeAuBankAccountElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -54,2 +58,6 @@ type AuBankAccountElementComponent = FunctionComponent<AuBankAccountElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -72,2 +80,6 @@ type CardElementComponent = FunctionComponent<CardElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardNumberElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -90,2 +102,6 @@ type CardNumberElementComponent = FunctionComponent<CardNumberElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardExpiryElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -108,2 +124,6 @@ type CardExpiryElementComponent = FunctionComponent<CardExpiryElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardCvcElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -126,2 +146,6 @@ type CardCvcElementComponent = FunctionComponent<CardCvcElementProps>; | ||
| onReady?: (element: stripeJs.StripeFpxBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -144,2 +168,6 @@ type FpxBankElementComponent = FunctionComponent<FpxBankElementProps>; | ||
| onReady?: (element: stripeJs.StripeIbanElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -162,2 +190,6 @@ type IbanElementComponent = FunctionComponent<IbanElementProps>; | ||
| onReady?: (element: stripeJs.StripeIdealBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -164,0 +196,0 @@ type IdealBankElementComponent = FunctionComponent<IdealBankElementProps>; |
@@ -318,3 +318,3 @@ import React from 'react'; | ||
| var children = _ref2.children; | ||
| var ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>'); // Assert to satsify the busted React.FC return type (it should be ReactNode) | ||
| var ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>'); // Assert to satisfy the busted React.FC return type (it should be ReactNode) | ||
@@ -372,2 +372,4 @@ return children(ctx); | ||
| onChange = _ref$onChange === void 0 ? noop : _ref$onChange, | ||
| _ref$onEscape = _ref.onEscape, | ||
| onEscape = _ref$onEscape === void 0 ? noop : _ref$onEscape, | ||
| _ref$onClick = _ref.onClick, | ||
@@ -386,2 +388,3 @@ onClick = _ref$onClick === void 0 ? noop : _ref$onClick; | ||
| var callOnChange = useCallbackReference(onChange); | ||
| var callOnEscape = useCallbackReference(onEscape); | ||
| React.useLayoutEffect(function () { | ||
@@ -397,3 +400,4 @@ if (elementRef.current == null && elements && domNode.current != null) { | ||
| element.on('blur', callOnBlur); | ||
| element.on('focus', callOnFocus); // Users can pass an an onClick prop on any Element component | ||
| element.on('focus', callOnFocus); | ||
| element.on('escape', callOnEscape); // Users can pass an an onClick prop on any Element component | ||
| // just as they could listen for the `click` event on any Element, | ||
@@ -400,0 +404,0 @@ // but only the PaymentRequestButton will actually trigger the event. |
@@ -324,3 +324,3 @@ 'use strict'; | ||
| var children = _ref2.children; | ||
| var ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>'); // Assert to satsify the busted React.FC return type (it should be ReactNode) | ||
| var ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>'); // Assert to satisfy the busted React.FC return type (it should be ReactNode) | ||
@@ -378,2 +378,4 @@ return children(ctx); | ||
| onChange = _ref$onChange === void 0 ? noop : _ref$onChange, | ||
| _ref$onEscape = _ref.onEscape, | ||
| onEscape = _ref$onEscape === void 0 ? noop : _ref$onEscape, | ||
| _ref$onClick = _ref.onClick, | ||
@@ -392,2 +394,3 @@ onClick = _ref$onClick === void 0 ? noop : _ref$onClick; | ||
| var callOnChange = useCallbackReference(onChange); | ||
| var callOnEscape = useCallbackReference(onEscape); | ||
| React.useLayoutEffect(function () { | ||
@@ -403,3 +406,4 @@ if (elementRef.current == null && elements && domNode.current != null) { | ||
| element.on('blur', callOnBlur); | ||
| element.on('focus', callOnFocus); // Users can pass an an onClick prop on any Element component | ||
| element.on('focus', callOnFocus); | ||
| element.on('escape', callOnEscape); // Users can pass an an onClick prop on any Element component | ||
| // just as they could listen for the `click` event on any Element, | ||
@@ -406,0 +410,0 @@ // but only the PaymentRequestButton will actually trigger the event. |
@@ -36,2 +36,6 @@ import { FunctionComponent, ReactNode } from "react"; | ||
| onReady?: (element: stripeJs.StripeAuBankAccountElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -54,2 +58,6 @@ type AuBankAccountElementComponent = FunctionComponent<AuBankAccountElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -72,2 +80,6 @@ type CardElementComponent = FunctionComponent<CardElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardNumberElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -90,2 +102,6 @@ type CardNumberElementComponent = FunctionComponent<CardNumberElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardExpiryElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -108,2 +124,6 @@ type CardExpiryElementComponent = FunctionComponent<CardExpiryElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardCvcElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -126,2 +146,6 @@ type CardCvcElementComponent = FunctionComponent<CardCvcElementProps>; | ||
| onReady?: (element: stripeJs.StripeFpxBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -144,2 +168,6 @@ type FpxBankElementComponent = FunctionComponent<FpxBankElementProps>; | ||
| onReady?: (element: stripeJs.StripeIbanElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -162,2 +190,6 @@ type IbanElementComponent = FunctionComponent<IbanElementProps>; | ||
| onReady?: (element: stripeJs.StripeIdealBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -164,0 +196,0 @@ type IdealBankElementComponent = FunctionComponent<IdealBankElementProps>; |
@@ -36,2 +36,6 @@ import { FunctionComponent, ReactNode } from "react"; | ||
| onReady?: (element: stripeJs.StripeAuBankAccountElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -54,2 +58,6 @@ type AuBankAccountElementComponent = FunctionComponent<AuBankAccountElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -72,2 +80,6 @@ type CardElementComponent = FunctionComponent<CardElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardNumberElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -90,2 +102,6 @@ type CardNumberElementComponent = FunctionComponent<CardNumberElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardExpiryElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -108,2 +124,6 @@ type CardExpiryElementComponent = FunctionComponent<CardExpiryElementProps>; | ||
| onReady?: (element: stripeJs.StripeCardCvcElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -126,2 +146,6 @@ type CardCvcElementComponent = FunctionComponent<CardCvcElementProps>; | ||
| onReady?: (element: stripeJs.StripeFpxBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -144,2 +168,6 @@ type FpxBankElementComponent = FunctionComponent<FpxBankElementProps>; | ||
| onReady?: (element: stripeJs.StripeIbanElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -162,2 +190,6 @@ type IbanElementComponent = FunctionComponent<IbanElementProps>; | ||
| onReady?: (element: stripeJs.StripeIdealBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -164,0 +196,0 @@ type IdealBankElementComponent = FunctionComponent<IdealBankElementProps>; |
@@ -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(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(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(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}t=t&&t.hasOwnProperty("default")?t.default:t;function u(){}function c(){}c.resetWarningCache=u;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:c,resetWarningCache:u};return n.PropTypes=n,n}()})),a=function(e){return null!==e&&"object"===n(e)},s=function e(t,n){if(!a(t)||!a(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 i={},s=0;s<u.length;s+=1)i[u[s]]=!0;for(var l=0;l<c.length;l+=1)i[c[l]]=!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])}))},l=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},p=function(e){if(null===e||a(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.")},f=function(e){if(function(e){return a(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(p)};var t=p(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},y=t.createContext(null);y.displayName="ElementsContext";var m=function(e){var n=e.stripe,r=e.options,u=e.children,c=t.useRef(!1),i=t.useRef(!0),a=t.useMemo((function(){return f(n)}),[n]),p=o(t.useState((function(){return{stripe:null,elements:null}})),2),m=p[0],d=p[1],h=l(n),v=l(r);return null!==h&&(h!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it."),s(r,v)||console.warn("Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.")),c.current||("sync"===a.tag&&(c.current=!0,d({stripe:a.stripe,elements:a.stripe.elements(r)})),"async"===a.tag&&(c.current=!0,a.stripePromise.then((function(e){e&&i.current&&d({stripe:e,elements:e.elements(r)})})))),t.useEffect((function(){return function(){i.current=!1}}),[]),t.createElement(y.Provider,{value:m},u)};m.propTypes={stripe:i.any,options:i.object};var d=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(y),e)},h=function(e){return(0,e.children)(d("mounts <ElementsConsumer>"))};h.propTypes={children:i.func.isRequired};var v=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},b=function(e){if(!a(e))return{};e.paymentRequest;return r(e,["paymentRequest"])},E=function(){},g=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),u=n?function(e){d("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,i=void 0===c?{}:c,a=n.onBlur,l=void 0===a?E:a,p=n.onFocus,f=void 0===p?E:p,y=n.onReady,m=void 0===y?E:y,h=n.onChange,g=void 0===h?E:h,O=n.onClick,j=void 0===O?E:O,R=d("mounts <".concat(o,">")).elements,C=t.useRef(null),S=t.useRef(null),k=v(m),x=v(l),w=v(f),P=v(j),T=v(g);t.useLayoutEffect((function(){if(null==C.current&&R&&null!=S.current){var t=R.create(e,i);C.current=t,t.mount(S.current),t.on("ready",(function(){return k(t)})),t.on("change",T),t.on("blur",x),t.on("focus",w),t.on("click",P)}}));var _=t.useRef(i);return t.useEffect((function(){_.current&&_.current.paymentRequest!==i.paymentRequest&&console.warn("Unsupported prop change: options.paymentRequest is not a customizable property.");var e=b(i);0===Object.keys(e).length||s(e,b(_.current))||C.current&&(C.current.update(e),_.current=i)}),[i]),t.useEffect((function(){return function(){C.current&&C.current.destroy()}}),[]),t.createElement("div",{id:r,className:u,ref:S})};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,j=g("auBankAccount",O),R=g("card",O),C=g("cardNumber",O),S=g("cardExpiry",O),k=g("cardCvc",O),x=g("fpxBank",O),w=g("iban",O),P=g("idealBank",O),T=g("paymentRequestButton",O);e.AuBankAccountElement=j,e.CardCvcElement=k,e.CardElement=R,e.CardExpiryElement=S,e.CardNumberElement=C,e.Elements=m,e.ElementsConsumer=h,e.FpxBankElement=x,e.IbanElement=w,e.IdealBankElement=P,e.PaymentRequestButtonElement=T,e.useElements=function(){return d("calls useElements()").elements},e.useStripe=function(){return d("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(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(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(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}t=t&&t.hasOwnProperty("default")?t.default:t;function u(){}function c(){}c.resetWarningCache=u;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:c,resetWarningCache:u};return n.PropTypes=n,n}()})),a=function(e){return null!==e&&"object"===n(e)},s=function e(t,n){if(!a(t)||!a(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 i={},s=0;s<u.length;s+=1)i[u[s]]=!0;for(var p=0;p<c.length;p+=1)i[c[p]]=!0;var l=Object.keys(i);if(l.length!==u.length)return!1;var f=t,y=n;return l.every((function(t){return e(f[t],y[t])}))},p=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},l=function(e){if(null===e||a(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.")},f=function(e){if(function(e){return a(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(l)};var t=l(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},y=t.createContext(null);y.displayName="ElementsContext";var m=function(e){var n=e.stripe,r=e.options,u=e.children,c=t.useRef(!1),i=t.useRef(!0),a=t.useMemo((function(){return f(n)}),[n]),l=o(t.useState((function(){return{stripe:null,elements:null}})),2),m=l[0],d=l[1],v=p(n),h=p(r);return null!==v&&(v!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it."),s(r,h)||console.warn("Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.")),c.current||("sync"===a.tag&&(c.current=!0,d({stripe:a.stripe,elements:a.stripe.elements(r)})),"async"===a.tag&&(c.current=!0,a.stripePromise.then((function(e){e&&i.current&&d({stripe:e,elements:e.elements(r)})})))),t.useEffect((function(){return function(){i.current=!1}}),[]),t.createElement(y.Provider,{value:m},u)};m.propTypes={stripe:i.any,options:i.object};var d=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(y),e)},v=function(e){return(0,e.children)(d("mounts <ElementsConsumer>"))};v.propTypes={children:i.func.isRequired};var h=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},b=function(e){if(!a(e))return{};e.paymentRequest;return r(e,["paymentRequest"])},E=function(){},g=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),u=n?function(e){d("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,i=void 0===c?{}:c,a=n.onBlur,p=void 0===a?E:a,l=n.onFocus,f=void 0===l?E:l,y=n.onReady,m=void 0===y?E:y,v=n.onChange,g=void 0===v?E:v,O=n.onEscape,j=void 0===O?E:O,R=n.onClick,C=void 0===R?E:R,S=d("mounts <".concat(o,">")).elements,k=t.useRef(null),x=t.useRef(null),w=h(m),P=h(p),T=h(f),_=h(C),A=h(g),B=h(j);t.useLayoutEffect((function(){if(null==k.current&&S&&null!=x.current){var t=S.create(e,i);k.current=t,t.mount(x.current),t.on("ready",(function(){return w(t)})),t.on("change",A),t.on("blur",P),t.on("focus",T),t.on("escape",B),t.on("click",_)}}));var q=t.useRef(i);return t.useEffect((function(){q.current&&q.current.paymentRequest!==i.paymentRequest&&console.warn("Unsupported prop change: options.paymentRequest is not a customizable property.");var e=b(i);0===Object.keys(e).length||s(e,b(q.current))||k.current&&(k.current.update(e),q.current=i)}),[i]),t.useEffect((function(){return function(){k.current&&k.current.destroy()}}),[]),t.createElement("div",{id:r,className:u,ref:x})};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,j=g("auBankAccount",O),R=g("card",O),C=g("cardNumber",O),S=g("cardExpiry",O),k=g("cardCvc",O),x=g("fpxBank",O),w=g("iban",O),P=g("idealBank",O),T=g("paymentRequestButton",O);e.AuBankAccountElement=j,e.CardCvcElement=k,e.CardElement=R,e.CardExpiryElement=S,e.CardNumberElement=C,e.Elements=m,e.ElementsConsumer=v,e.FpxBankElement=x,e.IbanElement=w,e.IdealBankElement=P,e.PaymentRequestButtonElement=T,e.useElements=function(){return d("calls useElements()").elements},e.useStripe=function(){return d("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})})); |
| { | ||
| "name": "@stripe/react-stripe-js", | ||
| "version": "1.0.3", | ||
| "version": "1.1.0", | ||
| "description": "React components for Stripe.js and Stripe Elements", | ||
@@ -68,3 +68,3 @@ "main": "dist/react-stripe.js", | ||
| "@storybook/react": "^5.2.6", | ||
| "@stripe/stripe-js": "^1.0.0", | ||
| "@stripe/stripe-js": "^1.2.0", | ||
| "@types/enzyme": "^3.10.4", | ||
@@ -109,3 +109,3 @@ "@types/jest": "^25.1.1", | ||
| "peerDependencies": { | ||
| "@stripe/stripe-js": "^1.0.0", | ||
| "@stripe/stripe-js": "^1.2.0", | ||
| "react": "^16.8.0", | ||
@@ -112,0 +112,0 @@ "react-dom": "^16.8.0" |
| # React Stripe.js | ||
| React components for [Stripe.js](https://stripe.com/docs/stripe-js) and | ||
| [Stripe Elements](https://stripe.com/docs/elements). | ||
| React components for | ||
| [Stripe.js and Elements](https://stripe.com/docs/stripe-js). | ||
@@ -6,0 +6,0 @@ [](https://travis-ci.org/stripe/react-stripe-js) |
@@ -14,2 +14,3 @@ import React from 'react'; | ||
| let simulateFocus; | ||
| let simulateEscape; | ||
| let simulateReady; | ||
@@ -37,2 +38,5 @@ let simulateClick; | ||
| break; | ||
| case 'escape': | ||
| simulateEscape = fn; | ||
| break; | ||
| case 'ready': | ||
@@ -277,2 +281,26 @@ simulateReady = fn; | ||
| it('propagates the Element`s escape event to the current onEscape prop', () => { | ||
| // We need to wrap so that we can update the CardElement's props later. | ||
| // Enzyme does not support calling setProps on child components. | ||
| const TestComponent = (props) => ( | ||
| <Elements stripe={stripe}> | ||
| <CardElement {...props} /> | ||
| </Elements> | ||
| ); | ||
| const onEscape = jest.fn(); | ||
| const onEscape2 = jest.fn(); | ||
| const wrapper = mount(<TestComponent onEscape={onEscape} />); | ||
| // when setting a new onEscape prop (e.g. a lambda in the render), | ||
| // only the latest handler is called. | ||
| wrapper.setProps({ | ||
| onEscape: onEscape2, | ||
| }); | ||
| simulateEscape(); | ||
| expect(onEscape2).toHaveBeenCalled(); | ||
| expect(onEscape).not.toHaveBeenCalled(); | ||
| }); | ||
| // Users can pass an an onClick prop on any Element component | ||
@@ -325,3 +353,3 @@ // just as they could listen for the `click` event on any Element, | ||
| it('does not trigger unecessary updates', () => { | ||
| it('does not trigger unnecessary updates', () => { | ||
| // We need to wrap so that we can update the CardElement's props later. | ||
@@ -351,3 +379,3 @@ // Enzyme does not support calling setProps on child components. | ||
| it('warns on changes to non-updateable options', () => { | ||
| it('warns on changes to non-updatable options', () => { | ||
| // We need to wrap so that we can update the CardElement's props later. | ||
@@ -354,0 +382,0 @@ // Enzyme does not support calling setProps on child components. |
@@ -43,2 +43,7 @@ import {FunctionComponent} from 'react'; | ||
| onReady?: (element: stripeJs.StripeAuBankAccountElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -67,2 +72,7 @@ | ||
| onReady?: (element: stripeJs.StripeCardElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -89,2 +99,7 @@ | ||
| onReady?: (element: stripeJs.StripeCardNumberElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -113,2 +128,7 @@ | ||
| onReady?: (element: stripeJs.StripeCardExpiryElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -137,2 +157,7 @@ | ||
| onReady?: (element: stripeJs.StripeCardCvcElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -159,2 +184,7 @@ | ||
| onReady?: (element: stripeJs.StripeFpxBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -181,2 +211,7 @@ | ||
| onReady?: (element: stripeJs.StripeIbanElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -203,2 +238,7 @@ | ||
| onReady?: (element: stripeJs.StripeIdealBankElement) => any; | ||
| /** | ||
| * Triggered when the escape key is pressed within the Element. | ||
| */ | ||
| onEscape?: () => any; | ||
| } | ||
@@ -205,0 +245,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Lines of code
- increased by3.95%
5292
Worsened metrics
- Total package byte prevSize
- decreased by-1.09%
243373
- Number of package files
- decreased by-4%
24
No dependency changes