New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@stripe/react-stripe-js

Package Overview
Dependencies
Maintainers
18
Versions
65
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 2.6.2 to 2.7.0

77

dist/react-stripe.d.ts

@@ -74,2 +74,9 @@ /// <reference types="react" />

}) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {
elementType: "card";
error: StripeError;
}) => any;
}

@@ -103,2 +110,9 @@ type CardElementComponent = FunctionComponent<CardElementProps>;

}) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {
elementType: "cardNumber";
error: StripeError;
}) => any;
}

@@ -148,43 +162,2 @@ type CardNumberElementComponent = FunctionComponent<CardNumberElementProps>;

type CardCvcElementComponent = FunctionComponent<CardCvcElementProps>;
// CartElementProps does not extend ElementsProps because Cart Element does not have onBlur and onFocus events
interface CartElementProps {
/**
* Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
*/
id?: string;
/**
* Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
*/
className?: string;
/**
* An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_cart_element#cart_element_create-options).
*/
options?: stripeJs.StripeCartElementOptions;
/**
* Triggered when data exposed by this Element is changed (e.g., when there is an error).
* For more information, refer to the [Stripe.js reference](https://stripe.com/docs/js/element/events/on_change?type=cartElement).
*/
onChange?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
* Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
*/
onReady?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {
elementType: "cart";
error: StripeError;
}) => any;
/**
* Triggered when the "Checkout" button is clicked within the Element.
*/
onCheckout?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when a line item's link is clicked within the Element.
*/
onLineItemClick?: (event: stripeJs.StripeCartElementLineItemClickEvent) => any;
}
type CartElementComponent = FunctionComponent<CartElementProps>;
interface FpxBankElementProps extends ElementProps {

@@ -582,7 +555,2 @@ /**

/**
* Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=cart) for the `CartElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
* Returns `null` if no `CartElement` is rendered in the current `Elements` provider tree.
*/
getElement(component: CartElementComponent): stripeJs.StripeCartElement | null;
/**
* Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=fpxBank) for the `FpxBankElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.

@@ -693,10 +661,2 @@ * Returns `null` if no `FpxBankElement` is rendered in the current `Elements` provider tree.

declare const useElements: () => stripeJs.StripeElements | null;
/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
declare const useCartElement: () => stripeJs.StripeCartElement | null;
/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
declare const useCartElementState: () => stripeJs.StripeCartElementPayloadEvent | null;
interface ElementsConsumerProps {

@@ -833,9 +793,2 @@ children: (props: ElementsContextValue) => ReactNode;

/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* @docs https://stripe.com/docs/elements/cart-element
*/
declare const CartElement: CartElementComponent;
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components

@@ -852,2 +805,2 @@ */

declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, ExpressCheckoutElementProps, ExpressCheckoutElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useCartElement, useCartElementState, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, EmbeddedCheckout, EmbeddedCheckoutProvider, useStripe, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };
export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, ExpressCheckoutElementProps, ExpressCheckoutElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, EmbeddedCheckout, EmbeddedCheckoutProvider, useStripe, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };

184

dist/react-stripe.js

@@ -170,2 +170,28 @@ 'use strict';

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 () {
cbRef.current = cb;
}, [cb]);
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 usePrevious = function usePrevious(value) {

@@ -307,3 +333,3 @@ var ref = React.useRef(value);

name: 'react-stripe-js',
version: "2.6.2"
version: "2.7.0"
});

@@ -313,3 +339,3 @@

name: 'react-stripe-js',
version: "2.6.2",
version: "2.7.0",
url: 'https://stripe.com/docs/stripe-js/react'

@@ -328,11 +354,2 @@ });

};
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;
};
/**

@@ -355,16 +372,5 @@ * 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.

return parseStripeProp(rawStripeProp);
}, [rawStripeProp]);
}, [rawStripeProp]); // For a sync stripe instance, initialize into context
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$useState5 = React.useState(function () {
var _React$useState = React.useState(function () {
return {

@@ -375,5 +381,5 @@ stripe: parsed.tag === 'sync' ? parsed.stripe : null,

}),
_React$useState6 = _slicedToArray(_React$useState5, 2),
ctx = _React$useState6[0],
setContext = _React$useState6[1];
_React$useState2 = _slicedToArray(_React$useState, 2),
ctx = _React$useState2[0],
setContext = _React$useState2[1];

@@ -439,10 +445,3 @@ React.useEffect(function () {

value: ctx
}, /*#__PURE__*/React.createElement(CartElementContext.Provider, {
value: {
cart: cart,
setCart: setCart,
cartState: cartState,
setCartState: setCartState
}
}, children));
}, children);
};

@@ -457,18 +456,2 @@ Elements.propTypes = {

};
var DUMMY_CART_ELEMENT_CONTEXT = {
cart: null,
cartState: null,
setCart: function setCart() {},
setCartState: function setCartState() {}
};
var useCartElementContextWithUseCase = function useCartElementContextWithUseCase(useCaseMessage) {
var isInCustomCheckout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var ctx = React.useContext(CartElementContext);
if (isInCustomCheckout) {
return DUMMY_CART_ELEMENT_CONTEXT;
}
return parseCartElementContext(ctx, useCaseMessage);
};
/**

@@ -485,22 +468,2 @@ * @docs https://stripe.com/docs/stripe-js/react#useelements-hook

/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
var useCartElement = function useCartElement() {
var _useCartElementContex = useCartElementContextWithUseCase('calls useCartElement()'),
cart = _useCartElementContex.cart;
return cart;
};
/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
var useCartElementState = function useCartElementState() {
var _useCartElementContex2 = useCartElementContextWithUseCase('calls useCartElementState()'),
cartState = _useCartElementContex2.cartState;
return cartState;
};
/**
* @docs https://stripe.com/docs/stripe-js/react#elements-consumer

@@ -519,28 +482,2 @@ */

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 () {
cbRef.current = cb;
}, [cb]);
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 _excluded = ["on", "session"];

@@ -747,4 +684,2 @@ var CustomCheckoutSdkContext = /*#__PURE__*/React.createContext(null);

onNetworksChange = _ref.onNetworksChange,
onCheckout = _ref.onCheckout,
onLineItemClick = _ref.onLineItemClick,
onConfirm = _ref.onConfirm,

@@ -764,11 +699,6 @@ onCancel = _ref.onCancel,

var elementRef = React.useRef(null);
var domNode = React.useRef(null);
var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx),
setCart = _useCartElementContex.setCart,
setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on
var domNode = React.useRef(null); // 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.
useAttachEvent(element, 'blur', onBlur);

@@ -781,3 +711,2 @@ useAttachEvent(element, 'focus', onFocus);

useAttachEvent(element, 'networkschange', onNetworksChange);
useAttachEvent(element, 'lineitemclick', onLineItemClick);
useAttachEvent(element, 'confirm', onConfirm);

@@ -787,10 +716,6 @@ useAttachEvent(element, 'cancel', onCancel);

useAttachEvent(element, 'shippingratechange', onShippingRateChange);
useAttachEvent(element, 'change', onChange);
var readyCallback;
if (type === 'cart') {
readyCallback = function readyCallback(event) {
setCartState(event);
onReady && onReady(event);
};
} else if (onReady) {
if (onReady) {
if (type === 'expressCheckout') {

@@ -808,12 +733,2 @@ // Passes through the event, which includes visible PM types

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 () {

@@ -827,8 +742,2 @@ if (elementRef.current === null && domNode.current !== null && (elements || customCheckoutSdk)) {

newElement = elements.create(type, options);
}
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);
} // Store element in a ref to ensure it's _immediately_ available in cleanup hooks in StrictMode

@@ -845,3 +754,3 @@

}
}, [elements, customCheckoutSdk, options, setCart]);
}, [elements, customCheckoutSdk, options]);
var prevOptions = usePrevious(options);

@@ -879,5 +788,3 @@ React.useEffect(function () {

var ServerElement = function ServerElement(props) {
// Validate that we are in the right context by calling useElementsContextWithUseCase.
var ctx = useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx);
useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
var id = props.id,

@@ -904,4 +811,2 @@ className = props.className;

onNetworksChange: PropTypes.func,
onCheckout: PropTypes.func,
onLineItemClick: PropTypes.func,
onConfirm: PropTypes.func,

@@ -1190,10 +1095,2 @@ onCancel: PropTypes.func,

/**
* 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

@@ -1222,3 +1119,2 @@ */

exports.CardNumberElement = CardNumberElement;
exports.CartElement = CartElement;
exports.CustomCheckoutProvider = CustomCheckoutProvider;

@@ -1240,6 +1136,4 @@ exports.Elements = Elements;

exports.ShippingAddressElement = ShippingAddressElement;
exports.useCartElement = useCartElement;
exports.useCartElementState = useCartElementState;
exports.useCustomCheckout = useCustomCheckout;
exports.useElements = useElements;
exports.useStripe = useStripe;

77

dist/react-stripe.umd.d.ts

@@ -74,2 +74,9 @@ /// <reference types="react" />

}) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {
elementType: "card";
error: StripeError;
}) => any;
}

@@ -103,2 +110,9 @@ type CardElementComponent = FunctionComponent<CardElementProps>;

}) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {
elementType: "cardNumber";
error: StripeError;
}) => any;
}

@@ -148,43 +162,2 @@ type CardNumberElementComponent = FunctionComponent<CardNumberElementProps>;

type CardCvcElementComponent = FunctionComponent<CardCvcElementProps>;
// CartElementProps does not extend ElementsProps because Cart Element does not have onBlur and onFocus events
interface CartElementProps {
/**
* Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
*/
id?: string;
/**
* Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
*/
className?: string;
/**
* An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_cart_element#cart_element_create-options).
*/
options?: stripeJs.StripeCartElementOptions;
/**
* Triggered when data exposed by this Element is changed (e.g., when there is an error).
* For more information, refer to the [Stripe.js reference](https://stripe.com/docs/js/element/events/on_change?type=cartElement).
*/
onChange?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
* Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
*/
onReady?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {
elementType: "cart";
error: StripeError;
}) => any;
/**
* Triggered when the "Checkout" button is clicked within the Element.
*/
onCheckout?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when a line item's link is clicked within the Element.
*/
onLineItemClick?: (event: stripeJs.StripeCartElementLineItemClickEvent) => any;
}
type CartElementComponent = FunctionComponent<CartElementProps>;
interface FpxBankElementProps extends ElementProps {

@@ -582,7 +555,2 @@ /**

/**
* Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=cart) for the `CartElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
* Returns `null` if no `CartElement` is rendered in the current `Elements` provider tree.
*/
getElement(component: CartElementComponent): stripeJs.StripeCartElement | null;
/**
* Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=fpxBank) for the `FpxBankElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.

@@ -693,10 +661,2 @@ * Returns `null` if no `FpxBankElement` is rendered in the current `Elements` provider tree.

declare const useElements: () => stripeJs.StripeElements | null;
/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
declare const useCartElement: () => stripeJs.StripeCartElement | null;
/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
declare const useCartElementState: () => stripeJs.StripeCartElementPayloadEvent | null;
interface ElementsConsumerProps {

@@ -833,9 +793,2 @@ children: (props: ElementsContextValue) => ReactNode;

/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* @docs https://stripe.com/docs/elements/cart-element
*/
declare const CartElement: CartElementComponent;
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components

@@ -852,2 +805,2 @@ */

declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, ExpressCheckoutElementProps, ExpressCheckoutElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useCartElement, useCartElementState, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, EmbeddedCheckout, EmbeddedCheckoutProvider, useStripe, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };
export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, ExpressCheckoutElementProps, ExpressCheckoutElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, EmbeddedCheckout, EmbeddedCheckoutProvider, useStripe, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };

184

dist/react-stripe.umd.js

@@ -279,2 +279,28 @@ (function (global, factory) {

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 () {
cbRef.current = cb;
}, [cb]);
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 usePrevious = function usePrevious(value) {

@@ -416,3 +442,3 @@ var ref = React.useRef(value);

name: 'react-stripe-js',
version: "2.6.2"
version: "2.7.0"
});

@@ -422,3 +448,3 @@

name: 'react-stripe-js',
version: "2.6.2",
version: "2.7.0",
url: 'https://stripe.com/docs/stripe-js/react'

@@ -437,11 +463,2 @@ });

};
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;
};
/**

@@ -464,16 +481,5 @@ * 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.

return parseStripeProp(rawStripeProp);
}, [rawStripeProp]);
}, [rawStripeProp]); // For a sync stripe instance, initialize into context
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$useState5 = React.useState(function () {
var _React$useState = React.useState(function () {
return {

@@ -484,5 +490,5 @@ stripe: parsed.tag === 'sync' ? parsed.stripe : null,

}),
_React$useState6 = _slicedToArray(_React$useState5, 2),
ctx = _React$useState6[0],
setContext = _React$useState6[1];
_React$useState2 = _slicedToArray(_React$useState, 2),
ctx = _React$useState2[0],
setContext = _React$useState2[1];

@@ -548,10 +554,3 @@ React.useEffect(function () {

value: ctx
}, /*#__PURE__*/React.createElement(CartElementContext.Provider, {
value: {
cart: cart,
setCart: setCart,
cartState: cartState,
setCartState: setCartState
}
}, children));
}, children);
};

@@ -566,18 +565,2 @@ Elements.propTypes = {

};
var DUMMY_CART_ELEMENT_CONTEXT = {
cart: null,
cartState: null,
setCart: function setCart() {},
setCartState: function setCartState() {}
};
var useCartElementContextWithUseCase = function useCartElementContextWithUseCase(useCaseMessage) {
var isInCustomCheckout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var ctx = React.useContext(CartElementContext);
if (isInCustomCheckout) {
return DUMMY_CART_ELEMENT_CONTEXT;
}
return parseCartElementContext(ctx, useCaseMessage);
};
/**

@@ -594,22 +577,2 @@ * @docs https://stripe.com/docs/stripe-js/react#useelements-hook

/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
var useCartElement = function useCartElement() {
var _useCartElementContex = useCartElementContextWithUseCase('calls useCartElement()'),
cart = _useCartElementContex.cart;
return cart;
};
/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
var useCartElementState = function useCartElementState() {
var _useCartElementContex2 = useCartElementContextWithUseCase('calls useCartElementState()'),
cartState = _useCartElementContex2.cartState;
return cartState;
};
/**
* @docs https://stripe.com/docs/stripe-js/react#elements-consumer

@@ -628,28 +591,2 @@ */

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 () {
cbRef.current = cb;
}, [cb]);
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 _excluded = ["on", "session"];

@@ -856,4 +793,2 @@ var CustomCheckoutSdkContext = /*#__PURE__*/React.createContext(null);

onNetworksChange = _ref.onNetworksChange,
onCheckout = _ref.onCheckout,
onLineItemClick = _ref.onLineItemClick,
onConfirm = _ref.onConfirm,

@@ -873,11 +808,6 @@ onCancel = _ref.onCancel,

var elementRef = React.useRef(null);
var domNode = React.useRef(null);
var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx),
setCart = _useCartElementContex.setCart,
setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on
var domNode = React.useRef(null); // 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.
useAttachEvent(element, 'blur', onBlur);

@@ -890,3 +820,2 @@ useAttachEvent(element, 'focus', onFocus);

useAttachEvent(element, 'networkschange', onNetworksChange);
useAttachEvent(element, 'lineitemclick', onLineItemClick);
useAttachEvent(element, 'confirm', onConfirm);

@@ -896,10 +825,6 @@ useAttachEvent(element, 'cancel', onCancel);

useAttachEvent(element, 'shippingratechange', onShippingRateChange);
useAttachEvent(element, 'change', onChange);
var readyCallback;
if (type === 'cart') {
readyCallback = function readyCallback(event) {
setCartState(event);
onReady && onReady(event);
};
} else if (onReady) {
if (onReady) {
if (type === 'expressCheckout') {

@@ -917,12 +842,2 @@ // Passes through the event, which includes visible PM types

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 () {

@@ -936,8 +851,2 @@ if (elementRef.current === null && domNode.current !== null && (elements || customCheckoutSdk)) {

newElement = elements.create(type, options);
}
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);
} // Store element in a ref to ensure it's _immediately_ available in cleanup hooks in StrictMode

@@ -954,3 +863,3 @@

}
}, [elements, customCheckoutSdk, options, setCart]);
}, [elements, customCheckoutSdk, options]);
var prevOptions = usePrevious(options);

@@ -988,5 +897,3 @@ React.useEffect(function () {

var ServerElement = function ServerElement(props) {
// Validate that we are in the right context by calling useElementsContextWithUseCase.
var ctx = useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx);
useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
var id = props.id,

@@ -1013,4 +920,2 @@ className = props.className;

onNetworksChange: PropTypes.func,
onCheckout: PropTypes.func,
onLineItemClick: PropTypes.func,
onConfirm: PropTypes.func,

@@ -1299,10 +1204,2 @@ onCancel: PropTypes.func,

/**
* 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

@@ -1331,3 +1228,2 @@ */

exports.CardNumberElement = CardNumberElement;
exports.CartElement = CartElement;
exports.CustomCheckoutProvider = CustomCheckoutProvider;

@@ -1349,4 +1245,2 @@ exports.Elements = Elements;

exports.ShippingAddressElement = ShippingAddressElement;
exports.useCartElement = useCartElement;
exports.useCartElementState = useCartElementState;
exports.useCustomCheckout = useCustomCheckout;

@@ -1353,0 +1247,0 @@ exports.useElements = useElements;

77

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

@@ -74,2 +74,9 @@ /// <reference types="react" />

}) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {
elementType: "card";
error: StripeError;
}) => any;
}

@@ -103,2 +110,9 @@ type CardElementComponent = FunctionComponent<CardElementProps>;

}) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {
elementType: "cardNumber";
error: StripeError;
}) => any;
}

@@ -148,43 +162,2 @@ type CardNumberElementComponent = FunctionComponent<CardNumberElementProps>;

type CardCvcElementComponent = FunctionComponent<CardCvcElementProps>;
// CartElementProps does not extend ElementsProps because Cart Element does not have onBlur and onFocus events
interface CartElementProps {
/**
* Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
*/
id?: string;
/**
* Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
*/
className?: string;
/**
* An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_cart_element#cart_element_create-options).
*/
options?: stripeJs.StripeCartElementOptions;
/**
* Triggered when data exposed by this Element is changed (e.g., when there is an error).
* For more information, refer to the [Stripe.js reference](https://stripe.com/docs/js/element/events/on_change?type=cartElement).
*/
onChange?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
* Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
*/
onReady?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {
elementType: "cart";
error: StripeError;
}) => any;
/**
* Triggered when the "Checkout" button is clicked within the Element.
*/
onCheckout?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when a line item's link is clicked within the Element.
*/
onLineItemClick?: (event: stripeJs.StripeCartElementLineItemClickEvent) => any;
}
type CartElementComponent = FunctionComponent<CartElementProps>;
interface FpxBankElementProps extends ElementProps {

@@ -582,7 +555,2 @@ /**

/**
* Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=cart) for the `CartElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
* Returns `null` if no `CartElement` is rendered in the current `Elements` provider tree.
*/
getElement(component: CartElementComponent): stripeJs.StripeCartElement | null;
/**
* Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=fpxBank) for the `FpxBankElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.

@@ -693,10 +661,2 @@ * Returns `null` if no `FpxBankElement` is rendered in the current `Elements` provider tree.

declare const useElements: () => stripeJs.StripeElements | null;
/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
declare const useCartElement: () => stripeJs.StripeCartElement | null;
/**
* @docs https://stripe.com/docs/payments/checkout/cart-element
*/
declare const useCartElementState: () => stripeJs.StripeCartElementPayloadEvent | null;
interface ElementsConsumerProps {

@@ -833,9 +793,2 @@ children: (props: ElementsContextValue) => ReactNode;

/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* @docs https://stripe.com/docs/elements/cart-element
*/
declare const CartElement: CartElementComponent;
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components

@@ -852,2 +805,2 @@ */

declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, ExpressCheckoutElementProps, ExpressCheckoutElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useCartElement, useCartElementState, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, EmbeddedCheckout, EmbeddedCheckoutProvider, useStripe, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };
export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, ExpressCheckoutElementProps, ExpressCheckoutElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, EmbeddedCheckout, EmbeddedCheckoutProvider, useStripe, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };

2

dist/react-stripe.umd.min.js

@@ -1,1 +0,1 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis: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){u(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},o(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 c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,o,u=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(u.push(r.value),!t||u.length!==t);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return u}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return a(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 a(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 a(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}function s(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var l,p,f,d,m={exports:{}};m.exports=function(){if(d)return f;d=1;var e=p?l:(p=1,l="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");function t(){}function n(){}return n.resetWarningCache=t,f=function(){function r(t,n,r,o,u,c){if(c!==e){var i=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 i.name="Invariant Violation",i}}function o(){return r}r.isRequired=r;var u={array:r,bool:r,func:r,number:r,object:r,string:r,symbol:r,any:r,arrayOf:o,element:r,elementType:r,instanceOf:o,node:r,objectOf:o,oneOf:o,oneOfType:o,shape:o,exact:o,checkPropTypes:n,resetWarningCache:t};return u.PropTypes=u,u}}()();var h=s(m.exports),y=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},C=function(e){return null!==e&&"object"===o(e)},v="[object Object]",g=function e(t,n){if(!C(t)||!C(n))return t===n;var r=Array.isArray(t);if(r!==Array.isArray(n))return!1;var o=Object.prototype.toString.call(t)===v;if(o!==(Object.prototype.toString.call(n)===v))return!1;if(!o&&!r)return t===n;var u=Object.keys(t),c=Object.keys(n);if(u.length!==c.length)return!1;for(var i={},a=0;a<u.length;a+=1)i[u[a]]=!0;for(var s=0;s<c.length;s+=1)i[c[s]]=!0;var l=Object.keys(i);if(l.length!==u.length)return!1;var p=t,f=n;return l.every((function(t){return e(p[t],f[t])}))},E=function(e,t,n){return C(e)?Object.keys(e).reduce((function(o,c){var i=!C(t)||!g(e[c],t[c]);return n.includes(c)?(i&&console.warn("Unsupported prop change: options.".concat(c," is not a mutable property.")),o):i?r(r({},o||{}),{},u({},c,e[c])):o}),null):null},k="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.",b=function(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:k;if(null===e||C(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;throw new Error(n)},S=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:k;if(function(e){return C(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then((function(e){return b(e,t)}))};var n=b(e,t);return null===n?{tag:"empty"}:{tag:"sync",stripe:n}},w=function(e){e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"2.6.2"}),e.registerAppInfo({name:"react-stripe-js",version:"2.6.2",url:"https://stripe.com/docs/stripe-js/react"}))},P=t.createContext(null);P.displayName="ElementsContext";var O=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},j=t.createContext(null);j.displayName="CartElementContext";var x=function(e){var n=e.stripe,r=e.options,o=e.children,u=t.useMemo((function(){return S(n)}),[n]),c=i(t.useState(null),2),a=c[0],s=c[1],l=i(t.useState(null),2),p=l[0],f=l[1],d=i(t.useState((function(){return{stripe:"sync"===u.tag?u.stripe:null,elements:"sync"===u.tag?u.stripe.elements(r):null}})),2),m=d[0],h=d[1];t.useEffect((function(){var e=!0,t=function(e){h((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==u.tag||m.stripe?"sync"!==u.tag||m.stripe||t(u.stripe):u.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[u,m,r]);var C=y(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 v=y(r);return t.useEffect((function(){if(m.elements){var e=E(r,v,["clientSecret","fonts"]);e&&m.elements.update(e)}}),[r,v,m.elements]),t.useEffect((function(){w(m.stripe)}),[m.stripe]),t.createElement(P.Provider,{value:m},t.createElement(j.Provider,{value:{cart:a,setCart:s,cartState:p,setCartState:f}},o))};x.propTypes={stripe:h.any,options:h.object};var A=function(e){var n=t.useContext(P);return O(n,e)},R={cart:null,cartState:null,setCart:function(){},setCartState:function(){}},N=function(e){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=t.useContext(j);return n?R: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}(r,e)},T=function(e){return(0,e.children)(A("mounts <ElementsConsumer>"))};T.propTypes={children:h.func.isRequired};var I=function(e,n,r){var o=!!r,u=t.useRef(r);t.useEffect((function(){u.current=r}),[r]),t.useEffect((function(){if(!o||!e)return function(){};var t=function(){u.current&&u.current.apply(u,arguments)};return e.on(n,t),function(){e.off(n,t)}}),[o,n,e,u])},_=["on","session"],B=t.createContext(null);B.displayName="CustomCheckoutSdkContext";var M=function(e,t){if(!e)throw new Error("Could not find CustomCheckoutProvider context; You need to wrap the part of your app that ".concat(t," in an <CustomCheckoutProvider> provider."));return e},U=t.createContext(null);U.displayName="CustomCheckoutContext";var Y=function(e){var n=e.stripe,o=e.options,u=e.children,a=t.useMemo((function(){return S(n,"Invalid prop `stripe` supplied to `CustomCheckoutProvider`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")}),[n]),s=i(t.useState(null),2),l=s[0],p=s[1],f=i(t.useState((function(){return{stripe:"sync"===a.tag?a.stripe:null,customCheckoutSdk:null}})),2),d=f[0],m=f[1],h=function(e,t){m((function(n){return n.stripe&&n.customCheckoutSdk?n:{stripe:e,customCheckoutSdk:t}}))},v=t.useRef(!1);t.useEffect((function(){var e=!0;return"async"!==a.tag||d.stripe?"sync"===a.tag&&a.stripe&&!v.current&&(v.current=!0,a.stripe.initCustomCheckout(o).then((function(e){e&&(h(a.stripe,e),e.on("change",p))}))):a.stripePromise.then((function(t){t&&e&&!v.current&&(v.current=!0,t.initCustomCheckout(o).then((function(e){e&&(h(t,e),e.on("change",p))})))})),function(){e=!1}}),[a,d,o,p]);var E=y(n);t.useEffect((function(){null!==E&&E!==n&&console.warn("Unsupported prop change on CustomCheckoutProvider: You cannot change the `stripe` prop after setting it.")}),[E,n]);var k=y(o);t.useEffect((function(){var e,t;if(d.customCheckoutSdk){!o.clientSecret||C(k)||g(o.clientSecret,k.clientSecret)||console.warn("Unsupported prop change: options.client_secret is not a mutable property.");var n=null==k||null===(e=k.elementsOptions)||void 0===e?void 0:e.appearance,r=null==o||null===(t=o.elementsOptions)||void 0===t?void 0:t.appearance;r&&!g(r,n)&&d.customCheckoutSdk.changeAppearance(r)}}),[o,k,d.customCheckoutSdk]),t.useEffect((function(){w(d.stripe)}),[d.stripe]);var b=t.useMemo((function(){return e=d.customCheckoutSdk,t=l,e?(e.on,e.session,r(r({},c(e,_)),t||e.session())):null;var e,t}),[d.customCheckoutSdk,l]);return d.customCheckoutSdk?t.createElement(B.Provider,{value:d},t.createElement(U.Provider,{value:b},u)):null};Y.propTypes={stripe:h.any,options:h.shape({clientSecret:h.string.isRequired,elementsOptions:h.object}).isRequired};var L=function(e){var n=t.useContext(B),r=t.useContext(P);if(n&&r)throw new Error("You cannot wrap the part of your app that ".concat(e," in both <CustomCheckoutProvider> and <Elements> providers."));return n?M(n,e):O(r,e)},q=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),u=n?function(e){var n=L("mounts <".concat(o,">"));N("mounts <".concat(o,">"),"customCheckoutSdk"in n);var r=e.id,u=e.className;return t.createElement("div",{id:r,className:u})}:function(n){var r,u=n.id,c=n.className,a=n.options,s=void 0===a?{}:a,l=n.onBlur,p=n.onFocus,f=n.onReady,d=n.onChange,m=n.onEscape,h=n.onClick,C=n.onLoadError,v=n.onLoaderStart,g=n.onNetworksChange,k=n.onCheckout,b=n.onLineItemClick,S=n.onConfirm,w=n.onCancel,P=n.onShippingAddressChange,O=n.onShippingRateChange,j=L("mounts <".concat(o,">")),x="elements"in j?j.elements:null,A="customCheckoutSdk"in j?j.customCheckoutSdk:null,R=i(t.useState(null),2),T=R[0],_=R[1],B=t.useRef(null),M=t.useRef(null),U=N("mounts <".concat(o,">"),"customCheckoutSdk"in j),Y=U.setCart,q=U.setCartState;I(T,"blur",l),I(T,"focus",p),I(T,"escape",m),I(T,"click",h),I(T,"loaderror",C),I(T,"loaderstart",v),I(T,"networkschange",g),I(T,"lineitemclick",b),I(T,"confirm",S),I(T,"cancel",w),I(T,"shippingaddresschange",P),I(T,"shippingratechange",O),"cart"===e?r=function(e){q(e),f&&f(e)}:f&&(r="expressCheckout"===e?f:function(){f(T)}),I(T,"ready",r),I(T,"change","cart"===e?function(e){q(e),d&&d(e)}:d),I(T,"checkout","cart"===e?function(e){q(e),k&&k(e)}:k),t.useLayoutEffect((function(){if(null===B.current&&null!==M.current&&(x||A)){var t=null;A?t=A.createElement(e,s):x&&(t=x.create(e,s)),"cart"===e&&Y&&Y(t),B.current=t,_(t),t&&t.mount(M.current)}}),[x,A,s,Y]);var W=y(s);return t.useEffect((function(){if(B.current){var e=E(s,W,["paymentRequest"]);e&&B.current.update(e)}}),[s,W]),t.useLayoutEffect((function(){return function(){if(B.current&&"function"==typeof B.current.destroy)try{B.current.destroy(),B.current=null}catch(e){}}}),[]),t.createElement("div",{id:u,className:c,ref:M})};return u.propTypes={id:h.string,className:h.string,onChange:h.func,onBlur:h.func,onFocus:h.func,onReady:h.func,onEscape:h.func,onClick:h.func,onLoadError:h.func,onLoaderStart:h.func,onNetworksChange:h.func,onCheckout:h.func,onLineItemClick:h.func,onConfirm:h.func,onCancel:h.func,onShippingAddressChange:h.func,onShippingRateChange:h.func,options:h.object},u.displayName=o,u.__elementType=e,u},W="undefined"==typeof window,D=t.createContext(null);D.displayName="EmbeddedCheckoutProviderContext";var F=function(){var e=t.useContext(D);if(!e)throw new Error("<EmbeddedCheckout> must be used within <EmbeddedCheckoutProvider>");return e},H=W?function(e){var n=e.id,r=e.className;return F(),t.createElement("div",{id:n,className:r})}:function(e){var n=e.id,r=e.className,o=F().embeddedCheckout,u=t.useRef(!1),c=t.useRef(null);return t.useLayoutEffect((function(){return!u.current&&o&&null!==c.current&&(o.mount(c.current),u.current=!0),function(){if(u.current&&o)try{o.unmount(),u.current=!1}catch(e){}}}),[o]),t.createElement("div",{ref:c,id:n,className:r})},V=q("auBankAccount",W),$=q("card",W),z=q("cardNumber",W),G=q("cardExpiry",W),J=q("cardCvc",W),K=q("fpxBank",W),Q=q("iban",W),X=q("idealBank",W),Z=q("p24Bank",W),ee=q("epsBank",W),te=q("payment",W),ne=q("expressCheckout",W),re=q("paymentRequestButton",W),oe=q("linkAuthentication",W),ue=q("address",W),ce=q("shippingAddress",W),ie=q("cart",W),ae=q("paymentMethodMessaging",W),se=q("affirmMessage",W),le=q("afterpayClearpayMessage",W);e.AddressElement=ue,e.AffirmMessageElement=se,e.AfterpayClearpayMessageElement=le,e.AuBankAccountElement=V,e.CardCvcElement=J,e.CardElement=$,e.CardExpiryElement=G,e.CardNumberElement=z,e.CartElement=ie,e.CustomCheckoutProvider=Y,e.Elements=x,e.ElementsConsumer=T,e.EmbeddedCheckout=H,e.EmbeddedCheckoutProvider=function(e){var n=e.stripe,r=e.options,o=e.children,u=t.useMemo((function(){return S(n,"Invalid prop `stripe` supplied to `EmbeddedCheckoutProvider`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")}),[n]),c=t.useRef(null),a=t.useRef(null),s=i(t.useState({embeddedCheckout:null}),2),l=s[0],p=s[1];t.useEffect((function(){if(!a.current&&!c.current){var e=function(e){a.current||c.current||(a.current=e,c.current=a.current.initEmbeddedCheckout(r).then((function(e){p({embeddedCheckout:e})})))};"async"!==u.tag||a.current||!r.clientSecret&&!r.fetchClientSecret?"sync"!==u.tag||a.current||!r.clientSecret&&!r.fetchClientSecret||e(u.stripe):u.stripePromise.then((function(t){t&&e(t)}))}}),[u,r,l,a]),t.useEffect((function(){return function(){l.embeddedCheckout?(c.current=null,l.embeddedCheckout.destroy()):c.current&&c.current.then((function(){c.current=null,l.embeddedCheckout&&l.embeddedCheckout.destroy()}))}}),[l.embeddedCheckout]),t.useEffect((function(){w(a)}),[a]);var f=y(n);t.useEffect((function(){null!==f&&f!==n&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the `stripe` prop after setting it.")}),[f,n]);var d=y(r);return t.useEffect((function(){null!=d&&(null!=r?(void 0===r.clientSecret&&void 0===r.fetchClientSecret&&console.warn("Invalid props passed to EmbeddedCheckoutProvider: You must provide one of either `options.fetchClientSecret` or `options.clientSecret`."),null!=d.clientSecret&&r.clientSecret!==d.clientSecret&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the client secret after setting it. Unmount and create a new instance of EmbeddedCheckoutProvider instead."),null!=d.fetchClientSecret&&r.fetchClientSecret!==d.fetchClientSecret&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change fetchClientSecret after setting it. Unmount and create a new instance of EmbeddedCheckoutProvider instead."),null!=d.onComplete&&r.onComplete!==d.onComplete&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the onComplete option after setting it.")):console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot unset options after setting them."))}),[d,r]),t.createElement(D.Provider,{value:l},o)},e.EpsBankElement=ee,e.ExpressCheckoutElement=ne,e.FpxBankElement=K,e.IbanElement=Q,e.IdealBankElement=X,e.LinkAuthenticationElement=oe,e.P24BankElement=Z,e.PaymentElement=te,e.PaymentMethodMessagingElement=ae,e.PaymentRequestButtonElement=re,e.ShippingAddressElement=ce,e.useCartElement=function(){return N("calls useCartElement()").cart},e.useCartElementState=function(){return N("calls useCartElementState()").cartState},e.useCustomCheckout=function(){!function(e){var n=t.useContext(B);M(n,e)}("calls useCustomCheckout()");var e=t.useContext(U);if(!e)throw new Error("Could not find CustomCheckout Context; You need to wrap the part of your app that calls useCustomCheckout() in an <CustomCheckoutProvider> provider.");return e},e.useElements=function(){return A("calls useElements()").elements},e.useStripe=function(){return L("calls useStripe()").stripe}}));
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis: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){u(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},o(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 c(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function i(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,o,u=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(u.push(r.value),!t||u.length!==t);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return u}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return s(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 s(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 s(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}function a(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var l,p,f,d,m={exports:{}};m.exports=function(){if(d)return f;d=1;var e=p?l:(p=1,l="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");function t(){}function n(){}return n.resetWarningCache=t,f=function(){function r(t,n,r,o,u,c){if(c!==e){var i=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 i.name="Invariant Violation",i}}function o(){return r}r.isRequired=r;var u={array:r,bool:r,func:r,number:r,object:r,string:r,symbol:r,any:r,arrayOf:o,element:r,elementType:r,instanceOf:o,node:r,objectOf:o,oneOf:o,oneOfType:o,shape:o,exact:o,checkPropTypes:n,resetWarningCache:t};return u.PropTypes=u,u}}()();var h=a(m.exports),y=function(e,n,r){var o=!!r,u=t.useRef(r);t.useEffect((function(){u.current=r}),[r]),t.useEffect((function(){if(!o||!e)return function(){};var t=function(){u.current&&u.current.apply(u,arguments)};return e.on(n,t),function(){e.off(n,t)}}),[o,n,e,u])},v=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},C=function(e){return null!==e&&"object"===o(e)},g="[object Object]",E=function e(t,n){if(!C(t)||!C(n))return t===n;var r=Array.isArray(t);if(r!==Array.isArray(n))return!1;var o=Object.prototype.toString.call(t)===g;if(o!==(Object.prototype.toString.call(n)===g))return!1;if(!o&&!r)return t===n;var u=Object.keys(t),c=Object.keys(n);if(u.length!==c.length)return!1;for(var i={},s=0;s<u.length;s+=1)i[u[s]]=!0;for(var a=0;a<c.length;a+=1)i[c[a]]=!0;var l=Object.keys(i);if(l.length!==u.length)return!1;var p=t,f=n;return l.every((function(t){return e(p[t],f[t])}))},b=function(e,t,n){return C(e)?Object.keys(e).reduce((function(o,c){var i=!C(t)||!E(e[c],t[c]);return n.includes(c)?(i&&console.warn("Unsupported prop change: options.".concat(c," is not a mutable property.")),o):i?r(r({},o||{}),{},u({},c,e[c])):o}),null):null},k="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.",S=function(e){var t,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:k;if(null===e||C(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;throw new Error(n)},P=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:k;if(function(e){return C(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then((function(e){return S(e,t)}))};var n=S(e,t);return null===n?{tag:"empty"}:{tag:"sync",stripe:n}},w=function(e){e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"2.7.0"}),e.registerAppInfo({name:"react-stripe-js",version:"2.7.0",url:"https://stripe.com/docs/stripe-js/react"}))},O=t.createContext(null);O.displayName="ElementsContext";var j=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},x=function(e){var n=e.stripe,r=e.options,o=e.children,u=t.useMemo((function(){return P(n)}),[n]),c=i(t.useState((function(){return{stripe:"sync"===u.tag?u.stripe:null,elements:"sync"===u.tag?u.stripe.elements(r):null}})),2),s=c[0],a=c[1];t.useEffect((function(){var e=!0,t=function(e){a((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==u.tag||s.stripe?"sync"!==u.tag||s.stripe||t(u.stripe):u.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[u,s,r]);var l=v(n);t.useEffect((function(){null!==l&&l!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[l,n]);var p=v(r);return t.useEffect((function(){if(s.elements){var e=b(r,p,["clientSecret","fonts"]);e&&s.elements.update(e)}}),[r,p,s.elements]),t.useEffect((function(){w(s.stripe)}),[s.stripe]),t.createElement(O.Provider,{value:s},o)};x.propTypes={stripe:h.any,options:h.object};var A=function(e){var n=t.useContext(O);return j(n,e)},R=function(e){return(0,e.children)(A("mounts <ElementsConsumer>"))};R.propTypes={children:h.func.isRequired};var N=["on","session"],T=t.createContext(null);T.displayName="CustomCheckoutSdkContext";var I=function(e,t){if(!e)throw new Error("Could not find CustomCheckoutProvider context; You need to wrap the part of your app that ".concat(t," in an <CustomCheckoutProvider> provider."));return e},_=t.createContext(null);_.displayName="CustomCheckoutContext";var B=function(e){var n=e.stripe,o=e.options,u=e.children,s=t.useMemo((function(){return P(n,"Invalid prop `stripe` supplied to `CustomCheckoutProvider`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")}),[n]),a=i(t.useState(null),2),l=a[0],p=a[1],f=i(t.useState((function(){return{stripe:"sync"===s.tag?s.stripe:null,customCheckoutSdk:null}})),2),d=f[0],m=f[1],h=function(e,t){m((function(n){return n.stripe&&n.customCheckoutSdk?n:{stripe:e,customCheckoutSdk:t}}))},y=t.useRef(!1);t.useEffect((function(){var e=!0;return"async"!==s.tag||d.stripe?"sync"===s.tag&&s.stripe&&!y.current&&(y.current=!0,s.stripe.initCustomCheckout(o).then((function(e){e&&(h(s.stripe,e),e.on("change",p))}))):s.stripePromise.then((function(t){t&&e&&!y.current&&(y.current=!0,t.initCustomCheckout(o).then((function(e){e&&(h(t,e),e.on("change",p))})))})),function(){e=!1}}),[s,d,o,p]);var g=v(n);t.useEffect((function(){null!==g&&g!==n&&console.warn("Unsupported prop change on CustomCheckoutProvider: You cannot change the `stripe` prop after setting it.")}),[g,n]);var b=v(o);t.useEffect((function(){var e,t;if(d.customCheckoutSdk){!o.clientSecret||C(b)||E(o.clientSecret,b.clientSecret)||console.warn("Unsupported prop change: options.client_secret is not a mutable property.");var n=null==b||null===(e=b.elementsOptions)||void 0===e?void 0:e.appearance,r=null==o||null===(t=o.elementsOptions)||void 0===t?void 0:t.appearance;r&&!E(r,n)&&d.customCheckoutSdk.changeAppearance(r)}}),[o,b,d.customCheckoutSdk]),t.useEffect((function(){w(d.stripe)}),[d.stripe]);var k=t.useMemo((function(){return e=d.customCheckoutSdk,t=l,e?(e.on,e.session,r(r({},c(e,N)),t||e.session())):null;var e,t}),[d.customCheckoutSdk,l]);return d.customCheckoutSdk?t.createElement(T.Provider,{value:d},t.createElement(_.Provider,{value:k},u)):null};B.propTypes={stripe:h.any,options:h.shape({clientSecret:h.string.isRequired,elementsOptions:h.object}).isRequired};var M=function(e){var n=t.useContext(T),r=t.useContext(O);if(n&&r)throw new Error("You cannot wrap the part of your app that ".concat(e," in both <CustomCheckoutProvider> and <Elements> providers."));return n?I(n,e):j(r,e)},U=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),u=n?function(e){M("mounts <".concat(o,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r,u=n.id,c=n.className,s=n.options,a=void 0===s?{}:s,l=n.onBlur,p=n.onFocus,f=n.onReady,d=n.onChange,m=n.onEscape,h=n.onClick,C=n.onLoadError,g=n.onLoaderStart,E=n.onNetworksChange,k=n.onConfirm,S=n.onCancel,P=n.onShippingAddressChange,w=n.onShippingRateChange,O=M("mounts <".concat(o,">")),j="elements"in O?O.elements:null,x="customCheckoutSdk"in O?O.customCheckoutSdk:null,A=i(t.useState(null),2),R=A[0],N=A[1],T=t.useRef(null),I=t.useRef(null);y(R,"blur",l),y(R,"focus",p),y(R,"escape",m),y(R,"click",h),y(R,"loaderror",C),y(R,"loaderstart",g),y(R,"networkschange",E),y(R,"confirm",k),y(R,"cancel",S),y(R,"shippingaddresschange",P),y(R,"shippingratechange",w),y(R,"change",d),f&&(r="expressCheckout"===e?f:function(){f(R)}),y(R,"ready",r),t.useLayoutEffect((function(){if(null===T.current&&null!==I.current&&(j||x)){var t=null;x?t=x.createElement(e,a):j&&(t=j.create(e,a)),T.current=t,N(t),t&&t.mount(I.current)}}),[j,x,a]);var _=v(a);return t.useEffect((function(){if(T.current){var e=b(a,_,["paymentRequest"]);e&&T.current.update(e)}}),[a,_]),t.useLayoutEffect((function(){return function(){if(T.current&&"function"==typeof T.current.destroy)try{T.current.destroy(),T.current=null}catch(e){}}}),[]),t.createElement("div",{id:u,className:c,ref:I})};return u.propTypes={id:h.string,className:h.string,onChange:h.func,onBlur:h.func,onFocus:h.func,onReady:h.func,onEscape:h.func,onClick:h.func,onLoadError:h.func,onLoaderStart:h.func,onNetworksChange:h.func,onConfirm:h.func,onCancel:h.func,onShippingAddressChange:h.func,onShippingRateChange:h.func,options:h.object},u.displayName=o,u.__elementType=e,u},Y="undefined"==typeof window,L=t.createContext(null);L.displayName="EmbeddedCheckoutProviderContext";var q=function(){var e=t.useContext(L);if(!e)throw new Error("<EmbeddedCheckout> must be used within <EmbeddedCheckoutProvider>");return e},W=Y?function(e){var n=e.id,r=e.className;return q(),t.createElement("div",{id:n,className:r})}:function(e){var n=e.id,r=e.className,o=q().embeddedCheckout,u=t.useRef(!1),c=t.useRef(null);return t.useLayoutEffect((function(){return!u.current&&o&&null!==c.current&&(o.mount(c.current),u.current=!0),function(){if(u.current&&o)try{o.unmount(),u.current=!1}catch(e){}}}),[o]),t.createElement("div",{ref:c,id:n,className:r})},D=U("auBankAccount",Y),F=U("card",Y),H=U("cardNumber",Y),V=U("cardExpiry",Y),$=U("cardCvc",Y),z=U("fpxBank",Y),G=U("iban",Y),J=U("idealBank",Y),K=U("p24Bank",Y),Q=U("epsBank",Y),X=U("payment",Y),Z=U("expressCheckout",Y),ee=U("paymentRequestButton",Y),te=U("linkAuthentication",Y),ne=U("address",Y),re=U("shippingAddress",Y),oe=U("paymentMethodMessaging",Y),ue=U("affirmMessage",Y),ce=U("afterpayClearpayMessage",Y);e.AddressElement=ne,e.AffirmMessageElement=ue,e.AfterpayClearpayMessageElement=ce,e.AuBankAccountElement=D,e.CardCvcElement=$,e.CardElement=F,e.CardExpiryElement=V,e.CardNumberElement=H,e.CustomCheckoutProvider=B,e.Elements=x,e.ElementsConsumer=R,e.EmbeddedCheckout=W,e.EmbeddedCheckoutProvider=function(e){var n=e.stripe,r=e.options,o=e.children,u=t.useMemo((function(){return P(n,"Invalid prop `stripe` supplied to `EmbeddedCheckoutProvider`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")}),[n]),c=t.useRef(null),s=t.useRef(null),a=i(t.useState({embeddedCheckout:null}),2),l=a[0],p=a[1];t.useEffect((function(){if(!s.current&&!c.current){var e=function(e){s.current||c.current||(s.current=e,c.current=s.current.initEmbeddedCheckout(r).then((function(e){p({embeddedCheckout:e})})))};"async"!==u.tag||s.current||!r.clientSecret&&!r.fetchClientSecret?"sync"!==u.tag||s.current||!r.clientSecret&&!r.fetchClientSecret||e(u.stripe):u.stripePromise.then((function(t){t&&e(t)}))}}),[u,r,l,s]),t.useEffect((function(){return function(){l.embeddedCheckout?(c.current=null,l.embeddedCheckout.destroy()):c.current&&c.current.then((function(){c.current=null,l.embeddedCheckout&&l.embeddedCheckout.destroy()}))}}),[l.embeddedCheckout]),t.useEffect((function(){w(s)}),[s]);var f=v(n);t.useEffect((function(){null!==f&&f!==n&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the `stripe` prop after setting it.")}),[f,n]);var d=v(r);return t.useEffect((function(){null!=d&&(null!=r?(void 0===r.clientSecret&&void 0===r.fetchClientSecret&&console.warn("Invalid props passed to EmbeddedCheckoutProvider: You must provide one of either `options.fetchClientSecret` or `options.clientSecret`."),null!=d.clientSecret&&r.clientSecret!==d.clientSecret&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the client secret after setting it. Unmount and create a new instance of EmbeddedCheckoutProvider instead."),null!=d.fetchClientSecret&&r.fetchClientSecret!==d.fetchClientSecret&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change fetchClientSecret after setting it. Unmount and create a new instance of EmbeddedCheckoutProvider instead."),null!=d.onComplete&&r.onComplete!==d.onComplete&&console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot change the onComplete option after setting it.")):console.warn("Unsupported prop change on EmbeddedCheckoutProvider: You cannot unset options after setting them."))}),[d,r]),t.createElement(L.Provider,{value:l},o)},e.EpsBankElement=Q,e.ExpressCheckoutElement=Z,e.FpxBankElement=z,e.IbanElement=G,e.IdealBankElement=J,e.LinkAuthenticationElement=te,e.P24BankElement=K,e.PaymentElement=X,e.PaymentMethodMessagingElement=oe,e.PaymentRequestButtonElement=ee,e.ShippingAddressElement=re,e.useCustomCheckout=function(){!function(e){var n=t.useContext(T);I(n,e)}("calls useCustomCheckout()");var e=t.useContext(_);if(!e)throw new Error("Could not find CustomCheckout Context; You need to wrap the part of your app that calls useCustomCheckout() in an <CustomCheckoutProvider> provider.");return e},e.useElements=function(){return A("calls useElements()").elements},e.useStripe=function(){return M("calls useStripe()").stripe}}));

4

package.json
{
"name": "@stripe/react-stripe-js",
"version": "2.6.2",
"version": "2.7.0",
"description": "React components for Stripe.js and Stripe Elements",

@@ -70,3 +70,3 @@ "main": "dist/react-stripe.js",

"@storybook/react": "^6.5.0-beta.8",
"@stripe/stripe-js": "3.0.10",
"@stripe/stripe-js": "^3.3.0",
"@testing-library/jest-dom": "^5.16.4",

@@ -73,0 +73,0 @@ "@testing-library/react": "^13.1.1",

20

src/index.ts

@@ -19,3 +19,2 @@ import createElementComponent from './components/createElementComponent';

AddressElementComponent,
CartElementComponent,
AffirmMessageElementComponent,

@@ -29,9 +28,3 @@ AfterpayClearpayMessageElementComponent,

export {
useElements,
useCartElement,
useCartElementState,
Elements,
ElementsConsumer,
} from './components/Elements';
export {useElements, Elements, ElementsConsumer} from './components/Elements';

@@ -178,13 +171,2 @@ export {

/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* @docs https://stripe.com/docs/elements/cart-element
*/
export const CartElement: CartElementComponent = createElementComponent(
'cart',
isServer
);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components

@@ -191,0 +173,0 @@ */

67

src/types/index.ts

@@ -83,2 +83,7 @@ import {FunctionComponent} from 'react';

onNetworksChange?: (event: {elementType: 'card'}) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {elementType: 'card'; error: StripeError}) => any;
}

@@ -116,2 +121,7 @@

onNetworksChange?: (event: {elementType: 'cardNumber'}) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {elementType: 'cardNumber'; error: StripeError}) => any;
}

@@ -177,51 +187,2 @@

// CartElementProps does not extend ElementsProps because Cart Element does not have onBlur and onFocus events
export interface CartElementProps {
/**
* Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
*/
id?: string;
/**
* Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
*/
className?: string;
/**
* An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_cart_element#cart_element_create-options).
*/
options?: stripeJs.StripeCartElementOptions;
/**
* Triggered when data exposed by this Element is changed (e.g., when there is an error).
* For more information, refer to the [Stripe.js reference](https://stripe.com/docs/js/element/events/on_change?type=cartElement).
*/
onChange?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
* Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
*/
onReady?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when the Element fails to load.
*/
onLoadError?: (event: {elementType: 'cart'; error: StripeError}) => any;
/**
* Triggered when the "Checkout" button is clicked within the Element.
*/
onCheckout?: (event: stripeJs.StripeCartElementPayloadEvent) => any;
/**
* Triggered when a line item's link is clicked within the Element.
*/
onLineItemClick?: (
event: stripeJs.StripeCartElementLineItemClickEvent
) => any;
}
export type CartElementComponent = FunctionComponent<CartElementProps>;
export interface FpxBankElementProps extends ElementProps {

@@ -724,10 +685,2 @@ /**

/**
* Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=cart) for the `CartElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
* Returns `null` if no `CartElement` is rendered in the current `Elements` provider tree.
*/
getElement(
component: CartElementComponent
): stripeJs.StripeCartElement | null;
/**
* Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=fpxBank) for the `FpxBankElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.

@@ -734,0 +687,0 @@ * Returns `null` if no `FpxBankElement` is rendered in the current `Elements` provider tree.

dist/react-stripe.esm.d.mts

Sorry, the diff of this file is not supported yet

dist/react-stripe.esm.mjs

Sorry, the diff of this file is not supported yet

src/components/createElementComponent.test.tsx

Sorry, the diff of this file is not supported yet

src/components/createElementComponent.tsx

Sorry, the diff of this file is not supported yet

src/components/Elements.test.tsx

Sorry, the diff of this file is not supported yet

src/components/Elements.tsx

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc