@stripe/react-stripe-js
Advanced tools
Comparing version 1.16.2 to 1.16.3
@@ -376,3 +376,3 @@ import React from 'react'; | ||
name: 'react-stripe-js', | ||
version: "1.16.2" | ||
version: "1.16.3" | ||
}); | ||
@@ -382,3 +382,3 @@ | ||
name: 'react-stripe-js', | ||
version: "1.16.2", | ||
version: "1.16.3", | ||
url: 'https://stripe.com/docs/stripe-js/react' | ||
@@ -464,16 +464,28 @@ }); | ||
var useCallbackReference = function useCallbackReference(cb) { | ||
var ref = React.useRef(cb); | ||
var useAttachEvent = function useAttachEvent(element, event, cb) { | ||
var cbDefined = !!cb; | ||
var cbRef = React.useRef(cb); // In many integrations the callback prop changes on each render. | ||
// Using a ref saves us from calling element.on/.off every render. | ||
React.useEffect(function () { | ||
ref.current = cb; | ||
cbRef.current = cb; | ||
}, [cb]); | ||
return function () { | ||
if (ref.current) { | ||
ref.current.apply(ref, arguments); | ||
React.useEffect(function () { | ||
if (!cbDefined || !element) { | ||
return function () {}; | ||
} | ||
}; | ||
var decoratedCb = function decoratedCb() { | ||
if (cbRef.current) { | ||
cbRef.current.apply(cbRef, arguments); | ||
} | ||
}; | ||
element.on(event, decoratedCb); | ||
return function () { | ||
element.off(event, decoratedCb); | ||
}; | ||
}, [cbDefined, event, element, cbRef]); | ||
}; | ||
var noop = function noop() {}; | ||
var capitalized = function capitalized(str) { | ||
@@ -491,32 +503,17 @@ return str.charAt(0).toUpperCase() + str.slice(1); | ||
options = _ref$options === void 0 ? {} : _ref$options, | ||
_ref$onBlur = _ref.onBlur, | ||
onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur, | ||
_ref$onFocus = _ref.onFocus, | ||
onFocus = _ref$onFocus === void 0 ? noop : _ref$onFocus, | ||
_ref$onReady = _ref.onReady, | ||
onReady = _ref$onReady === void 0 ? noop : _ref$onReady, | ||
_ref$onChange = _ref.onChange, | ||
onChange = _ref$onChange === void 0 ? noop : _ref$onChange, | ||
_ref$onEscape = _ref.onEscape, | ||
onEscape = _ref$onEscape === void 0 ? noop : _ref$onEscape, | ||
_ref$onClick = _ref.onClick, | ||
onClick = _ref$onClick === void 0 ? noop : _ref$onClick, | ||
_ref$onLoadError = _ref.onLoadError, | ||
onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError, | ||
_ref$onLoaderStart = _ref.onLoaderStart, | ||
onLoaderStart = _ref$onLoaderStart === void 0 ? noop : _ref$onLoaderStart, | ||
_ref$onNetworksChange = _ref.onNetworksChange, | ||
onNetworksChange = _ref$onNetworksChange === void 0 ? noop : _ref$onNetworksChange, | ||
_ref$onCheckout = _ref.onCheckout, | ||
onCheckout = _ref$onCheckout === void 0 ? noop : _ref$onCheckout, | ||
_ref$onLineItemClick = _ref.onLineItemClick, | ||
onLineItemClick = _ref$onLineItemClick === void 0 ? noop : _ref$onLineItemClick, | ||
_ref$onConfirm = _ref.onConfirm, | ||
onConfirm = _ref$onConfirm === void 0 ? noop : _ref$onConfirm, | ||
_ref$onCancel = _ref.onCancel, | ||
onCancel = _ref$onCancel === void 0 ? noop : _ref$onCancel, | ||
_ref$onShippingAddres = _ref.onShippingAddressChange, | ||
onShippingAddressChange = _ref$onShippingAddres === void 0 ? noop : _ref$onShippingAddres, | ||
_ref$onShippingRateCh = _ref.onShippingRateChange, | ||
onShippingRateChange = _ref$onShippingRateCh === void 0 ? noop : _ref$onShippingRateCh; | ||
onBlur = _ref.onBlur, | ||
onFocus = _ref.onFocus, | ||
onReady = _ref.onReady, | ||
onChange = _ref.onChange, | ||
onEscape = _ref.onEscape, | ||
onClick = _ref.onClick, | ||
onLoadError = _ref.onLoadError, | ||
onLoaderStart = _ref.onLoaderStart, | ||
onNetworksChange = _ref.onNetworksChange, | ||
onCheckout = _ref.onCheckout, | ||
onLineItemClick = _ref.onLineItemClick, | ||
onConfirm = _ref.onConfirm, | ||
onCancel = _ref.onCancel, | ||
onShippingAddressChange = _ref.onShippingAddressChange, | ||
onShippingRateChange = _ref.onShippingRateChange; | ||
@@ -526,3 +523,7 @@ var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")), | ||
var elementRef = React.useRef(null); | ||
var _React$useState = React.useState(null), | ||
_React$useState2 = _slicedToArray(_React$useState, 2), | ||
element = _React$useState2[0], | ||
setElement = _React$useState2[1]; | ||
var domNode = React.useRef(null); | ||
@@ -532,22 +533,52 @@ | ||
setCart = _useCartElementContex.setCart, | ||
setCartState = _useCartElementContex.setCartState; | ||
setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on | ||
// with that callback. If the merchant ever changes the callback, removes | ||
// the old callback with element.off and then call element.on with the new one. | ||
var callOnReady = useCallbackReference(onReady); | ||
var callOnBlur = useCallbackReference(onBlur); | ||
var callOnFocus = useCallbackReference(onFocus); | ||
var callOnClick = useCallbackReference(onClick); | ||
var callOnChange = useCallbackReference(onChange); | ||
var callOnEscape = useCallbackReference(onEscape); | ||
var callOnLoadError = useCallbackReference(onLoadError); | ||
var callOnLoaderStart = useCallbackReference(onLoaderStart); | ||
var callOnNetworksChange = useCallbackReference(onNetworksChange); | ||
var callOnCheckout = useCallbackReference(onCheckout); | ||
var callOnLineItemClick = useCallbackReference(onLineItemClick); | ||
var callOnConfirm = useCallbackReference(onConfirm); | ||
var callOnCancel = useCallbackReference(onCancel); | ||
var callOnShippingAddressChange = useCallbackReference(onShippingAddressChange); | ||
var callOnShippingRateChange = useCallbackReference(onShippingRateChange); | ||
useAttachEvent(element, 'blur', onBlur); | ||
useAttachEvent(element, 'focus', onFocus); | ||
useAttachEvent(element, 'escape', onEscape); | ||
useAttachEvent(element, 'click', onClick); | ||
useAttachEvent(element, 'loaderror', onLoadError); | ||
useAttachEvent(element, 'loaderstart', onLoaderStart); | ||
useAttachEvent(element, 'networkschange', onNetworksChange); | ||
useAttachEvent(element, 'lineitemclick', onLineItemClick); | ||
useAttachEvent(element, 'confirm', onConfirm); | ||
useAttachEvent(element, 'cancel', onCancel); | ||
useAttachEvent(element, 'shippingaddresschange', onShippingAddressChange); | ||
useAttachEvent(element, 'shippingratechange', onShippingRateChange); | ||
var readyCallback; | ||
if (type === 'cart') { | ||
readyCallback = function readyCallback(event) { | ||
setCartState(event); | ||
onReady && onReady(event); | ||
}; | ||
} else if (onReady) { | ||
if (type === 'payButton') { | ||
// Passes through the event, which includes visible PM types | ||
readyCallback = onReady; | ||
} else { | ||
// For other Elements, pass through the Element itself. | ||
readyCallback = function readyCallback() { | ||
onReady(element); | ||
}; | ||
} | ||
} | ||
useAttachEvent(element, 'ready', readyCallback); | ||
var changeCallback = type === 'cart' ? function (event) { | ||
setCartState(event); | ||
onChange && onChange(event); | ||
} : onChange; | ||
useAttachEvent(element, 'change', changeCallback); | ||
var checkoutCallback = type === 'cart' ? function (event) { | ||
setCartState(event); | ||
onCheckout && onCheckout(event); | ||
} : onCheckout; | ||
useAttachEvent(element, 'checkout', checkoutCallback); | ||
React.useLayoutEffect(function () { | ||
if (elementRef.current == null && elements && domNode.current != null) { | ||
var element = elements.create(type, options); | ||
if (element === null && elements && domNode.current !== null) { | ||
var newElement = elements.create(type, options); | ||
@@ -557,97 +588,12 @@ if (type === 'cart' && setCart) { | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCart(element); | ||
setCart(newElement); | ||
} | ||
elementRef.current = element; | ||
element.mount(domNode.current); | ||
element.on('ready', function (event) { | ||
if (type === 'cart') { | ||
// we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart' | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
if (setCartState) { | ||
setCartState(event); | ||
} // the cart ready event returns a CartStatePayload instead of the CartElement | ||
callOnReady(event); | ||
} else if (type === 'payButton') { | ||
callOnReady(event); | ||
} else { | ||
callOnReady(element); | ||
} | ||
}); | ||
element.on('change', function (event) { | ||
if (type === 'cart' && setCartState) { | ||
// we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart' | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCartState(event); | ||
} | ||
callOnChange(event); | ||
}); // Users can pass an onBlur prop on any Element component | ||
// just as they could listen for the `blur` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('blur', callOnBlur); // Users can pass an onFocus prop on any Element component | ||
// just as they could listen for the `focus` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('focus', callOnFocus); // Users can pass an onEscape prop on any Element component | ||
// just as they could listen for the `escape` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('escape', callOnEscape); // Users can pass an onLoadError prop on any Element component | ||
// just as they could listen for the `loaderror` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('loaderror', callOnLoadError); // Users can pass an onLoaderStart prop on any Element component | ||
// just as they could listen for the `loaderstart` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('loaderstart', callOnLoaderStart); // Users can pass an onNetworksChange prop on any Element component | ||
// just as they could listen for the `networkschange` event on any Element, | ||
// but only the Card and CardNumber Elements will trigger the event. | ||
element.on('networkschange', callOnNetworksChange); // Users can pass an onClick prop on any Element component | ||
// just as they could listen for the `click` event on any Element, | ||
// but only the PaymentRequestButton will actually trigger the event. | ||
element.on('click', callOnClick); // Users can pass an onCheckout prop on any Element component | ||
// just as they could listen for the `checkout` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('checkout', function (event) { | ||
if (type === 'cart' && setCartState) { | ||
// we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart' | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCartState(event); | ||
} | ||
callOnCheckout(event); | ||
}); // Users can pass an onLineItemClick prop on any Element component | ||
// just as they could listen for the `lineitemclick` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('lineitemclick', callOnLineItemClick); // Users can pass an onConfirm prop on any Element component | ||
// just as they could listen for the `confirm` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('confirm', callOnConfirm); // Users can pass an onCancel prop on any Element component | ||
// just as they could listen for the `cancel` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('cancel', callOnCancel); // Users can pass an onShippingAddressChange prop on any Element component | ||
// just as they could listen for the `shippingaddresschange` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('shippingaddresschange', callOnShippingAddressChange); // Users can pass an onShippingRateChange prop on any Element component | ||
// just as they could listen for the `shippingratechange` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('shippingratechange', callOnShippingRateChange); | ||
setElement(newElement); | ||
newElement.mount(domNode.current); | ||
} | ||
}); | ||
}, [element, elements, options, setCart]); | ||
var prevOptions = usePrevious(options); | ||
React.useEffect(function () { | ||
if (!elementRef.current) { | ||
if (!element) { | ||
return; | ||
@@ -659,13 +605,12 @@ } | ||
if (updates) { | ||
elementRef.current.update(updates); | ||
element.update(updates); | ||
} | ||
}, [options, prevOptions]); | ||
}, [options, prevOptions, element]); | ||
React.useLayoutEffect(function () { | ||
return function () { | ||
if (elementRef.current) { | ||
elementRef.current.destroy(); | ||
elementRef.current = null; | ||
if (element) { | ||
element.destroy(); | ||
} | ||
}; | ||
}, []); | ||
}, [element]); | ||
return /*#__PURE__*/React.createElement("div", { | ||
@@ -672,0 +617,0 @@ id: id, |
@@ -382,3 +382,3 @@ 'use strict'; | ||
name: 'react-stripe-js', | ||
version: "1.16.2" | ||
version: "1.16.3" | ||
}); | ||
@@ -388,3 +388,3 @@ | ||
name: 'react-stripe-js', | ||
version: "1.16.2", | ||
version: "1.16.3", | ||
url: 'https://stripe.com/docs/stripe-js/react' | ||
@@ -470,16 +470,28 @@ }); | ||
var useCallbackReference = function useCallbackReference(cb) { | ||
var ref = React.useRef(cb); | ||
var useAttachEvent = function useAttachEvent(element, event, cb) { | ||
var cbDefined = !!cb; | ||
var cbRef = React.useRef(cb); // In many integrations the callback prop changes on each render. | ||
// Using a ref saves us from calling element.on/.off every render. | ||
React.useEffect(function () { | ||
ref.current = cb; | ||
cbRef.current = cb; | ||
}, [cb]); | ||
return function () { | ||
if (ref.current) { | ||
ref.current.apply(ref, arguments); | ||
React.useEffect(function () { | ||
if (!cbDefined || !element) { | ||
return function () {}; | ||
} | ||
}; | ||
var decoratedCb = function decoratedCb() { | ||
if (cbRef.current) { | ||
cbRef.current.apply(cbRef, arguments); | ||
} | ||
}; | ||
element.on(event, decoratedCb); | ||
return function () { | ||
element.off(event, decoratedCb); | ||
}; | ||
}, [cbDefined, event, element, cbRef]); | ||
}; | ||
var noop = function noop() {}; | ||
var capitalized = function capitalized(str) { | ||
@@ -497,32 +509,17 @@ return str.charAt(0).toUpperCase() + str.slice(1); | ||
options = _ref$options === void 0 ? {} : _ref$options, | ||
_ref$onBlur = _ref.onBlur, | ||
onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur, | ||
_ref$onFocus = _ref.onFocus, | ||
onFocus = _ref$onFocus === void 0 ? noop : _ref$onFocus, | ||
_ref$onReady = _ref.onReady, | ||
onReady = _ref$onReady === void 0 ? noop : _ref$onReady, | ||
_ref$onChange = _ref.onChange, | ||
onChange = _ref$onChange === void 0 ? noop : _ref$onChange, | ||
_ref$onEscape = _ref.onEscape, | ||
onEscape = _ref$onEscape === void 0 ? noop : _ref$onEscape, | ||
_ref$onClick = _ref.onClick, | ||
onClick = _ref$onClick === void 0 ? noop : _ref$onClick, | ||
_ref$onLoadError = _ref.onLoadError, | ||
onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError, | ||
_ref$onLoaderStart = _ref.onLoaderStart, | ||
onLoaderStart = _ref$onLoaderStart === void 0 ? noop : _ref$onLoaderStart, | ||
_ref$onNetworksChange = _ref.onNetworksChange, | ||
onNetworksChange = _ref$onNetworksChange === void 0 ? noop : _ref$onNetworksChange, | ||
_ref$onCheckout = _ref.onCheckout, | ||
onCheckout = _ref$onCheckout === void 0 ? noop : _ref$onCheckout, | ||
_ref$onLineItemClick = _ref.onLineItemClick, | ||
onLineItemClick = _ref$onLineItemClick === void 0 ? noop : _ref$onLineItemClick, | ||
_ref$onConfirm = _ref.onConfirm, | ||
onConfirm = _ref$onConfirm === void 0 ? noop : _ref$onConfirm, | ||
_ref$onCancel = _ref.onCancel, | ||
onCancel = _ref$onCancel === void 0 ? noop : _ref$onCancel, | ||
_ref$onShippingAddres = _ref.onShippingAddressChange, | ||
onShippingAddressChange = _ref$onShippingAddres === void 0 ? noop : _ref$onShippingAddres, | ||
_ref$onShippingRateCh = _ref.onShippingRateChange, | ||
onShippingRateChange = _ref$onShippingRateCh === void 0 ? noop : _ref$onShippingRateCh; | ||
onBlur = _ref.onBlur, | ||
onFocus = _ref.onFocus, | ||
onReady = _ref.onReady, | ||
onChange = _ref.onChange, | ||
onEscape = _ref.onEscape, | ||
onClick = _ref.onClick, | ||
onLoadError = _ref.onLoadError, | ||
onLoaderStart = _ref.onLoaderStart, | ||
onNetworksChange = _ref.onNetworksChange, | ||
onCheckout = _ref.onCheckout, | ||
onLineItemClick = _ref.onLineItemClick, | ||
onConfirm = _ref.onConfirm, | ||
onCancel = _ref.onCancel, | ||
onShippingAddressChange = _ref.onShippingAddressChange, | ||
onShippingRateChange = _ref.onShippingRateChange; | ||
@@ -532,3 +529,7 @@ var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")), | ||
var elementRef = React.useRef(null); | ||
var _React$useState = React.useState(null), | ||
_React$useState2 = _slicedToArray(_React$useState, 2), | ||
element = _React$useState2[0], | ||
setElement = _React$useState2[1]; | ||
var domNode = React.useRef(null); | ||
@@ -538,22 +539,52 @@ | ||
setCart = _useCartElementContex.setCart, | ||
setCartState = _useCartElementContex.setCartState; | ||
setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on | ||
// with that callback. If the merchant ever changes the callback, removes | ||
// the old callback with element.off and then call element.on with the new one. | ||
var callOnReady = useCallbackReference(onReady); | ||
var callOnBlur = useCallbackReference(onBlur); | ||
var callOnFocus = useCallbackReference(onFocus); | ||
var callOnClick = useCallbackReference(onClick); | ||
var callOnChange = useCallbackReference(onChange); | ||
var callOnEscape = useCallbackReference(onEscape); | ||
var callOnLoadError = useCallbackReference(onLoadError); | ||
var callOnLoaderStart = useCallbackReference(onLoaderStart); | ||
var callOnNetworksChange = useCallbackReference(onNetworksChange); | ||
var callOnCheckout = useCallbackReference(onCheckout); | ||
var callOnLineItemClick = useCallbackReference(onLineItemClick); | ||
var callOnConfirm = useCallbackReference(onConfirm); | ||
var callOnCancel = useCallbackReference(onCancel); | ||
var callOnShippingAddressChange = useCallbackReference(onShippingAddressChange); | ||
var callOnShippingRateChange = useCallbackReference(onShippingRateChange); | ||
useAttachEvent(element, 'blur', onBlur); | ||
useAttachEvent(element, 'focus', onFocus); | ||
useAttachEvent(element, 'escape', onEscape); | ||
useAttachEvent(element, 'click', onClick); | ||
useAttachEvent(element, 'loaderror', onLoadError); | ||
useAttachEvent(element, 'loaderstart', onLoaderStart); | ||
useAttachEvent(element, 'networkschange', onNetworksChange); | ||
useAttachEvent(element, 'lineitemclick', onLineItemClick); | ||
useAttachEvent(element, 'confirm', onConfirm); | ||
useAttachEvent(element, 'cancel', onCancel); | ||
useAttachEvent(element, 'shippingaddresschange', onShippingAddressChange); | ||
useAttachEvent(element, 'shippingratechange', onShippingRateChange); | ||
var readyCallback; | ||
if (type === 'cart') { | ||
readyCallback = function readyCallback(event) { | ||
setCartState(event); | ||
onReady && onReady(event); | ||
}; | ||
} else if (onReady) { | ||
if (type === 'payButton') { | ||
// Passes through the event, which includes visible PM types | ||
readyCallback = onReady; | ||
} else { | ||
// For other Elements, pass through the Element itself. | ||
readyCallback = function readyCallback() { | ||
onReady(element); | ||
}; | ||
} | ||
} | ||
useAttachEvent(element, 'ready', readyCallback); | ||
var changeCallback = type === 'cart' ? function (event) { | ||
setCartState(event); | ||
onChange && onChange(event); | ||
} : onChange; | ||
useAttachEvent(element, 'change', changeCallback); | ||
var checkoutCallback = type === 'cart' ? function (event) { | ||
setCartState(event); | ||
onCheckout && onCheckout(event); | ||
} : onCheckout; | ||
useAttachEvent(element, 'checkout', checkoutCallback); | ||
React.useLayoutEffect(function () { | ||
if (elementRef.current == null && elements && domNode.current != null) { | ||
var element = elements.create(type, options); | ||
if (element === null && elements && domNode.current !== null) { | ||
var newElement = elements.create(type, options); | ||
@@ -563,97 +594,12 @@ if (type === 'cart' && setCart) { | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCart(element); | ||
setCart(newElement); | ||
} | ||
elementRef.current = element; | ||
element.mount(domNode.current); | ||
element.on('ready', function (event) { | ||
if (type === 'cart') { | ||
// we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart' | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
if (setCartState) { | ||
setCartState(event); | ||
} // the cart ready event returns a CartStatePayload instead of the CartElement | ||
callOnReady(event); | ||
} else if (type === 'payButton') { | ||
callOnReady(event); | ||
} else { | ||
callOnReady(element); | ||
} | ||
}); | ||
element.on('change', function (event) { | ||
if (type === 'cart' && setCartState) { | ||
// we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart' | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCartState(event); | ||
} | ||
callOnChange(event); | ||
}); // Users can pass an onBlur prop on any Element component | ||
// just as they could listen for the `blur` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('blur', callOnBlur); // Users can pass an onFocus prop on any Element component | ||
// just as they could listen for the `focus` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('focus', callOnFocus); // Users can pass an onEscape prop on any Element component | ||
// just as they could listen for the `escape` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('escape', callOnEscape); // Users can pass an onLoadError prop on any Element component | ||
// just as they could listen for the `loaderror` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('loaderror', callOnLoadError); // Users can pass an onLoaderStart prop on any Element component | ||
// just as they could listen for the `loaderstart` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('loaderstart', callOnLoaderStart); // Users can pass an onNetworksChange prop on any Element component | ||
// just as they could listen for the `networkschange` event on any Element, | ||
// but only the Card and CardNumber Elements will trigger the event. | ||
element.on('networkschange', callOnNetworksChange); // Users can pass an onClick prop on any Element component | ||
// just as they could listen for the `click` event on any Element, | ||
// but only the PaymentRequestButton will actually trigger the event. | ||
element.on('click', callOnClick); // Users can pass an onCheckout prop on any Element component | ||
// just as they could listen for the `checkout` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('checkout', function (event) { | ||
if (type === 'cart' && setCartState) { | ||
// we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart' | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCartState(event); | ||
} | ||
callOnCheckout(event); | ||
}); // Users can pass an onLineItemClick prop on any Element component | ||
// just as they could listen for the `lineitemclick` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('lineitemclick', callOnLineItemClick); // Users can pass an onConfirm prop on any Element component | ||
// just as they could listen for the `confirm` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('confirm', callOnConfirm); // Users can pass an onCancel prop on any Element component | ||
// just as they could listen for the `cancel` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('cancel', callOnCancel); // Users can pass an onShippingAddressChange prop on any Element component | ||
// just as they could listen for the `shippingaddresschange` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('shippingaddresschange', callOnShippingAddressChange); // Users can pass an onShippingRateChange prop on any Element component | ||
// just as they could listen for the `shippingratechange` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
element.on('shippingratechange', callOnShippingRateChange); | ||
setElement(newElement); | ||
newElement.mount(domNode.current); | ||
} | ||
}); | ||
}, [element, elements, options, setCart]); | ||
var prevOptions = usePrevious(options); | ||
React.useEffect(function () { | ||
if (!elementRef.current) { | ||
if (!element) { | ||
return; | ||
@@ -665,13 +611,12 @@ } | ||
if (updates) { | ||
elementRef.current.update(updates); | ||
element.update(updates); | ||
} | ||
}, [options, prevOptions]); | ||
}, [options, prevOptions, element]); | ||
React.useLayoutEffect(function () { | ||
return function () { | ||
if (elementRef.current) { | ||
elementRef.current.destroy(); | ||
elementRef.current = null; | ||
if (element) { | ||
element.destroy(); | ||
} | ||
}; | ||
}, []); | ||
}, [element]); | ||
return /*#__PURE__*/React.createElement("div", { | ||
@@ -678,0 +623,0 @@ id: id, |
(function (global, factory) { | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) : | ||
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) : | ||
(global = global || self, factory(global.ReactStripe = {}, global.React)); | ||
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) : | ||
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) : | ||
(global = global || self, factory(global.ReactStripe = {}, global.React)); | ||
}(this, (function (exports, React) { 'use strict'; | ||
React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React; | ||
React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React; | ||
function createCommonjsModule(fn, module) { | ||
return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
} | ||
function ownKeys(object, enumerableOnly) { | ||
var keys = Object.keys(object); | ||
/** | ||
* Copyright (c) 2013-present, Facebook, Inc. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
if (Object.getOwnPropertySymbols) { | ||
var symbols = Object.getOwnPropertySymbols(object); | ||
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; | ||
var ReactPropTypesSecret_1 = ReactPropTypesSecret; | ||
if (enumerableOnly) { | ||
symbols = symbols.filter(function (sym) { | ||
return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
}); | ||
} | ||
function emptyFunction() {} | ||
keys.push.apply(keys, symbols); | ||
} | ||
function emptyFunctionWithReset() {} | ||
return keys; | ||
} | ||
emptyFunctionWithReset.resetWarningCache = emptyFunction; | ||
function _objectSpread2(target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i] != null ? arguments[i] : {}; | ||
var factoryWithThrowingShims = function () { | ||
function shim(props, propName, componentName, location, propFullName, secret) { | ||
if (secret === ReactPropTypesSecret_1) { | ||
// It is still safe when called from React. | ||
return; | ||
} | ||
if (i % 2) { | ||
ownKeys(Object(source), true).forEach(function (key) { | ||
_defineProperty(target, key, source[key]); | ||
}); | ||
} else if (Object.getOwnPropertyDescriptors) { | ||
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
} else { | ||
ownKeys(Object(source)).forEach(function (key) { | ||
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
}); | ||
} | ||
} | ||
var err = 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'); | ||
err.name = 'Invariant Violation'; | ||
throw err; | ||
} | ||
shim.isRequired = shim; | ||
return target; | ||
} | ||
function getShim() { | ||
return shim; | ||
} | ||
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. | ||
function _typeof(obj) { | ||
"@babel/helpers - typeof"; | ||
var ReactPropTypes = { | ||
array: shim, | ||
bool: shim, | ||
func: shim, | ||
number: shim, | ||
object: shim, | ||
string: shim, | ||
symbol: shim, | ||
any: shim, | ||
arrayOf: getShim, | ||
element: shim, | ||
elementType: shim, | ||
instanceOf: getShim, | ||
node: shim, | ||
objectOf: getShim, | ||
oneOf: getShim, | ||
oneOfType: getShim, | ||
shape: getShim, | ||
exact: getShim, | ||
checkPropTypes: emptyFunctionWithReset, | ||
resetWarningCache: emptyFunction | ||
}; | ||
ReactPropTypes.PropTypes = ReactPropTypes; | ||
return ReactPropTypes; | ||
}; | ||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { | ||
_typeof = function (obj) { | ||
return typeof obj; | ||
}; | ||
} else { | ||
_typeof = function (obj) { | ||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
}; | ||
} | ||
var propTypes = createCommonjsModule(function (module) { | ||
/** | ||
* Copyright (c) 2013-present, Facebook, Inc. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
{ | ||
// By explicitly using `prop-types` you are opting into new production behavior. | ||
// http://fb.me/prop-types-in-prod | ||
module.exports = factoryWithThrowingShims(); | ||
} | ||
}); | ||
return _typeof(obj); | ||
} | ||
function ownKeys(object, enumerableOnly) { | ||
var keys = Object.keys(object); | ||
function _defineProperty(obj, key, value) { | ||
if (key in obj) { | ||
Object.defineProperty(obj, key, { | ||
value: value, | ||
enumerable: true, | ||
configurable: true, | ||
writable: true | ||
}); | ||
} else { | ||
obj[key] = value; | ||
} | ||
if (Object.getOwnPropertySymbols) { | ||
var symbols = Object.getOwnPropertySymbols(object); | ||
return obj; | ||
} | ||
if (enumerableOnly) { | ||
symbols = symbols.filter(function (sym) { | ||
return Object.getOwnPropertyDescriptor(object, sym).enumerable; | ||
}); | ||
} | ||
function _slicedToArray(arr, i) { | ||
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); | ||
} | ||
keys.push.apply(keys, symbols); | ||
} | ||
function _arrayWithHoles(arr) { | ||
if (Array.isArray(arr)) return arr; | ||
} | ||
return keys; | ||
} | ||
function _iterableToArrayLimit(arr, i) { | ||
var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); | ||
function _objectSpread2(target) { | ||
for (var i = 1; i < arguments.length; i++) { | ||
var source = arguments[i] != null ? arguments[i] : {}; | ||
if (_i == null) return; | ||
var _arr = []; | ||
var _n = true; | ||
var _d = false; | ||
if (i % 2) { | ||
ownKeys(Object(source), true).forEach(function (key) { | ||
_defineProperty(target, key, source[key]); | ||
}); | ||
} else if (Object.getOwnPropertyDescriptors) { | ||
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); | ||
} else { | ||
ownKeys(Object(source)).forEach(function (key) { | ||
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); | ||
}); | ||
} | ||
} | ||
var _s, _e; | ||
return target; | ||
} | ||
try { | ||
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { | ||
_arr.push(_s.value); | ||
function _typeof(obj) { | ||
"@babel/helpers - typeof"; | ||
if (i && _arr.length === i) break; | ||
} | ||
} catch (err) { | ||
_d = true; | ||
_e = err; | ||
} finally { | ||
try { | ||
if (!_n && _i["return"] != null) _i["return"](); | ||
} finally { | ||
if (_d) throw _e; | ||
} | ||
} | ||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { | ||
_typeof = function (obj) { | ||
return typeof obj; | ||
}; | ||
} else { | ||
_typeof = function (obj) { | ||
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; | ||
}; | ||
} | ||
return _arr; | ||
} | ||
return _typeof(obj); | ||
} | ||
function _unsupportedIterableToArray(o, minLen) { | ||
if (!o) return; | ||
if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
var n = Object.prototype.toString.call(o).slice(8, -1); | ||
if (n === "Object" && o.constructor) n = o.constructor.name; | ||
if (n === "Map" || n === "Set") return Array.from(o); | ||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
} | ||
function _defineProperty(obj, key, value) { | ||
if (key in obj) { | ||
Object.defineProperty(obj, key, { | ||
value: value, | ||
enumerable: true, | ||
configurable: true, | ||
writable: true | ||
}); | ||
} else { | ||
obj[key] = value; | ||
} | ||
function _arrayLikeToArray(arr, len) { | ||
if (len == null || len > arr.length) len = arr.length; | ||
return obj; | ||
} | ||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
function _slicedToArray(arr, i) { | ||
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); | ||
} | ||
return arr2; | ||
} | ||
function _arrayWithHoles(arr) { | ||
if (Array.isArray(arr)) return arr; | ||
} | ||
function _nonIterableRest() { | ||
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 _iterableToArrayLimit(arr, i) { | ||
var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]); | ||
function createCommonjsModule(fn, module) { | ||
return module = { exports: {} }, fn(module, module.exports), module.exports; | ||
} | ||
if (_i == null) return; | ||
var _arr = []; | ||
var _n = true; | ||
var _d = false; | ||
/** | ||
* Copyright (c) 2013-present, Facebook, Inc. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
var _s, _e; | ||
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED'; | ||
var ReactPropTypesSecret_1 = ReactPropTypesSecret; | ||
try { | ||
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { | ||
_arr.push(_s.value); | ||
function emptyFunction() {} | ||
if (i && _arr.length === i) break; | ||
} | ||
} catch (err) { | ||
_d = true; | ||
_e = err; | ||
} finally { | ||
try { | ||
if (!_n && _i["return"] != null) _i["return"](); | ||
} finally { | ||
if (_d) throw _e; | ||
} | ||
} | ||
function emptyFunctionWithReset() {} | ||
return _arr; | ||
} | ||
emptyFunctionWithReset.resetWarningCache = emptyFunction; | ||
function _unsupportedIterableToArray(o, minLen) { | ||
if (!o) return; | ||
if (typeof o === "string") return _arrayLikeToArray(o, minLen); | ||
var n = Object.prototype.toString.call(o).slice(8, -1); | ||
if (n === "Object" && o.constructor) n = o.constructor.name; | ||
if (n === "Map" || n === "Set") return Array.from(o); | ||
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); | ||
} | ||
var factoryWithThrowingShims = function () { | ||
function shim(props, propName, componentName, location, propFullName, secret) { | ||
if (secret === ReactPropTypesSecret_1) { | ||
// It is still safe when called from React. | ||
return; | ||
} | ||
function _arrayLikeToArray(arr, len) { | ||
if (len == null || len > arr.length) len = arr.length; | ||
var err = 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'); | ||
err.name = 'Invariant Violation'; | ||
throw err; | ||
} | ||
shim.isRequired = shim; | ||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; | ||
function getShim() { | ||
return shim; | ||
} | ||
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`. | ||
return arr2; | ||
} | ||
var ReactPropTypes = { | ||
array: shim, | ||
bool: shim, | ||
func: shim, | ||
number: shim, | ||
object: shim, | ||
string: shim, | ||
symbol: shim, | ||
any: shim, | ||
arrayOf: getShim, | ||
element: shim, | ||
elementType: shim, | ||
instanceOf: getShim, | ||
node: shim, | ||
objectOf: getShim, | ||
oneOf: getShim, | ||
oneOfType: getShim, | ||
shape: getShim, | ||
exact: getShim, | ||
checkPropTypes: emptyFunctionWithReset, | ||
resetWarningCache: emptyFunction | ||
}; | ||
ReactPropTypes.PropTypes = ReactPropTypes; | ||
return ReactPropTypes; | ||
}; | ||
function _nonIterableRest() { | ||
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); | ||
} | ||
var propTypes = createCommonjsModule(function (module) { | ||
/** | ||
* Copyright (c) 2013-present, Facebook, Inc. | ||
* | ||
* This source code is licensed under the MIT license found in the | ||
* LICENSE file in the root directory of this source tree. | ||
*/ | ||
{ | ||
// By explicitly using `prop-types` you are opting into new production behavior. | ||
// http://fb.me/prop-types-in-prod | ||
module.exports = factoryWithThrowingShims(); | ||
} | ||
}); | ||
var usePrevious = function usePrevious(value) { | ||
var ref = React.useRef(value); | ||
React.useEffect(function () { | ||
ref.current = value; | ||
}, [value]); | ||
return ref.current; | ||
}; | ||
var usePrevious = function usePrevious(value) { | ||
var ref = React.useRef(value); | ||
React.useEffect(function () { | ||
ref.current = value; | ||
}, [value]); | ||
return ref.current; | ||
}; | ||
var isUnknownObject = function isUnknownObject(raw) { | ||
return raw !== null && _typeof(raw) === 'object'; | ||
}; | ||
var isPromise = function isPromise(raw) { | ||
return isUnknownObject(raw) && typeof raw.then === 'function'; | ||
}; // We are using types to enforce the `stripe` prop in this lib, | ||
// but in an untyped integration `stripe` could be anything, so we need | ||
// to do some sanity validation to prevent type errors. | ||
var isUnknownObject = function isUnknownObject(raw) { | ||
return raw !== null && _typeof(raw) === 'object'; | ||
}; | ||
var isPromise = function isPromise(raw) { | ||
return isUnknownObject(raw) && typeof raw.then === 'function'; | ||
}; // We are using types to enforce the `stripe` prop in this lib, | ||
// but in an untyped integration `stripe` could be anything, so we need | ||
// to do some sanity validation to prevent type errors. | ||
var isStripe = function isStripe(raw) { | ||
return isUnknownObject(raw) && typeof raw.elements === 'function' && typeof raw.createToken === 'function' && typeof raw.createPaymentMethod === 'function' && typeof raw.confirmCardPayment === 'function'; | ||
}; | ||
var isStripe = function isStripe(raw) { | ||
return isUnknownObject(raw) && typeof raw.elements === 'function' && typeof raw.createToken === 'function' && typeof raw.createPaymentMethod === 'function' && typeof raw.confirmCardPayment === 'function'; | ||
}; | ||
var PLAIN_OBJECT_STR = '[object Object]'; | ||
var isEqual = function isEqual(left, right) { | ||
if (!isUnknownObject(left) || !isUnknownObject(right)) { | ||
return left === right; | ||
} | ||
var PLAIN_OBJECT_STR = '[object Object]'; | ||
var isEqual = function isEqual(left, right) { | ||
if (!isUnknownObject(left) || !isUnknownObject(right)) { | ||
return left === right; | ||
} | ||
var leftArray = Array.isArray(left); | ||
var rightArray = Array.isArray(right); | ||
if (leftArray !== rightArray) return false; | ||
var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR; | ||
var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR; | ||
if (leftPlainObject !== rightPlainObject) return false; // not sure what sort of special object this is (regexp is one option), so | ||
// fallback to reference check. | ||
var leftArray = Array.isArray(left); | ||
var rightArray = Array.isArray(right); | ||
if (leftArray !== rightArray) return false; | ||
var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR; | ||
var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR; | ||
if (leftPlainObject !== rightPlainObject) return false; // not sure what sort of special object this is (regexp is one option), so | ||
// fallback to reference check. | ||
if (!leftPlainObject && !leftArray) return left === right; | ||
var leftKeys = Object.keys(left); | ||
var rightKeys = Object.keys(right); | ||
if (leftKeys.length !== rightKeys.length) return false; | ||
var keySet = {}; | ||
if (!leftPlainObject && !leftArray) return left === right; | ||
var leftKeys = Object.keys(left); | ||
var rightKeys = Object.keys(right); | ||
if (leftKeys.length !== rightKeys.length) return false; | ||
var keySet = {}; | ||
for (var i = 0; i < leftKeys.length; i += 1) { | ||
keySet[leftKeys[i]] = true; | ||
} | ||
for (var i = 0; i < leftKeys.length; i += 1) { | ||
keySet[leftKeys[i]] = true; | ||
} | ||
for (var _i = 0; _i < rightKeys.length; _i += 1) { | ||
keySet[rightKeys[_i]] = true; | ||
} | ||
for (var _i = 0; _i < rightKeys.length; _i += 1) { | ||
keySet[rightKeys[_i]] = true; | ||
} | ||
var allKeys = Object.keys(keySet); | ||
var allKeys = Object.keys(keySet); | ||
if (allKeys.length !== leftKeys.length) { | ||
return false; | ||
} | ||
if (allKeys.length !== leftKeys.length) { | ||
return false; | ||
} | ||
var l = left; | ||
var r = right; | ||
var l = left; | ||
var r = right; | ||
var pred = function pred(key) { | ||
return isEqual(l[key], r[key]); | ||
}; | ||
var pred = function pred(key) { | ||
return isEqual(l[key], r[key]); | ||
}; | ||
return allKeys.every(pred); | ||
}; | ||
return allKeys.every(pred); | ||
}; | ||
var extractAllowedOptionsUpdates = function extractAllowedOptionsUpdates(options, prevOptions, immutableKeys) { | ||
if (!isUnknownObject(options)) { | ||
return null; | ||
} | ||
var extractAllowedOptionsUpdates = function extractAllowedOptionsUpdates(options, prevOptions, immutableKeys) { | ||
if (!isUnknownObject(options)) { | ||
return null; | ||
} | ||
return Object.keys(options).reduce(function (newOptions, key) { | ||
var isUpdated = !isUnknownObject(prevOptions) || !isEqual(options[key], prevOptions[key]); | ||
return Object.keys(options).reduce(function (newOptions, key) { | ||
var isUpdated = !isUnknownObject(prevOptions) || !isEqual(options[key], prevOptions[key]); | ||
if (immutableKeys.includes(key)) { | ||
if (isUpdated) { | ||
console.warn("Unsupported prop change: options.".concat(key, " is not a mutable property.")); | ||
} | ||
if (immutableKeys.includes(key)) { | ||
if (isUpdated) { | ||
console.warn("Unsupported prop change: options.".concat(key, " is not a mutable property.")); | ||
} | ||
return newOptions; | ||
} | ||
return newOptions; | ||
} | ||
if (!isUpdated) { | ||
return newOptions; | ||
} | ||
if (!isUpdated) { | ||
return newOptions; | ||
} | ||
return _objectSpread2(_objectSpread2({}, newOptions || {}), {}, _defineProperty({}, key, options[key])); | ||
}, null); | ||
}; | ||
return _objectSpread2(_objectSpread2({}, newOptions || {}), {}, _defineProperty({}, key, options[key])); | ||
}, null); | ||
}; | ||
var INVALID_STRIPE_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.'; // We are using types to enforce the `stripe` prop in this lib, but in a real | ||
// integration `stripe` could be anything, so we need to do some sanity | ||
// validation to prevent type errors. | ||
var INVALID_STRIPE_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.'; // We are using types to enforce the `stripe` prop in this lib, but in a real | ||
// integration `stripe` could be anything, so we need to do some sanity | ||
// validation to prevent type errors. | ||
var validateStripe = function validateStripe(maybeStripe) { | ||
if (maybeStripe === null || isStripe(maybeStripe)) { | ||
return maybeStripe; | ||
} | ||
var validateStripe = function validateStripe(maybeStripe) { | ||
if (maybeStripe === null || isStripe(maybeStripe)) { | ||
return maybeStripe; | ||
} | ||
throw new Error(INVALID_STRIPE_ERROR); | ||
}; | ||
throw new Error(INVALID_STRIPE_ERROR); | ||
}; | ||
var parseStripeProp = function parseStripeProp(raw) { | ||
if (isPromise(raw)) { | ||
return { | ||
tag: 'async', | ||
stripePromise: Promise.resolve(raw).then(validateStripe) | ||
}; | ||
} | ||
var parseStripeProp = function parseStripeProp(raw) { | ||
if (isPromise(raw)) { | ||
return { | ||
tag: 'async', | ||
stripePromise: Promise.resolve(raw).then(validateStripe) | ||
}; | ||
} | ||
var stripe = validateStripe(raw); | ||
var stripe = validateStripe(raw); | ||
if (stripe === null) { | ||
return { | ||
tag: 'empty' | ||
}; | ||
} | ||
if (stripe === null) { | ||
return { | ||
tag: 'empty' | ||
}; | ||
} | ||
return { | ||
tag: 'sync', | ||
stripe: stripe | ||
}; | ||
}; | ||
return { | ||
tag: 'sync', | ||
stripe: stripe | ||
}; | ||
}; | ||
var ElementsContext = /*#__PURE__*/React.createContext(null); | ||
ElementsContext.displayName = 'ElementsContext'; | ||
var parseElementsContext = function parseElementsContext(ctx, useCase) { | ||
if (!ctx) { | ||
throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider.")); | ||
} | ||
var ElementsContext = /*#__PURE__*/React.createContext(null); | ||
ElementsContext.displayName = 'ElementsContext'; | ||
var parseElementsContext = function parseElementsContext(ctx, useCase) { | ||
if (!ctx) { | ||
throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider.")); | ||
} | ||
return ctx; | ||
}; | ||
var CartElementContext = /*#__PURE__*/React.createContext(null); | ||
CartElementContext.displayName = 'CartElementContext'; | ||
var parseCartElementContext = function parseCartElementContext(ctx, useCase) { | ||
if (!ctx) { | ||
throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider.")); | ||
} | ||
return ctx; | ||
}; | ||
var CartElementContext = /*#__PURE__*/React.createContext(null); | ||
CartElementContext.displayName = 'CartElementContext'; | ||
var parseCartElementContext = function parseCartElementContext(ctx, useCase) { | ||
if (!ctx) { | ||
throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider.")); | ||
} | ||
return ctx; | ||
}; | ||
/** | ||
* The `Elements` provider allows you to use [Element components](https://stripe.com/docs/stripe-js/react#element-components) and access the [Stripe object](https://stripe.com/docs/js/initializing) in any nested component. | ||
* Render an `Elements` provider at the root of your React app so that it is available everywhere you need it. | ||
* | ||
* To use the `Elements` provider, call `loadStripe` from `@stripe/stripe-js` with your publishable key. | ||
* The `loadStripe` function will asynchronously load the Stripe.js script and initialize a `Stripe` object. | ||
* Pass the returned `Promise` to `Elements`. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#elements-provider | ||
*/ | ||
return ctx; | ||
}; | ||
/** | ||
* The `Elements` provider allows you to use [Element components](https://stripe.com/docs/stripe-js/react#element-components) and access the [Stripe object](https://stripe.com/docs/js/initializing) in any nested component. | ||
* Render an `Elements` provider at the root of your React app so that it is available everywhere you need it. | ||
* | ||
* To use the `Elements` provider, call `loadStripe` from `@stripe/stripe-js` with your publishable key. | ||
* The `loadStripe` function will asynchronously load the Stripe.js script and initialize a `Stripe` object. | ||
* Pass the returned `Promise` to `Elements`. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#elements-provider | ||
*/ | ||
var Elements = function Elements(_ref) { | ||
var rawStripeProp = _ref.stripe, | ||
options = _ref.options, | ||
children = _ref.children; | ||
var parsed = React.useMemo(function () { | ||
return parseStripeProp(rawStripeProp); | ||
}, [rawStripeProp]); | ||
var Elements = function Elements(_ref) { | ||
var rawStripeProp = _ref.stripe, | ||
options = _ref.options, | ||
children = _ref.children; | ||
var parsed = React.useMemo(function () { | ||
return parseStripeProp(rawStripeProp); | ||
}, [rawStripeProp]); | ||
var _React$useState = React.useState(null), | ||
_React$useState2 = _slicedToArray(_React$useState, 2), | ||
cart = _React$useState2[0], | ||
setCart = _React$useState2[1]; | ||
var _React$useState = React.useState(null), | ||
_React$useState2 = _slicedToArray(_React$useState, 2), | ||
cart = _React$useState2[0], | ||
setCart = _React$useState2[1]; | ||
var _React$useState3 = React.useState(null), | ||
_React$useState4 = _slicedToArray(_React$useState3, 2), | ||
cartState = _React$useState4[0], | ||
setCartState = _React$useState4[1]; // For a sync stripe instance, initialize into context | ||
var _React$useState3 = React.useState(null), | ||
_React$useState4 = _slicedToArray(_React$useState3, 2), | ||
cartState = _React$useState4[0], | ||
setCartState = _React$useState4[1]; // For a sync stripe instance, initialize into context | ||
var _React$useState5 = React.useState(function () { | ||
return { | ||
stripe: parsed.tag === 'sync' ? parsed.stripe : null, | ||
elements: parsed.tag === 'sync' ? parsed.stripe.elements(options) : null | ||
}; | ||
}), | ||
_React$useState6 = _slicedToArray(_React$useState5, 2), | ||
ctx = _React$useState6[0], | ||
setContext = _React$useState6[1]; | ||
var _React$useState5 = React.useState(function () { | ||
return { | ||
stripe: parsed.tag === 'sync' ? parsed.stripe : null, | ||
elements: parsed.tag === 'sync' ? parsed.stripe.elements(options) : null | ||
}; | ||
}), | ||
_React$useState6 = _slicedToArray(_React$useState5, 2), | ||
ctx = _React$useState6[0], | ||
setContext = _React$useState6[1]; | ||
React.useEffect(function () { | ||
var isMounted = true; | ||
React.useEffect(function () { | ||
var isMounted = true; | ||
var safeSetContext = function safeSetContext(stripe) { | ||
setContext(function (ctx) { | ||
// no-op if we already have a stripe instance (https://github.com/stripe/react-stripe-js/issues/296) | ||
if (ctx.stripe) return ctx; | ||
return { | ||
stripe: stripe, | ||
elements: stripe.elements(options) | ||
}; | ||
}); | ||
}; // For an async stripePromise, store it in context once resolved | ||
var safeSetContext = function safeSetContext(stripe) { | ||
setContext(function (ctx) { | ||
// no-op if we already have a stripe instance (https://github.com/stripe/react-stripe-js/issues/296) | ||
if (ctx.stripe) return ctx; | ||
return { | ||
stripe: stripe, | ||
elements: stripe.elements(options) | ||
}; | ||
}); | ||
}; // For an async stripePromise, store it in context once resolved | ||
if (parsed.tag === 'async' && !ctx.stripe) { | ||
parsed.stripePromise.then(function (stripe) { | ||
if (stripe && isMounted) { | ||
// Only update Elements context if the component is still mounted | ||
// and stripe is not null. We allow stripe to be null to make | ||
// handling SSR easier. | ||
safeSetContext(stripe); | ||
} | ||
}); | ||
} else if (parsed.tag === 'sync' && !ctx.stripe) { | ||
// Or, handle a sync stripe instance going from null -> populated | ||
safeSetContext(parsed.stripe); | ||
} | ||
if (parsed.tag === 'async' && !ctx.stripe) { | ||
parsed.stripePromise.then(function (stripe) { | ||
if (stripe && isMounted) { | ||
// Only update Elements context if the component is still mounted | ||
// and stripe is not null. We allow stripe to be null to make | ||
// handling SSR easier. | ||
safeSetContext(stripe); | ||
} | ||
}); | ||
} else if (parsed.tag === 'sync' && !ctx.stripe) { | ||
// Or, handle a sync stripe instance going from null -> populated | ||
safeSetContext(parsed.stripe); | ||
} | ||
return function () { | ||
isMounted = false; | ||
}; | ||
}, [parsed, ctx, options]); // Warn on changes to stripe prop | ||
return function () { | ||
isMounted = false; | ||
}; | ||
}, [parsed, ctx, options]); // Warn on changes to stripe prop | ||
var prevStripe = usePrevious(rawStripeProp); | ||
React.useEffect(function () { | ||
if (prevStripe !== null && prevStripe !== rawStripeProp) { | ||
console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.'); | ||
} | ||
}, [prevStripe, rawStripeProp]); // Apply updates to elements when options prop has relevant changes | ||
var prevStripe = usePrevious(rawStripeProp); | ||
React.useEffect(function () { | ||
if (prevStripe !== null && prevStripe !== rawStripeProp) { | ||
console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.'); | ||
} | ||
}, [prevStripe, rawStripeProp]); // Apply updates to elements when options prop has relevant changes | ||
var prevOptions = usePrevious(options); | ||
React.useEffect(function () { | ||
if (!ctx.elements) { | ||
return; | ||
} | ||
var prevOptions = usePrevious(options); | ||
React.useEffect(function () { | ||
if (!ctx.elements) { | ||
return; | ||
} | ||
var updates = extractAllowedOptionsUpdates(options, prevOptions, ['clientSecret', 'fonts']); | ||
var updates = extractAllowedOptionsUpdates(options, prevOptions, ['clientSecret', 'fonts']); | ||
if (updates) { | ||
ctx.elements.update(updates); | ||
} | ||
}, [options, prevOptions, ctx.elements]); // Attach react-stripe-js version to stripe.js instance | ||
if (updates) { | ||
ctx.elements.update(updates); | ||
} | ||
}, [options, prevOptions, ctx.elements]); // Attach react-stripe-js version to stripe.js instance | ||
React.useEffect(function () { | ||
var anyStripe = ctx.stripe; | ||
React.useEffect(function () { | ||
var anyStripe = ctx.stripe; | ||
if (!anyStripe || !anyStripe._registerWrapper || !anyStripe.registerAppInfo) { | ||
return; | ||
} | ||
if (!anyStripe || !anyStripe._registerWrapper || !anyStripe.registerAppInfo) { | ||
return; | ||
} | ||
anyStripe._registerWrapper({ | ||
name: 'react-stripe-js', | ||
version: "1.16.2" | ||
}); | ||
anyStripe._registerWrapper({ | ||
name: 'react-stripe-js', | ||
version: "1.16.3" | ||
}); | ||
anyStripe.registerAppInfo({ | ||
name: 'react-stripe-js', | ||
version: "1.16.2", | ||
url: 'https://stripe.com/docs/stripe-js/react' | ||
}); | ||
}, [ctx.stripe]); | ||
return /*#__PURE__*/React.createElement(ElementsContext.Provider, { | ||
value: ctx | ||
}, /*#__PURE__*/React.createElement(CartElementContext.Provider, { | ||
value: { | ||
cart: cart, | ||
setCart: setCart, | ||
cartState: cartState, | ||
setCartState: setCartState | ||
} | ||
}, children)); | ||
}; | ||
Elements.propTypes = { | ||
stripe: propTypes.any, | ||
options: propTypes.object | ||
}; | ||
var useElementsContextWithUseCase = function useElementsContextWithUseCase(useCaseMessage) { | ||
var ctx = React.useContext(ElementsContext); | ||
return parseElementsContext(ctx, useCaseMessage); | ||
}; | ||
var useCartElementContextWithUseCase = function useCartElementContextWithUseCase(useCaseMessage) { | ||
var ctx = React.useContext(CartElementContext); | ||
return parseCartElementContext(ctx, useCaseMessage); | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#useelements-hook | ||
*/ | ||
anyStripe.registerAppInfo({ | ||
name: 'react-stripe-js', | ||
version: "1.16.3", | ||
url: 'https://stripe.com/docs/stripe-js/react' | ||
}); | ||
}, [ctx.stripe]); | ||
return /*#__PURE__*/React.createElement(ElementsContext.Provider, { | ||
value: ctx | ||
}, /*#__PURE__*/React.createElement(CartElementContext.Provider, { | ||
value: { | ||
cart: cart, | ||
setCart: setCart, | ||
cartState: cartState, | ||
setCartState: setCartState | ||
} | ||
}, children)); | ||
}; | ||
Elements.propTypes = { | ||
stripe: propTypes.any, | ||
options: propTypes.object | ||
}; | ||
var useElementsContextWithUseCase = function useElementsContextWithUseCase(useCaseMessage) { | ||
var ctx = React.useContext(ElementsContext); | ||
return parseElementsContext(ctx, useCaseMessage); | ||
}; | ||
var useCartElementContextWithUseCase = function useCartElementContextWithUseCase(useCaseMessage) { | ||
var ctx = React.useContext(CartElementContext); | ||
return parseCartElementContext(ctx, useCaseMessage); | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#useelements-hook | ||
*/ | ||
var useElements = function useElements() { | ||
var _useElementsContextWi = useElementsContextWithUseCase('calls useElements()'), | ||
elements = _useElementsContextWi.elements; | ||
var useElements = function useElements() { | ||
var _useElementsContextWi = useElementsContextWithUseCase('calls useElements()'), | ||
elements = _useElementsContextWi.elements; | ||
return elements; | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#usestripe-hook | ||
*/ | ||
return elements; | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#usestripe-hook | ||
*/ | ||
var useStripe = function useStripe() { | ||
var _useElementsContextWi2 = useElementsContextWithUseCase('calls useStripe()'), | ||
stripe = _useElementsContextWi2.stripe; | ||
var useStripe = function useStripe() { | ||
var _useElementsContextWi2 = useElementsContextWithUseCase('calls useStripe()'), | ||
stripe = _useElementsContextWi2.stripe; | ||
return stripe; | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/payments/checkout/cart-element | ||
*/ | ||
return stripe; | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/payments/checkout/cart-element | ||
*/ | ||
var useCartElement = function useCartElement() { | ||
var _useCartElementContex = useCartElementContextWithUseCase('calls useCartElement()'), | ||
cart = _useCartElementContex.cart; | ||
var useCartElement = function useCartElement() { | ||
var _useCartElementContex = useCartElementContextWithUseCase('calls useCartElement()'), | ||
cart = _useCartElementContex.cart; | ||
return cart; | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/payments/checkout/cart-element | ||
*/ | ||
return cart; | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/payments/checkout/cart-element | ||
*/ | ||
var useCartElementState = function useCartElementState() { | ||
var _useCartElementContex2 = useCartElementContextWithUseCase('calls useCartElementState()'), | ||
cartState = _useCartElementContex2.cartState; | ||
var useCartElementState = function useCartElementState() { | ||
var _useCartElementContex2 = useCartElementContextWithUseCase('calls useCartElementState()'), | ||
cartState = _useCartElementContex2.cartState; | ||
return cartState; | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#elements-consumer | ||
*/ | ||
return cartState; | ||
}; | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#elements-consumer | ||
*/ | ||
var ElementsConsumer = function ElementsConsumer(_ref2) { | ||
var children = _ref2.children; | ||
var ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>'); // Assert to satisfy the busted React.FC return type (it should be ReactNode) | ||
var ElementsConsumer = function ElementsConsumer(_ref2) { | ||
var children = _ref2.children; | ||
var ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>'); // Assert to satisfy the busted React.FC return type (it should be ReactNode) | ||
return children(ctx); | ||
}; | ||
ElementsConsumer.propTypes = { | ||
children: propTypes.func.isRequired | ||
}; | ||
return children(ctx); | ||
}; | ||
ElementsConsumer.propTypes = { | ||
children: propTypes.func.isRequired | ||
}; | ||
var useCallbackReference = function useCallbackReference(cb) { | ||
var ref = React.useRef(cb); | ||
React.useEffect(function () { | ||
ref.current = cb; | ||
}, [cb]); | ||
return function () { | ||
if (ref.current) { | ||
ref.current.apply(ref, arguments); | ||
} | ||
}; | ||
}; | ||
var useAttachEvent = function useAttachEvent(element, event, cb) { | ||
var cbDefined = !!cb; | ||
var cbRef = React.useRef(cb); // In many integrations the callback prop changes on each render. | ||
// Using a ref saves us from calling element.on/.off every render. | ||
var noop = function noop() {}; | ||
React.useEffect(function () { | ||
cbRef.current = cb; | ||
}, [cb]); | ||
React.useEffect(function () { | ||
if (!cbDefined || !element) { | ||
return function () {}; | ||
} | ||
var capitalized = function capitalized(str) { | ||
return str.charAt(0).toUpperCase() + str.slice(1); | ||
}; | ||
var decoratedCb = function decoratedCb() { | ||
if (cbRef.current) { | ||
cbRef.current.apply(cbRef, arguments); | ||
} | ||
}; | ||
var createElementComponent = function createElementComponent(type, isServer) { | ||
var displayName = "".concat(capitalized(type), "Element"); | ||
element.on(event, decoratedCb); | ||
return function () { | ||
element.off(event, decoratedCb); | ||
}; | ||
}, [cbDefined, event, element, cbRef]); | ||
}; | ||
var ClientElement = function ClientElement(_ref) { | ||
var id = _ref.id, | ||
className = _ref.className, | ||
_ref$options = _ref.options, | ||
options = _ref$options === void 0 ? {} : _ref$options, | ||
_ref$onBlur = _ref.onBlur, | ||
onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur, | ||
_ref$onFocus = _ref.onFocus, | ||
onFocus = _ref$onFocus === void 0 ? noop : _ref$onFocus, | ||
_ref$onReady = _ref.onReady, | ||
onReady = _ref$onReady === void 0 ? noop : _ref$onReady, | ||
_ref$onChange = _ref.onChange, | ||
onChange = _ref$onChange === void 0 ? noop : _ref$onChange, | ||
_ref$onEscape = _ref.onEscape, | ||
onEscape = _ref$onEscape === void 0 ? noop : _ref$onEscape, | ||
_ref$onClick = _ref.onClick, | ||
onClick = _ref$onClick === void 0 ? noop : _ref$onClick, | ||
_ref$onLoadError = _ref.onLoadError, | ||
onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError, | ||
_ref$onLoaderStart = _ref.onLoaderStart, | ||
onLoaderStart = _ref$onLoaderStart === void 0 ? noop : _ref$onLoaderStart, | ||
_ref$onNetworksChange = _ref.onNetworksChange, | ||
onNetworksChange = _ref$onNetworksChange === void 0 ? noop : _ref$onNetworksChange, | ||
_ref$onCheckout = _ref.onCheckout, | ||
onCheckout = _ref$onCheckout === void 0 ? noop : _ref$onCheckout, | ||
_ref$onLineItemClick = _ref.onLineItemClick, | ||
onLineItemClick = _ref$onLineItemClick === void 0 ? noop : _ref$onLineItemClick, | ||
_ref$onConfirm = _ref.onConfirm, | ||
onConfirm = _ref$onConfirm === void 0 ? noop : _ref$onConfirm, | ||
_ref$onCancel = _ref.onCancel, | ||
onCancel = _ref$onCancel === void 0 ? noop : _ref$onCancel, | ||
_ref$onShippingAddres = _ref.onShippingAddressChange, | ||
onShippingAddressChange = _ref$onShippingAddres === void 0 ? noop : _ref$onShippingAddres, | ||
_ref$onShippingRateCh = _ref.onShippingRateChange, | ||
onShippingRateChange = _ref$onShippingRateCh === void 0 ? noop : _ref$onShippingRateCh; | ||
var capitalized = function capitalized(str) { | ||
return str.charAt(0).toUpperCase() + str.slice(1); | ||
}; | ||
var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")), | ||
elements = _useElementsContextWi.elements; | ||
var createElementComponent = function createElementComponent(type, isServer) { | ||
var displayName = "".concat(capitalized(type), "Element"); | ||
var elementRef = React.useRef(null); | ||
var domNode = React.useRef(null); | ||
var ClientElement = function ClientElement(_ref) { | ||
var id = _ref.id, | ||
className = _ref.className, | ||
_ref$options = _ref.options, | ||
options = _ref$options === void 0 ? {} : _ref$options, | ||
onBlur = _ref.onBlur, | ||
onFocus = _ref.onFocus, | ||
onReady = _ref.onReady, | ||
onChange = _ref.onChange, | ||
onEscape = _ref.onEscape, | ||
onClick = _ref.onClick, | ||
onLoadError = _ref.onLoadError, | ||
onLoaderStart = _ref.onLoaderStart, | ||
onNetworksChange = _ref.onNetworksChange, | ||
onCheckout = _ref.onCheckout, | ||
onLineItemClick = _ref.onLineItemClick, | ||
onConfirm = _ref.onConfirm, | ||
onCancel = _ref.onCancel, | ||
onShippingAddressChange = _ref.onShippingAddressChange, | ||
onShippingRateChange = _ref.onShippingRateChange; | ||
var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">")), | ||
setCart = _useCartElementContex.setCart, | ||
setCartState = _useCartElementContex.setCartState; | ||
var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")), | ||
elements = _useElementsContextWi.elements; | ||
var callOnReady = useCallbackReference(onReady); | ||
var callOnBlur = useCallbackReference(onBlur); | ||
var callOnFocus = useCallbackReference(onFocus); | ||
var callOnClick = useCallbackReference(onClick); | ||
var callOnChange = useCallbackReference(onChange); | ||
var callOnEscape = useCallbackReference(onEscape); | ||
var callOnLoadError = useCallbackReference(onLoadError); | ||
var callOnLoaderStart = useCallbackReference(onLoaderStart); | ||
var callOnNetworksChange = useCallbackReference(onNetworksChange); | ||
var callOnCheckout = useCallbackReference(onCheckout); | ||
var callOnLineItemClick = useCallbackReference(onLineItemClick); | ||
var callOnConfirm = useCallbackReference(onConfirm); | ||
var callOnCancel = useCallbackReference(onCancel); | ||
var callOnShippingAddressChange = useCallbackReference(onShippingAddressChange); | ||
var callOnShippingRateChange = useCallbackReference(onShippingRateChange); | ||
React.useLayoutEffect(function () { | ||
if (elementRef.current == null && elements && domNode.current != null) { | ||
var element = elements.create(type, options); | ||
var _React$useState = React.useState(null), | ||
_React$useState2 = _slicedToArray(_React$useState, 2), | ||
element = _React$useState2[0], | ||
setElement = _React$useState2[1]; | ||
if (type === 'cart' && setCart) { | ||
// we know that elements.create return value must be of type StripeCartElement if type is 'cart', | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCart(element); | ||
} | ||
var domNode = React.useRef(null); | ||
elementRef.current = element; | ||
element.mount(domNode.current); | ||
element.on('ready', function (event) { | ||
if (type === 'cart') { | ||
// we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart' | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
if (setCartState) { | ||
setCartState(event); | ||
} // the cart ready event returns a CartStatePayload instead of the CartElement | ||
var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">")), | ||
setCart = _useCartElementContex.setCart, | ||
setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on | ||
// with that callback. If the merchant ever changes the callback, removes | ||
// the old callback with element.off and then call element.on with the new one. | ||
callOnReady(event); | ||
} else if (type === 'payButton') { | ||
callOnReady(event); | ||
} else { | ||
callOnReady(element); | ||
} | ||
}); | ||
element.on('change', function (event) { | ||
if (type === 'cart' && setCartState) { | ||
// we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart' | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCartState(event); | ||
} | ||
useAttachEvent(element, 'blur', onBlur); | ||
useAttachEvent(element, 'focus', onFocus); | ||
useAttachEvent(element, 'escape', onEscape); | ||
useAttachEvent(element, 'click', onClick); | ||
useAttachEvent(element, 'loaderror', onLoadError); | ||
useAttachEvent(element, 'loaderstart', onLoaderStart); | ||
useAttachEvent(element, 'networkschange', onNetworksChange); | ||
useAttachEvent(element, 'lineitemclick', onLineItemClick); | ||
useAttachEvent(element, 'confirm', onConfirm); | ||
useAttachEvent(element, 'cancel', onCancel); | ||
useAttachEvent(element, 'shippingaddresschange', onShippingAddressChange); | ||
useAttachEvent(element, 'shippingratechange', onShippingRateChange); | ||
var readyCallback; | ||
callOnChange(event); | ||
}); // Users can pass an onBlur prop on any Element component | ||
// just as they could listen for the `blur` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
if (type === 'cart') { | ||
readyCallback = function readyCallback(event) { | ||
setCartState(event); | ||
onReady && onReady(event); | ||
}; | ||
} else if (onReady) { | ||
if (type === 'payButton') { | ||
// Passes through the event, which includes visible PM types | ||
readyCallback = onReady; | ||
} else { | ||
// For other Elements, pass through the Element itself. | ||
readyCallback = function readyCallback() { | ||
onReady(element); | ||
}; | ||
} | ||
} | ||
element.on('blur', callOnBlur); // Users can pass an onFocus prop on any Element component | ||
// just as they could listen for the `focus` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
useAttachEvent(element, 'ready', readyCallback); | ||
var changeCallback = type === 'cart' ? function (event) { | ||
setCartState(event); | ||
onChange && onChange(event); | ||
} : onChange; | ||
useAttachEvent(element, 'change', changeCallback); | ||
var checkoutCallback = type === 'cart' ? function (event) { | ||
setCartState(event); | ||
onCheckout && onCheckout(event); | ||
} : onCheckout; | ||
useAttachEvent(element, 'checkout', checkoutCallback); | ||
React.useLayoutEffect(function () { | ||
if (element === null && elements && domNode.current !== null) { | ||
var newElement = elements.create(type, options); | ||
element.on('focus', callOnFocus); // Users can pass an onEscape prop on any Element component | ||
// just as they could listen for the `escape` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
if (type === 'cart' && setCart) { | ||
// we know that elements.create return value must be of type StripeCartElement if type is 'cart', | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCart(newElement); | ||
} | ||
element.on('escape', callOnEscape); // Users can pass an onLoadError prop on any Element component | ||
// just as they could listen for the `loaderror` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
setElement(newElement); | ||
newElement.mount(domNode.current); | ||
} | ||
}, [element, elements, options, setCart]); | ||
var prevOptions = usePrevious(options); | ||
React.useEffect(function () { | ||
if (!element) { | ||
return; | ||
} | ||
element.on('loaderror', callOnLoadError); // Users can pass an onLoaderStart prop on any Element component | ||
// just as they could listen for the `loaderstart` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
var updates = extractAllowedOptionsUpdates(options, prevOptions, ['paymentRequest']); | ||
element.on('loaderstart', callOnLoaderStart); // Users can pass an onNetworksChange prop on any Element component | ||
// just as they could listen for the `networkschange` event on any Element, | ||
// but only the Card and CardNumber Elements will trigger the event. | ||
if (updates) { | ||
element.update(updates); | ||
} | ||
}, [options, prevOptions, element]); | ||
React.useLayoutEffect(function () { | ||
return function () { | ||
if (element) { | ||
element.destroy(); | ||
} | ||
}; | ||
}, [element]); | ||
return /*#__PURE__*/React.createElement("div", { | ||
id: id, | ||
className: className, | ||
ref: domNode | ||
}); | ||
}; // Only render the Element wrapper in a server environment. | ||
element.on('networkschange', callOnNetworksChange); // Users can pass an onClick prop on any Element component | ||
// just as they could listen for the `click` event on any Element, | ||
// but only the PaymentRequestButton will actually trigger the event. | ||
element.on('click', callOnClick); // Users can pass an onCheckout prop on any Element component | ||
// just as they could listen for the `checkout` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
var ServerElement = function ServerElement(props) { | ||
// Validate that we are in the right context by calling useElementsContextWithUseCase. | ||
useElementsContextWithUseCase("mounts <".concat(displayName, ">")); | ||
useCartElementContextWithUseCase("mounts <".concat(displayName, ">")); | ||
var id = props.id, | ||
className = props.className; | ||
return /*#__PURE__*/React.createElement("div", { | ||
id: id, | ||
className: className | ||
}); | ||
}; | ||
element.on('checkout', function (event) { | ||
if (type === 'cart' && setCartState) { | ||
// we know that elements.on event must be of type StripeCartPayloadEvent if type is 'cart' | ||
// we need to cast because typescript is not able to infer which overloaded method is used based off param type | ||
setCartState(event); | ||
} | ||
var Element = isServer ? ServerElement : ClientElement; | ||
Element.propTypes = { | ||
id: propTypes.string, | ||
className: propTypes.string, | ||
onChange: propTypes.func, | ||
onBlur: propTypes.func, | ||
onFocus: propTypes.func, | ||
onReady: propTypes.func, | ||
onEscape: propTypes.func, | ||
onClick: propTypes.func, | ||
onLoadError: propTypes.func, | ||
onLoaderStart: propTypes.func, | ||
onNetworksChange: propTypes.func, | ||
onCheckout: propTypes.func, | ||
onLineItemClick: propTypes.func, | ||
onConfirm: propTypes.func, | ||
onCancel: propTypes.func, | ||
onShippingAddressChange: propTypes.func, | ||
onShippingRateChange: propTypes.func, | ||
options: propTypes.object | ||
}; | ||
Element.displayName = displayName; | ||
Element.__elementType = type; | ||
return Element; | ||
}; | ||
callOnCheckout(event); | ||
}); // Users can pass an onLineItemClick prop on any Element component | ||
// just as they could listen for the `lineitemclick` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
var isServer = typeof window === 'undefined'; | ||
/** | ||
* Requires beta access: | ||
* Contact [Stripe support](https://support.stripe.com/) for more information. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
element.on('lineitemclick', callOnLineItemClick); // Users can pass an onConfirm prop on any Element component | ||
// just as they could listen for the `confirm` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
var AuBankAccountElement = createElementComponent('auBankAccount', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
element.on('confirm', callOnConfirm); // Users can pass an onCancel prop on any Element component | ||
// just as they could listen for the `cancel` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
var CardElement = createElementComponent('card', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
element.on('cancel', callOnCancel); // Users can pass an onShippingAddressChange prop on any Element component | ||
// just as they could listen for the `shippingaddresschange` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
var CardNumberElement = createElementComponent('cardNumber', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
element.on('shippingaddresschange', callOnShippingAddressChange); // Users can pass an onShippingRateChange prop on any Element component | ||
// just as they could listen for the `shippingratechange` event on any Element, | ||
// but only certain Elements will trigger the event. | ||
var CardExpiryElement = createElementComponent('cardExpiry', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
element.on('shippingratechange', callOnShippingRateChange); | ||
} | ||
}); | ||
var prevOptions = usePrevious(options); | ||
React.useEffect(function () { | ||
if (!elementRef.current) { | ||
return; | ||
} | ||
var CardCvcElement = createElementComponent('cardCvc', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var updates = extractAllowedOptionsUpdates(options, prevOptions, ['paymentRequest']); | ||
var FpxBankElement = createElementComponent('fpxBank', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
if (updates) { | ||
elementRef.current.update(updates); | ||
} | ||
}, [options, prevOptions]); | ||
React.useLayoutEffect(function () { | ||
return function () { | ||
if (elementRef.current) { | ||
elementRef.current.destroy(); | ||
elementRef.current = null; | ||
} | ||
}; | ||
}, []); | ||
return /*#__PURE__*/React.createElement("div", { | ||
id: id, | ||
className: className, | ||
ref: domNode | ||
}); | ||
}; // Only render the Element wrapper in a server environment. | ||
var IbanElement = createElementComponent('iban', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var IdealBankElement = createElementComponent('idealBank', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var ServerElement = function ServerElement(props) { | ||
// Validate that we are in the right context by calling useElementsContextWithUseCase. | ||
useElementsContextWithUseCase("mounts <".concat(displayName, ">")); | ||
useCartElementContextWithUseCase("mounts <".concat(displayName, ">")); | ||
var id = props.id, | ||
className = props.className; | ||
return /*#__PURE__*/React.createElement("div", { | ||
id: id, | ||
className: className | ||
}); | ||
}; | ||
var P24BankElement = createElementComponent('p24Bank', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var Element = isServer ? ServerElement : ClientElement; | ||
Element.propTypes = { | ||
id: propTypes.string, | ||
className: propTypes.string, | ||
onChange: propTypes.func, | ||
onBlur: propTypes.func, | ||
onFocus: propTypes.func, | ||
onReady: propTypes.func, | ||
onEscape: propTypes.func, | ||
onClick: propTypes.func, | ||
onLoadError: propTypes.func, | ||
onLoaderStart: propTypes.func, | ||
onNetworksChange: propTypes.func, | ||
onCheckout: propTypes.func, | ||
onLineItemClick: propTypes.func, | ||
onConfirm: propTypes.func, | ||
onCancel: propTypes.func, | ||
onShippingAddressChange: propTypes.func, | ||
onShippingRateChange: propTypes.func, | ||
options: propTypes.object | ||
}; | ||
Element.displayName = displayName; | ||
Element.__elementType = type; | ||
return Element; | ||
}; | ||
var EpsBankElement = createElementComponent('epsBank', isServer); | ||
var PaymentElement = createElementComponent('payment', isServer); | ||
/** | ||
* Requires beta access: | ||
* Contact [Stripe support](https://support.stripe.com/) for more information. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var isServer = typeof window === 'undefined'; | ||
/** | ||
* Requires beta access: | ||
* Contact [Stripe support](https://support.stripe.com/) for more information. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var PayButtonElement = createElementComponent('payButton', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var AuBankAccountElement = createElementComponent('auBankAccount', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer); | ||
/** | ||
* Requires beta access: | ||
* Contact [Stripe support](https://support.stripe.com/) for more information. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var CardElement = createElementComponent('card', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var LinkAuthenticationElement = createElementComponent('linkAuthentication', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var CardNumberElement = createElementComponent('cardNumber', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var AddressElement = createElementComponent('address', isServer); | ||
/** | ||
* @deprecated | ||
* Use `AddressElement` instead. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var CardExpiryElement = createElementComponent('cardExpiry', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var ShippingAddressElement = createElementComponent('shippingAddress', isServer); | ||
/** | ||
* Requires beta access: | ||
* Contact [Stripe support](https://support.stripe.com/) for more information. | ||
* | ||
* @docs https://stripe.com/docs/elements/cart-element | ||
*/ | ||
var CardCvcElement = createElementComponent('cardCvc', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var CartElement = createElementComponent('cart', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var FpxBankElement = createElementComponent('fpxBank', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var PaymentMethodMessagingElement = createElementComponent('paymentMethodMessaging', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var IbanElement = createElementComponent('iban', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var AffirmMessageElement = createElementComponent('affirmMessage', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var IdealBankElement = createElementComponent('idealBank', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var AfterpayClearpayMessageElement = createElementComponent('afterpayClearpayMessage', isServer); | ||
var P24BankElement = createElementComponent('p24Bank', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
exports.AddressElement = AddressElement; | ||
exports.AffirmMessageElement = AffirmMessageElement; | ||
exports.AfterpayClearpayMessageElement = AfterpayClearpayMessageElement; | ||
exports.AuBankAccountElement = AuBankAccountElement; | ||
exports.CardCvcElement = CardCvcElement; | ||
exports.CardElement = CardElement; | ||
exports.CardExpiryElement = CardExpiryElement; | ||
exports.CardNumberElement = CardNumberElement; | ||
exports.CartElement = CartElement; | ||
exports.Elements = Elements; | ||
exports.ElementsConsumer = ElementsConsumer; | ||
exports.EpsBankElement = EpsBankElement; | ||
exports.FpxBankElement = FpxBankElement; | ||
exports.IbanElement = IbanElement; | ||
exports.IdealBankElement = IdealBankElement; | ||
exports.LinkAuthenticationElement = LinkAuthenticationElement; | ||
exports.P24BankElement = P24BankElement; | ||
exports.PayButtonElement = PayButtonElement; | ||
exports.PaymentElement = PaymentElement; | ||
exports.PaymentMethodMessagingElement = PaymentMethodMessagingElement; | ||
exports.PaymentRequestButtonElement = PaymentRequestButtonElement; | ||
exports.ShippingAddressElement = ShippingAddressElement; | ||
exports.useCartElement = useCartElement; | ||
exports.useCartElementState = useCartElementState; | ||
exports.useElements = useElements; | ||
exports.useStripe = useStripe; | ||
var EpsBankElement = createElementComponent('epsBank', isServer); | ||
var PaymentElement = createElementComponent('payment', isServer); | ||
/** | ||
* Requires beta access: | ||
* Contact [Stripe support](https://support.stripe.com/) for more information. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
var PayButtonElement = createElementComponent('payButton', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer); | ||
/** | ||
* Requires beta access: | ||
* Contact [Stripe support](https://support.stripe.com/) for more information. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var LinkAuthenticationElement = createElementComponent('linkAuthentication', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var AddressElement = createElementComponent('address', isServer); | ||
/** | ||
* @deprecated | ||
* Use `AddressElement` instead. | ||
* | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var ShippingAddressElement = createElementComponent('shippingAddress', isServer); | ||
/** | ||
* Requires beta access: | ||
* Contact [Stripe support](https://support.stripe.com/) for more information. | ||
* | ||
* @docs https://stripe.com/docs/elements/cart-element | ||
*/ | ||
var CartElement = createElementComponent('cart', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var PaymentMethodMessagingElement = createElementComponent('paymentMethodMessaging', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var AffirmMessageElement = createElementComponent('affirmMessage', isServer); | ||
/** | ||
* @docs https://stripe.com/docs/stripe-js/react#element-components | ||
*/ | ||
var AfterpayClearpayMessageElement = createElementComponent('afterpayClearpayMessage', isServer); | ||
exports.AddressElement = AddressElement; | ||
exports.AffirmMessageElement = AffirmMessageElement; | ||
exports.AfterpayClearpayMessageElement = AfterpayClearpayMessageElement; | ||
exports.AuBankAccountElement = AuBankAccountElement; | ||
exports.CardCvcElement = CardCvcElement; | ||
exports.CardElement = CardElement; | ||
exports.CardExpiryElement = CardExpiryElement; | ||
exports.CardNumberElement = CardNumberElement; | ||
exports.CartElement = CartElement; | ||
exports.Elements = Elements; | ||
exports.ElementsConsumer = ElementsConsumer; | ||
exports.EpsBankElement = EpsBankElement; | ||
exports.FpxBankElement = FpxBankElement; | ||
exports.IbanElement = IbanElement; | ||
exports.IdealBankElement = IdealBankElement; | ||
exports.LinkAuthenticationElement = LinkAuthenticationElement; | ||
exports.P24BankElement = P24BankElement; | ||
exports.PayButtonElement = PayButtonElement; | ||
exports.PaymentElement = PaymentElement; | ||
exports.PaymentMethodMessagingElement = PaymentMethodMessagingElement; | ||
exports.PaymentRequestButtonElement = PaymentRequestButtonElement; | ||
exports.ShippingAddressElement = ShippingAddressElement; | ||
exports.useCartElement = useCartElement; | ||
exports.useCartElementState = useCartElementState; | ||
exports.useElements = useElements; | ||
exports.useStripe = useStripe; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
}))); |
@@ -1,1 +0,1 @@ | ||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactStripe={},e.React)}(this,(function(e,t){"use strict";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function n(){}function r(){}r.resetWarningCache=n;var o=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,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 o={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:n};return o.PropTypes=o,o}()}));function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,o,a=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return l(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 l(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 l(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var p=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},f=function(e){return null!==e&&"object"===i(e)},m=function(e,t,n){return f(e)?Object.keys(e).reduce((function(r,o){var a=!f(t)||!function e(t,n){if(!f(t)||!f(n))return t===n;var r=Array.isArray(t);if(r!==Array.isArray(n))return!1;var o="[object Object]"===Object.prototype.toString.call(t);if(o!==("[object Object]"===Object.prototype.toString.call(n)))return!1;if(!o&&!r)return t===n;var a=Object.keys(t),c=Object.keys(n);if(a.length!==c.length)return!1;for(var i={},u=0;u<a.length;u+=1)i[a[u]]=!0;for(var s=0;s<c.length;s+=1)i[c[s]]=!0;var l=Object.keys(i);if(l.length!==a.length)return!1;var p=t,m=n;return l.every((function(t){return e(p[t],m[t])}))}(e[o],t[o]);return n.includes(o)?(a&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),r):a?c(c({},r||{}),{},u({},o,e[o])):r}),null):null},y=function(e){if(null===e||f(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;var t;throw new Error("Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")},d=function(e){if(function(e){return f(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(y)};var t=y(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},h=t.createContext(null);h.displayName="ElementsContext";var v=t.createContext(null);v.displayName="CartElementContext";var g=function(e){var n=e.stripe,r=e.options,o=e.children,a=t.useMemo((function(){return d(n)}),[n]),c=s(t.useState(null),2),i=c[0],u=c[1],l=s(t.useState(null),2),f=l[0],y=l[1],g=s(t.useState((function(){return{stripe:"sync"===a.tag?a.stripe:null,elements:"sync"===a.tag?a.stripe.elements(r):null}})),2),E=g[0],b=g[1];t.useEffect((function(){var e=!0,t=function(e){b((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==a.tag||E.stripe?"sync"!==a.tag||E.stripe||t(a.stripe):a.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[a,E,r]);var C=p(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 O=p(r);return t.useEffect((function(){if(E.elements){var e=m(r,O,["clientSecret","fonts"]);e&&E.elements.update(e)}}),[r,O,E.elements]),t.useEffect((function(){var e=E.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"1.16.2"}),e.registerAppInfo({name:"react-stripe-js",version:"1.16.2",url:"https://stripe.com/docs/stripe-js/react"}))}),[E.stripe]),t.createElement(h.Provider,{value:E},t.createElement(v.Provider,{value:{cart:i,setCart:u,cartState:f,setCartState:y}},o))};g.propTypes={stripe:o.any,options:o.object};var E=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)},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(v),e)},C=function(e){return(0,e.children)(E("mounts <ElementsConsumer>"))};C.propTypes={children:o.func.isRequired};var O=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},S=function(){},j=function(e,n){var r,a="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=n?function(e){E("mounts <".concat(a,">")),b("mounts <".concat(a,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,o=n.className,c=n.options,i=void 0===c?{}:c,u=n.onBlur,s=void 0===u?S:u,l=n.onFocus,f=void 0===l?S:l,y=n.onReady,d=void 0===y?S:y,h=n.onChange,v=void 0===h?S:h,g=n.onEscape,C=void 0===g?S:g,j=n.onClick,k=void 0===j?S:j,w=n.onLoadError,P=void 0===w?S:w,A=n.onLoaderStart,x=void 0===A?S:A,R=n.onNetworksChange,B=void 0===R?S:R,T=n.onCheckout,_=void 0===T?S:T,I=n.onLineItemClick,N=void 0===I?S:I,M=n.onConfirm,L=void 0===M?S:M,q=n.onCancel,D=void 0===q?S:q,U=n.onShippingAddressChange,W=void 0===U?S:U,F=n.onShippingRateChange,Y=void 0===F?S:F,H=E("mounts <".concat(a,">")).elements,V=t.useRef(null),$=t.useRef(null),z=b("mounts <".concat(a,">")),G=z.setCart,J=z.setCartState,K=O(d),Q=O(s),X=O(f),Z=O(k),ee=O(v),te=O(C),ne=O(P),re=O(x),oe=O(B),ae=O(_),ce=O(N),ie=O(L),ue=O(D),se=O(W),le=O(Y);t.useLayoutEffect((function(){if(null==V.current&&H&&null!=$.current){var t=H.create(e,i);"cart"===e&&G&&G(t),V.current=t,t.mount($.current),t.on("ready",(function(n){"cart"===e?(J&&J(n),K(n)):K("payButton"===e?n:t)})),t.on("change",(function(t){"cart"===e&&J&&J(t),ee(t)})),t.on("blur",Q),t.on("focus",X),t.on("escape",te),t.on("loaderror",ne),t.on("loaderstart",re),t.on("networkschange",oe),t.on("click",Z),t.on("checkout",(function(t){"cart"===e&&J&&J(t),ae(t)})),t.on("lineitemclick",ce),t.on("confirm",ie),t.on("cancel",ue),t.on("shippingaddresschange",se),t.on("shippingratechange",le)}}));var pe=p(i);return t.useEffect((function(){if(V.current){var e=m(i,pe,["paymentRequest"]);e&&V.current.update(e)}}),[i,pe]),t.useLayoutEffect((function(){return function(){V.current&&(V.current.destroy(),V.current=null)}}),[]),t.createElement("div",{id:r,className:o,ref:$})};return c.propTypes={id:o.string,className:o.string,onChange:o.func,onBlur:o.func,onFocus:o.func,onReady:o.func,onEscape:o.func,onClick:o.func,onLoadError:o.func,onLoaderStart:o.func,onNetworksChange:o.func,onCheckout:o.func,onLineItemClick:o.func,onConfirm:o.func,onCancel:o.func,onShippingAddressChange:o.func,onShippingRateChange:o.func,options:o.object},c.displayName=a,c.__elementType=e,c},k="undefined"==typeof window,w=j("auBankAccount",k),P=j("card",k),A=j("cardNumber",k),x=j("cardExpiry",k),R=j("cardCvc",k),B=j("fpxBank",k),T=j("iban",k),_=j("idealBank",k),I=j("p24Bank",k),N=j("epsBank",k),M=j("payment",k),L=j("payButton",k),q=j("paymentRequestButton",k),D=j("linkAuthentication",k),U=j("address",k),W=j("shippingAddress",k),F=j("cart",k),Y=j("paymentMethodMessaging",k),H=j("affirmMessage",k),V=j("afterpayClearpayMessage",k);e.AddressElement=U,e.AffirmMessageElement=H,e.AfterpayClearpayMessageElement=V,e.AuBankAccountElement=w,e.CardCvcElement=R,e.CardElement=P,e.CardExpiryElement=x,e.CardNumberElement=A,e.CartElement=F,e.Elements=g,e.ElementsConsumer=C,e.EpsBankElement=N,e.FpxBankElement=B,e.IbanElement=T,e.IdealBankElement=_,e.LinkAuthenticationElement=D,e.P24BankElement=I,e.PayButtonElement=L,e.PaymentElement=M,e.PaymentMethodMessagingElement=Y,e.PaymentRequestButtonElement=q,e.ShippingAddressElement=W,e.useCartElement=function(){return b("calls useCartElement()").cart},e.useCartElementState=function(){return b("calls useCartElementState()").cartState},e.useElements=function(){return E("calls useElements()").elements},e.useStripe=function(){return E("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){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:"1.16.3"}),e.registerAppInfo({name:"react-stripe-js",version:"1.16.3",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,B=b("mounts <".concat(o,">")).elements,R=c(t.useState(null),2),T=R[0],_=R[1],I=t.useRef(null),N=v("mounts <".concat(o,">")),M=N.setCart,L=N.setCartState;S(T,"blur",l),S(T,"focus",p),S(T,"escape",h),S(T,"click",g),S(T,"loaderror",E),S(T,"loaderstart",C),S(T,"networkschange",O),S(T,"lineitemclick",k),S(T,"confirm",w),S(T,"cancel",P),S(T,"shippingaddresschange",A),S(T,"shippingratechange",x),"cart"===e?r=function(e){L(e),y&&y(e)}:y&&(r="payButton"===e?y:function(){y(T)}),S(T,"ready",r),S(T,"change","cart"===e?function(e){L(e),d&&d(e)}:d),S(T,"checkout","cart"===e?function(e){L(e),j&&j(e)}:j),t.useLayoutEffect((function(){if(null===T&&B&&null!==I.current){var t=B.create(e,s);"cart"===e&&M&&M(t),_(t),t.mount(I.current)}}),[T,B,s,M]);var q=f(s);return t.useEffect((function(){if(T){var e=m(s,q,["paymentRequest"]);e&&T.update(e)}}),[s,q,T]),t.useLayoutEffect((function(){return function(){T&&T.destroy()}}),[T]),t.createElement("div",{id:a,className:u,ref:I})};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),B=O("fpxBank",j),R=O("iban",j),T=O("idealBank",j),_=O("p24Bank",j),I=O("epsBank",j),N=O("payment",j),M=O("payButton",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.FpxBankElement=B,e.IbanElement=R,e.IdealBankElement=T,e.LinkAuthenticationElement=q,e.P24BankElement=_,e.PayButtonElement=M,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})})); |
{ | ||
"name": "@stripe/react-stripe-js", | ||
"version": "1.16.2", | ||
"version": "1.16.3", | ||
"description": "React components for Stripe.js and Stripe Elements", | ||
@@ -5,0 +5,0 @@ "main": "dist/react-stripe.js", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
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
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
376293
8080