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
16
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.1.2 to 2.2.0

src/components/CustomCheckout.test.tsx
src/components/CustomCheckout.tsx
src/utils/parseStripeProp.ts
src/utils/registerWithStripeJs.ts

23

dist/react-stripe.d.ts

@@ -707,2 +707,17 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";

declare const ElementsConsumer: FunctionComponent<ElementsConsumerProps>;
interface CustomCheckoutContextValue extends stripeJs.StripeCustomCheckoutActions, stripeJs.StripeCustomCheckoutSession {
}
interface CustomCheckoutProviderProps {
/**
* A [Stripe object](https://stripe.com/docs/js/initializing) or a `Promise` resolving to a `Stripe` object.
* The easiest way to initialize a `Stripe` object is with the the [Stripe.js wrapper module](https://github.com/stripe/stripe-js/blob/master/README.md#readme).
* Once this prop has been set, it can not be changed.
*
* You can also pass in `null` or a `Promise` resolving to `null` if you are performing an initial server-side render or when generating a static site.
*/
stripe: PromiseLike<stripeJs.Stripe | null> | stripeJs.Stripe | null;
options: stripeJs.StripeCustomCheckoutOptions;
}
declare const CustomCheckoutProvider: FunctionComponent<PropsWithChildren<CustomCheckoutProviderProps>>;
declare const useCustomCheckout: () => CustomCheckoutContextValue | null;
/**

@@ -753,5 +768,2 @@ * Requires beta access:

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

@@ -765,5 +777,2 @@ */

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

@@ -802,2 +811,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, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, 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, 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, useStripe, useElements, useCartElement, useCartElementState, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };

23

dist/react-stripe.esm.d.ts

@@ -707,2 +707,17 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";

declare const ElementsConsumer: FunctionComponent<ElementsConsumerProps>;
interface CustomCheckoutContextValue extends stripeJs.StripeCustomCheckoutActions, stripeJs.StripeCustomCheckoutSession {
}
interface CustomCheckoutProviderProps {
/**
* A [Stripe object](https://stripe.com/docs/js/initializing) or a `Promise` resolving to a `Stripe` object.
* The easiest way to initialize a `Stripe` object is with the the [Stripe.js wrapper module](https://github.com/stripe/stripe-js/blob/master/README.md#readme).
* Once this prop has been set, it can not be changed.
*
* You can also pass in `null` or a `Promise` resolving to `null` if you are performing an initial server-side render or when generating a static site.
*/
stripe: PromiseLike<stripeJs.Stripe | null> | stripeJs.Stripe | null;
options: stripeJs.StripeCustomCheckoutOptions;
}
declare const CustomCheckoutProvider: FunctionComponent<PropsWithChildren<CustomCheckoutProviderProps>>;
declare const useCustomCheckout: () => CustomCheckoutContextValue | null;
/**

@@ -753,5 +768,2 @@ * Requires beta access:

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

@@ -765,5 +777,2 @@ */

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

@@ -802,2 +811,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, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, 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, 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, useStripe, useElements, useCartElement, useCartElementState, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };

309

dist/react-stripe.esm.js

@@ -73,2 +73,38 @@ import React from 'react';

function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _slicedToArray(arr, i) {

@@ -227,2 +263,4 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();

var validateStripe = function validateStripe(maybeStripe) {
var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
if (maybeStripe === null || isStripe(maybeStripe)) {

@@ -232,14 +270,18 @@ return maybeStripe;

throw new Error(INVALID_STRIPE_ERROR);
throw new Error(errorMsg);
};
var parseStripeProp = function parseStripeProp(raw) {
var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
if (isPromise(raw)) {
return {
tag: 'async',
stripePromise: Promise.resolve(raw).then(validateStripe)
stripePromise: Promise.resolve(raw).then(function (result) {
return validateStripe(result, errorMsg);
})
};
}
var stripe = validateStripe(raw);
var stripe = validateStripe(raw, errorMsg);

@@ -258,2 +300,193 @@ if (stripe === null) {

var registerWithStripeJs = function registerWithStripeJs(stripe) {
if (!stripe || !stripe._registerWrapper || !stripe.registerAppInfo) {
return;
}
stripe._registerWrapper({
name: 'react-stripe-js',
version: "2.2.0"
});
stripe.registerAppInfo({
name: 'react-stripe-js',
version: "2.2.0",
url: 'https://stripe.com/docs/stripe-js/react'
});
};
var _excluded = ["on", "session"];
var CustomCheckoutSdkContext = /*#__PURE__*/React.createContext(null);
CustomCheckoutSdkContext.displayName = 'CustomCheckoutSdkContext';
var parseCustomCheckoutSdkContext = function parseCustomCheckoutSdkContext(ctx, useCase) {
if (!ctx) {
throw new Error("Could not find CustomCheckoutProvider context; You need to wrap the part of your app that ".concat(useCase, " in an <CustomCheckoutProvider> provider."));
}
return ctx;
};
var CustomCheckoutContext = /*#__PURE__*/React.createContext(null);
CustomCheckoutContext.displayName = 'CustomCheckoutContext';
var extractCustomCheckoutContextValue = function extractCustomCheckoutContextValue(customCheckoutSdk, sessionState) {
if (!customCheckoutSdk) {
return null;
}
var _on = customCheckoutSdk.on,
_session = customCheckoutSdk.session,
actions = _objectWithoutProperties(customCheckoutSdk, _excluded);
if (!sessionState) {
return _objectSpread2(_objectSpread2({}, actions), customCheckoutSdk.session());
}
return _objectSpread2(_objectSpread2({}, actions), sessionState);
};
var INVALID_STRIPE_ERROR$1 = '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.';
var CustomCheckoutProvider = function CustomCheckoutProvider(_ref) {
var rawStripeProp = _ref.stripe,
options = _ref.options,
children = _ref.children;
var parsed = React.useMemo(function () {
return parseStripeProp(rawStripeProp, INVALID_STRIPE_ERROR$1);
}, [rawStripeProp]); // State used to trigger a re-render when sdk.session is updated
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
session = _React$useState2[0],
setSession = _React$useState2[1];
var _React$useState3 = React.useState(function () {
return {
stripe: parsed.tag === 'sync' ? parsed.stripe : null,
customCheckoutSdk: null
};
}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
ctx = _React$useState4[0],
setContext = _React$useState4[1];
var safeSetContext = function safeSetContext(stripe, customCheckoutSdk) {
setContext(function (ctx) {
if (ctx.stripe && ctx.customCheckoutSdk) {
return ctx;
}
return {
stripe: stripe,
customCheckoutSdk: customCheckoutSdk
};
});
}; // Ref used to avoid calling initCustomCheckout multiple times when options changes
var initCustomCheckoutCalledRef = React.useRef(false);
React.useEffect(function () {
var isMounted = true;
if (parsed.tag === 'async' && !ctx.stripe) {
parsed.stripePromise.then(function (stripe) {
if (stripe && isMounted && !initCustomCheckoutCalledRef.current) {
// Only update context if the component is still mounted
// and stripe is not null. We allow stripe to be null to make
// handling SSR easier.
initCustomCheckoutCalledRef.current = true;
stripe.initCustomCheckout(options).then(function (customCheckoutSdk) {
if (customCheckoutSdk) {
safeSetContext(stripe, customCheckoutSdk);
customCheckoutSdk.on('change', setSession);
}
});
}
});
} else if (parsed.tag === 'sync' && parsed.stripe && !initCustomCheckoutCalledRef.current) {
initCustomCheckoutCalledRef.current = true;
parsed.stripe.initCustomCheckout(options).then(function (customCheckoutSdk) {
if (customCheckoutSdk) {
safeSetContext(parsed.stripe, customCheckoutSdk);
customCheckoutSdk.on('change', setSession);
}
});
}
return function () {
isMounted = false;
};
}, [parsed, ctx, options, setSession]); // Warn on changes to stripe prop
var prevStripe = usePrevious(rawStripeProp);
React.useEffect(function () {
if (prevStripe !== null && prevStripe !== rawStripeProp) {
console.warn('Unsupported prop change on CustomCheckoutProvider: 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 () {
var _prevOptions$elements, _options$elementsOpti;
if (!ctx.customCheckoutSdk) {
return;
}
if (options.clientSecret && !isUnknownObject(prevOptions) && !isEqual(options.clientSecret, prevOptions.clientSecret)) {
console.warn('Unsupported prop change: options.client_secret is not a mutable property.');
}
var previousAppearance = prevOptions === null || prevOptions === void 0 ? void 0 : (_prevOptions$elements = prevOptions.elementsOptions) === null || _prevOptions$elements === void 0 ? void 0 : _prevOptions$elements.appearance;
var currentAppearance = options === null || options === void 0 ? void 0 : (_options$elementsOpti = options.elementsOptions) === null || _options$elementsOpti === void 0 ? void 0 : _options$elementsOpti.appearance;
if (currentAppearance && !isEqual(currentAppearance, previousAppearance)) {
ctx.customCheckoutSdk.changeAppearance(currentAppearance);
}
}, [options, prevOptions, ctx.customCheckoutSdk]); // Attach react-stripe-js version to stripe.js instance
React.useEffect(function () {
registerWithStripeJs(ctx.stripe);
}, [ctx.stripe]);
var customCheckoutContextValue = React.useMemo(function () {
return extractCustomCheckoutContextValue(ctx.customCheckoutSdk, session);
}, [ctx.customCheckoutSdk, session]);
if (!ctx.customCheckoutSdk) {
return null;
}
return /*#__PURE__*/React.createElement(CustomCheckoutSdkContext.Provider, {
value: ctx
}, /*#__PURE__*/React.createElement(CustomCheckoutContext.Provider, {
value: customCheckoutContextValue
}, children));
};
CustomCheckoutProvider.propTypes = {
stripe: PropTypes.any,
options: PropTypes.shape({
clientSecret: PropTypes.string.isRequired,
elementsOptions: PropTypes.object
}).isRequired
};
var useCustomCheckoutSdkContextWithUseCase = function useCustomCheckoutSdkContextWithUseCase(useCaseString) {
var ctx = React.useContext(CustomCheckoutSdkContext);
return parseCustomCheckoutSdkContext(ctx, useCaseString);
};
var useElementsOrCustomCheckoutSdkContextWithUseCase = function useElementsOrCustomCheckoutSdkContextWithUseCase(useCaseString) {
var customCheckoutSdkContext = React.useContext(CustomCheckoutSdkContext);
var elementsContext = React.useContext(ElementsContext);
if (customCheckoutSdkContext && elementsContext) {
throw new Error("You cannot wrap the part of your app that ".concat(useCaseString, " in both <CustomCheckoutProvider> and <Elements> providers."));
}
if (customCheckoutSdkContext) {
return parseCustomCheckoutSdkContext(customCheckoutSdkContext, useCaseString);
}
return parseElementsContext(elementsContext, useCaseString);
};
var useCustomCheckout = function useCustomCheckout() {
// ensure it's in CustomCheckoutProvider
useCustomCheckoutSdkContextWithUseCase('calls useCustomCheckout()');
return React.useContext(CustomCheckoutContext);
};
var ElementsContext = /*#__PURE__*/React.createContext(null);

@@ -372,18 +605,3 @@ ElementsContext.displayName = 'ElementsContext';

React.useEffect(function () {
var anyStripe = ctx.stripe;
if (!anyStripe || !anyStripe._registerWrapper || !anyStripe.registerAppInfo) {
return;
}
anyStripe._registerWrapper({
name: 'react-stripe-js',
version: "2.1.2"
});
anyStripe.registerAppInfo({
name: 'react-stripe-js',
version: "2.1.2",
url: 'https://stripe.com/docs/stripe-js/react'
});
registerWithStripeJs(ctx.stripe);
}, [ctx.stripe]);

@@ -409,4 +627,16 @@ return /*#__PURE__*/React.createElement(ElementsContext.Provider, {

};
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);

@@ -429,4 +659,4 @@ };

var useStripe = function useStripe() {
var _useElementsContextWi2 = useElementsContextWithUseCase('calls useStripe()'),
stripe = _useElementsContextWi2.stripe;
var _useElementsOrCustomC = useElementsOrCustomCheckoutSdkContextWithUseCase('calls useStripe()'),
stripe = _useElementsOrCustomC.stripe;

@@ -522,6 +752,6 @@ return stripe;

onShippingRateChange = _ref.onShippingRateChange;
var ctx = useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
var elements = 'elements' in ctx ? ctx.elements : null;
var customCheckoutSdk = 'customCheckoutSdk' in ctx ? ctx.customCheckoutSdk : null;
var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
elements = _useElementsContextWi.elements;
var _React$useState = React.useState(null),

@@ -535,3 +765,3 @@ _React$useState2 = _slicedToArray(_React$useState, 2),

var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">")),
var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx),
setCart = _useCartElementContex.setCart,

@@ -586,5 +816,11 @@ setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on

React.useLayoutEffect(function () {
if (elementRef.current === null && elements && domNode.current !== null) {
var newElement = elements.create(type, options);
if (elementRef.current === null && domNode.current !== null && (elements || customCheckoutSdk)) {
var newElement = null;
if (customCheckoutSdk) {
newElement = customCheckoutSdk.createElement(type, options);
} else if (elements) {
newElement = elements.create(type, options);
}
if (type === 'cart' && setCart) {

@@ -600,5 +836,8 @@ // we know that elements.create return value must be of type StripeCartElement if type is 'cart',

setElement(newElement);
newElement.mount(domNode.current);
if (newElement) {
newElement.mount(domNode.current);
}
}
}, [elements, options, setCart]);
}, [elements, customCheckoutSdk, options, setCart]);
var prevOptions = usePrevious(options);

@@ -637,4 +876,4 @@ React.useEffect(function () {

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

@@ -730,5 +969,2 @@ className = props.className;

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

@@ -744,5 +980,2 @@ */

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

@@ -789,2 +1022,2 @@ */

export { AddressElement, AffirmMessageElement, AfterpayClearpayMessageElement, AuBankAccountElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CartElement, Elements, ElementsConsumer, EpsBankElement, ExpressCheckoutElement, FpxBankElement, IbanElement, IdealBankElement, LinkAuthenticationElement, P24BankElement, PaymentElement, PaymentMethodMessagingElement, PaymentRequestButtonElement, ShippingAddressElement, useCartElement, useCartElementState, useElements, useStripe };
export { AddressElement, AffirmMessageElement, AfterpayClearpayMessageElement, AuBankAccountElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CartElement, CustomCheckoutProvider, Elements, ElementsConsumer, EpsBankElement, ExpressCheckoutElement, FpxBankElement, IbanElement, IdealBankElement, LinkAuthenticationElement, P24BankElement, PaymentElement, PaymentMethodMessagingElement, PaymentRequestButtonElement, ShippingAddressElement, useCartElement, useCartElementState, useCustomCheckout, useElements, useStripe };

309

dist/react-stripe.js

@@ -79,2 +79,38 @@ 'use strict';

function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _slicedToArray(arr, i) {

@@ -233,2 +269,4 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();

var validateStripe = function validateStripe(maybeStripe) {
var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
if (maybeStripe === null || isStripe(maybeStripe)) {

@@ -238,14 +276,18 @@ return maybeStripe;

throw new Error(INVALID_STRIPE_ERROR);
throw new Error(errorMsg);
};
var parseStripeProp = function parseStripeProp(raw) {
var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
if (isPromise(raw)) {
return {
tag: 'async',
stripePromise: Promise.resolve(raw).then(validateStripe)
stripePromise: Promise.resolve(raw).then(function (result) {
return validateStripe(result, errorMsg);
})
};
}
var stripe = validateStripe(raw);
var stripe = validateStripe(raw, errorMsg);

@@ -264,2 +306,193 @@ if (stripe === null) {

var registerWithStripeJs = function registerWithStripeJs(stripe) {
if (!stripe || !stripe._registerWrapper || !stripe.registerAppInfo) {
return;
}
stripe._registerWrapper({
name: 'react-stripe-js',
version: "2.2.0"
});
stripe.registerAppInfo({
name: 'react-stripe-js',
version: "2.2.0",
url: 'https://stripe.com/docs/stripe-js/react'
});
};
var _excluded = ["on", "session"];
var CustomCheckoutSdkContext = /*#__PURE__*/React.createContext(null);
CustomCheckoutSdkContext.displayName = 'CustomCheckoutSdkContext';
var parseCustomCheckoutSdkContext = function parseCustomCheckoutSdkContext(ctx, useCase) {
if (!ctx) {
throw new Error("Could not find CustomCheckoutProvider context; You need to wrap the part of your app that ".concat(useCase, " in an <CustomCheckoutProvider> provider."));
}
return ctx;
};
var CustomCheckoutContext = /*#__PURE__*/React.createContext(null);
CustomCheckoutContext.displayName = 'CustomCheckoutContext';
var extractCustomCheckoutContextValue = function extractCustomCheckoutContextValue(customCheckoutSdk, sessionState) {
if (!customCheckoutSdk) {
return null;
}
var _on = customCheckoutSdk.on,
_session = customCheckoutSdk.session,
actions = _objectWithoutProperties(customCheckoutSdk, _excluded);
if (!sessionState) {
return _objectSpread2(_objectSpread2({}, actions), customCheckoutSdk.session());
}
return _objectSpread2(_objectSpread2({}, actions), sessionState);
};
var INVALID_STRIPE_ERROR$1 = '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.';
var CustomCheckoutProvider = function CustomCheckoutProvider(_ref) {
var rawStripeProp = _ref.stripe,
options = _ref.options,
children = _ref.children;
var parsed = React.useMemo(function () {
return parseStripeProp(rawStripeProp, INVALID_STRIPE_ERROR$1);
}, [rawStripeProp]); // State used to trigger a re-render when sdk.session is updated
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
session = _React$useState2[0],
setSession = _React$useState2[1];
var _React$useState3 = React.useState(function () {
return {
stripe: parsed.tag === 'sync' ? parsed.stripe : null,
customCheckoutSdk: null
};
}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
ctx = _React$useState4[0],
setContext = _React$useState4[1];
var safeSetContext = function safeSetContext(stripe, customCheckoutSdk) {
setContext(function (ctx) {
if (ctx.stripe && ctx.customCheckoutSdk) {
return ctx;
}
return {
stripe: stripe,
customCheckoutSdk: customCheckoutSdk
};
});
}; // Ref used to avoid calling initCustomCheckout multiple times when options changes
var initCustomCheckoutCalledRef = React.useRef(false);
React.useEffect(function () {
var isMounted = true;
if (parsed.tag === 'async' && !ctx.stripe) {
parsed.stripePromise.then(function (stripe) {
if (stripe && isMounted && !initCustomCheckoutCalledRef.current) {
// Only update context if the component is still mounted
// and stripe is not null. We allow stripe to be null to make
// handling SSR easier.
initCustomCheckoutCalledRef.current = true;
stripe.initCustomCheckout(options).then(function (customCheckoutSdk) {
if (customCheckoutSdk) {
safeSetContext(stripe, customCheckoutSdk);
customCheckoutSdk.on('change', setSession);
}
});
}
});
} else if (parsed.tag === 'sync' && parsed.stripe && !initCustomCheckoutCalledRef.current) {
initCustomCheckoutCalledRef.current = true;
parsed.stripe.initCustomCheckout(options).then(function (customCheckoutSdk) {
if (customCheckoutSdk) {
safeSetContext(parsed.stripe, customCheckoutSdk);
customCheckoutSdk.on('change', setSession);
}
});
}
return function () {
isMounted = false;
};
}, [parsed, ctx, options, setSession]); // Warn on changes to stripe prop
var prevStripe = usePrevious(rawStripeProp);
React.useEffect(function () {
if (prevStripe !== null && prevStripe !== rawStripeProp) {
console.warn('Unsupported prop change on CustomCheckoutProvider: 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 () {
var _prevOptions$elements, _options$elementsOpti;
if (!ctx.customCheckoutSdk) {
return;
}
if (options.clientSecret && !isUnknownObject(prevOptions) && !isEqual(options.clientSecret, prevOptions.clientSecret)) {
console.warn('Unsupported prop change: options.client_secret is not a mutable property.');
}
var previousAppearance = prevOptions === null || prevOptions === void 0 ? void 0 : (_prevOptions$elements = prevOptions.elementsOptions) === null || _prevOptions$elements === void 0 ? void 0 : _prevOptions$elements.appearance;
var currentAppearance = options === null || options === void 0 ? void 0 : (_options$elementsOpti = options.elementsOptions) === null || _options$elementsOpti === void 0 ? void 0 : _options$elementsOpti.appearance;
if (currentAppearance && !isEqual(currentAppearance, previousAppearance)) {
ctx.customCheckoutSdk.changeAppearance(currentAppearance);
}
}, [options, prevOptions, ctx.customCheckoutSdk]); // Attach react-stripe-js version to stripe.js instance
React.useEffect(function () {
registerWithStripeJs(ctx.stripe);
}, [ctx.stripe]);
var customCheckoutContextValue = React.useMemo(function () {
return extractCustomCheckoutContextValue(ctx.customCheckoutSdk, session);
}, [ctx.customCheckoutSdk, session]);
if (!ctx.customCheckoutSdk) {
return null;
}
return /*#__PURE__*/React.createElement(CustomCheckoutSdkContext.Provider, {
value: ctx
}, /*#__PURE__*/React.createElement(CustomCheckoutContext.Provider, {
value: customCheckoutContextValue
}, children));
};
CustomCheckoutProvider.propTypes = {
stripe: PropTypes.any,
options: PropTypes.shape({
clientSecret: PropTypes.string.isRequired,
elementsOptions: PropTypes.object
}).isRequired
};
var useCustomCheckoutSdkContextWithUseCase = function useCustomCheckoutSdkContextWithUseCase(useCaseString) {
var ctx = React.useContext(CustomCheckoutSdkContext);
return parseCustomCheckoutSdkContext(ctx, useCaseString);
};
var useElementsOrCustomCheckoutSdkContextWithUseCase = function useElementsOrCustomCheckoutSdkContextWithUseCase(useCaseString) {
var customCheckoutSdkContext = React.useContext(CustomCheckoutSdkContext);
var elementsContext = React.useContext(ElementsContext);
if (customCheckoutSdkContext && elementsContext) {
throw new Error("You cannot wrap the part of your app that ".concat(useCaseString, " in both <CustomCheckoutProvider> and <Elements> providers."));
}
if (customCheckoutSdkContext) {
return parseCustomCheckoutSdkContext(customCheckoutSdkContext, useCaseString);
}
return parseElementsContext(elementsContext, useCaseString);
};
var useCustomCheckout = function useCustomCheckout() {
// ensure it's in CustomCheckoutProvider
useCustomCheckoutSdkContextWithUseCase('calls useCustomCheckout()');
return React.useContext(CustomCheckoutContext);
};
var ElementsContext = /*#__PURE__*/React.createContext(null);

@@ -378,18 +611,3 @@ ElementsContext.displayName = 'ElementsContext';

React.useEffect(function () {
var anyStripe = ctx.stripe;
if (!anyStripe || !anyStripe._registerWrapper || !anyStripe.registerAppInfo) {
return;
}
anyStripe._registerWrapper({
name: 'react-stripe-js',
version: "2.1.2"
});
anyStripe.registerAppInfo({
name: 'react-stripe-js',
version: "2.1.2",
url: 'https://stripe.com/docs/stripe-js/react'
});
registerWithStripeJs(ctx.stripe);
}, [ctx.stripe]);

@@ -415,4 +633,16 @@ return /*#__PURE__*/React.createElement(ElementsContext.Provider, {

};
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);

@@ -435,4 +665,4 @@ };

var useStripe = function useStripe() {
var _useElementsContextWi2 = useElementsContextWithUseCase('calls useStripe()'),
stripe = _useElementsContextWi2.stripe;
var _useElementsOrCustomC = useElementsOrCustomCheckoutSdkContextWithUseCase('calls useStripe()'),
stripe = _useElementsOrCustomC.stripe;

@@ -528,6 +758,6 @@ return stripe;

onShippingRateChange = _ref.onShippingRateChange;
var ctx = useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
var elements = 'elements' in ctx ? ctx.elements : null;
var customCheckoutSdk = 'customCheckoutSdk' in ctx ? ctx.customCheckoutSdk : null;
var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
elements = _useElementsContextWi.elements;
var _React$useState = React.useState(null),

@@ -541,3 +771,3 @@ _React$useState2 = _slicedToArray(_React$useState, 2),

var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">")),
var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx),
setCart = _useCartElementContex.setCart,

@@ -592,5 +822,11 @@ setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on

React.useLayoutEffect(function () {
if (elementRef.current === null && elements && domNode.current !== null) {
var newElement = elements.create(type, options);
if (elementRef.current === null && domNode.current !== null && (elements || customCheckoutSdk)) {
var newElement = null;
if (customCheckoutSdk) {
newElement = customCheckoutSdk.createElement(type, options);
} else if (elements) {
newElement = elements.create(type, options);
}
if (type === 'cart' && setCart) {

@@ -606,5 +842,8 @@ // we know that elements.create return value must be of type StripeCartElement if type is 'cart',

setElement(newElement);
newElement.mount(domNode.current);
if (newElement) {
newElement.mount(domNode.current);
}
}
}, [elements, options, setCart]);
}, [elements, customCheckoutSdk, options, setCart]);
var prevOptions = usePrevious(options);

@@ -643,4 +882,4 @@ React.useEffect(function () {

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

@@ -736,5 +975,2 @@ className = props.className;

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

@@ -750,5 +986,2 @@ */

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

@@ -804,2 +1037,3 @@ */

exports.CartElement = CartElement;
exports.CustomCheckoutProvider = CustomCheckoutProvider;
exports.Elements = Elements;

@@ -820,3 +1054,4 @@ exports.ElementsConsumer = ElementsConsumer;

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

23

dist/react-stripe.umd.d.ts

@@ -707,2 +707,17 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";

declare const ElementsConsumer: FunctionComponent<ElementsConsumerProps>;
interface CustomCheckoutContextValue extends stripeJs.StripeCustomCheckoutActions, stripeJs.StripeCustomCheckoutSession {
}
interface CustomCheckoutProviderProps {
/**
* A [Stripe object](https://stripe.com/docs/js/initializing) or a `Promise` resolving to a `Stripe` object.
* The easiest way to initialize a `Stripe` object is with the the [Stripe.js wrapper module](https://github.com/stripe/stripe-js/blob/master/README.md#readme).
* Once this prop has been set, it can not be changed.
*
* You can also pass in `null` or a `Promise` resolving to `null` if you are performing an initial server-side render or when generating a static site.
*/
stripe: PromiseLike<stripeJs.Stripe | null> | stripeJs.Stripe | null;
options: stripeJs.StripeCustomCheckoutOptions;
}
declare const CustomCheckoutProvider: FunctionComponent<PropsWithChildren<CustomCheckoutProviderProps>>;
declare const useCustomCheckout: () => CustomCheckoutContextValue | null;
/**

@@ -753,5 +768,2 @@ * Requires beta access:

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

@@ -765,5 +777,2 @@ */

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

@@ -802,2 +811,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, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, 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, 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, useStripe, useElements, useCartElement, useCartElementState, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };

309

dist/react-stripe.umd.js

@@ -78,2 +78,38 @@ (function (global, factory) {

function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
function _slicedToArray(arr, i) {

@@ -310,2 +346,4 @@ return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();

var validateStripe = function validateStripe(maybeStripe) {
var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
if (maybeStripe === null || isStripe(maybeStripe)) {

@@ -315,14 +353,18 @@ return maybeStripe;

throw new Error(INVALID_STRIPE_ERROR);
throw new Error(errorMsg);
};
var parseStripeProp = function parseStripeProp(raw) {
var errorMsg = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INVALID_STRIPE_ERROR;
if (isPromise(raw)) {
return {
tag: 'async',
stripePromise: Promise.resolve(raw).then(validateStripe)
stripePromise: Promise.resolve(raw).then(function (result) {
return validateStripe(result, errorMsg);
})
};
}
var stripe = validateStripe(raw);
var stripe = validateStripe(raw, errorMsg);

@@ -341,2 +383,193 @@ if (stripe === null) {

var registerWithStripeJs = function registerWithStripeJs(stripe) {
if (!stripe || !stripe._registerWrapper || !stripe.registerAppInfo) {
return;
}
stripe._registerWrapper({
name: 'react-stripe-js',
version: "2.2.0"
});
stripe.registerAppInfo({
name: 'react-stripe-js',
version: "2.2.0",
url: 'https://stripe.com/docs/stripe-js/react'
});
};
var _excluded = ["on", "session"];
var CustomCheckoutSdkContext = /*#__PURE__*/React.createContext(null);
CustomCheckoutSdkContext.displayName = 'CustomCheckoutSdkContext';
var parseCustomCheckoutSdkContext = function parseCustomCheckoutSdkContext(ctx, useCase) {
if (!ctx) {
throw new Error("Could not find CustomCheckoutProvider context; You need to wrap the part of your app that ".concat(useCase, " in an <CustomCheckoutProvider> provider."));
}
return ctx;
};
var CustomCheckoutContext = /*#__PURE__*/React.createContext(null);
CustomCheckoutContext.displayName = 'CustomCheckoutContext';
var extractCustomCheckoutContextValue = function extractCustomCheckoutContextValue(customCheckoutSdk, sessionState) {
if (!customCheckoutSdk) {
return null;
}
var _on = customCheckoutSdk.on,
_session = customCheckoutSdk.session,
actions = _objectWithoutProperties(customCheckoutSdk, _excluded);
if (!sessionState) {
return _objectSpread2(_objectSpread2({}, actions), customCheckoutSdk.session());
}
return _objectSpread2(_objectSpread2({}, actions), sessionState);
};
var INVALID_STRIPE_ERROR$1 = '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.';
var CustomCheckoutProvider = function CustomCheckoutProvider(_ref) {
var rawStripeProp = _ref.stripe,
options = _ref.options,
children = _ref.children;
var parsed = React.useMemo(function () {
return parseStripeProp(rawStripeProp, INVALID_STRIPE_ERROR$1);
}, [rawStripeProp]); // State used to trigger a re-render when sdk.session is updated
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
session = _React$useState2[0],
setSession = _React$useState2[1];
var _React$useState3 = React.useState(function () {
return {
stripe: parsed.tag === 'sync' ? parsed.stripe : null,
customCheckoutSdk: null
};
}),
_React$useState4 = _slicedToArray(_React$useState3, 2),
ctx = _React$useState4[0],
setContext = _React$useState4[1];
var safeSetContext = function safeSetContext(stripe, customCheckoutSdk) {
setContext(function (ctx) {
if (ctx.stripe && ctx.customCheckoutSdk) {
return ctx;
}
return {
stripe: stripe,
customCheckoutSdk: customCheckoutSdk
};
});
}; // Ref used to avoid calling initCustomCheckout multiple times when options changes
var initCustomCheckoutCalledRef = React.useRef(false);
React.useEffect(function () {
var isMounted = true;
if (parsed.tag === 'async' && !ctx.stripe) {
parsed.stripePromise.then(function (stripe) {
if (stripe && isMounted && !initCustomCheckoutCalledRef.current) {
// Only update context if the component is still mounted
// and stripe is not null. We allow stripe to be null to make
// handling SSR easier.
initCustomCheckoutCalledRef.current = true;
stripe.initCustomCheckout(options).then(function (customCheckoutSdk) {
if (customCheckoutSdk) {
safeSetContext(stripe, customCheckoutSdk);
customCheckoutSdk.on('change', setSession);
}
});
}
});
} else if (parsed.tag === 'sync' && parsed.stripe && !initCustomCheckoutCalledRef.current) {
initCustomCheckoutCalledRef.current = true;
parsed.stripe.initCustomCheckout(options).then(function (customCheckoutSdk) {
if (customCheckoutSdk) {
safeSetContext(parsed.stripe, customCheckoutSdk);
customCheckoutSdk.on('change', setSession);
}
});
}
return function () {
isMounted = false;
};
}, [parsed, ctx, options, setSession]); // Warn on changes to stripe prop
var prevStripe = usePrevious(rawStripeProp);
React.useEffect(function () {
if (prevStripe !== null && prevStripe !== rawStripeProp) {
console.warn('Unsupported prop change on CustomCheckoutProvider: 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 () {
var _prevOptions$elements, _options$elementsOpti;
if (!ctx.customCheckoutSdk) {
return;
}
if (options.clientSecret && !isUnknownObject(prevOptions) && !isEqual(options.clientSecret, prevOptions.clientSecret)) {
console.warn('Unsupported prop change: options.client_secret is not a mutable property.');
}
var previousAppearance = prevOptions === null || prevOptions === void 0 ? void 0 : (_prevOptions$elements = prevOptions.elementsOptions) === null || _prevOptions$elements === void 0 ? void 0 : _prevOptions$elements.appearance;
var currentAppearance = options === null || options === void 0 ? void 0 : (_options$elementsOpti = options.elementsOptions) === null || _options$elementsOpti === void 0 ? void 0 : _options$elementsOpti.appearance;
if (currentAppearance && !isEqual(currentAppearance, previousAppearance)) {
ctx.customCheckoutSdk.changeAppearance(currentAppearance);
}
}, [options, prevOptions, ctx.customCheckoutSdk]); // Attach react-stripe-js version to stripe.js instance
React.useEffect(function () {
registerWithStripeJs(ctx.stripe);
}, [ctx.stripe]);
var customCheckoutContextValue = React.useMemo(function () {
return extractCustomCheckoutContextValue(ctx.customCheckoutSdk, session);
}, [ctx.customCheckoutSdk, session]);
if (!ctx.customCheckoutSdk) {
return null;
}
return /*#__PURE__*/React.createElement(CustomCheckoutSdkContext.Provider, {
value: ctx
}, /*#__PURE__*/React.createElement(CustomCheckoutContext.Provider, {
value: customCheckoutContextValue
}, children));
};
CustomCheckoutProvider.propTypes = {
stripe: propTypes.any,
options: propTypes.shape({
clientSecret: propTypes.string.isRequired,
elementsOptions: propTypes.object
}).isRequired
};
var useCustomCheckoutSdkContextWithUseCase = function useCustomCheckoutSdkContextWithUseCase(useCaseString) {
var ctx = React.useContext(CustomCheckoutSdkContext);
return parseCustomCheckoutSdkContext(ctx, useCaseString);
};
var useElementsOrCustomCheckoutSdkContextWithUseCase = function useElementsOrCustomCheckoutSdkContextWithUseCase(useCaseString) {
var customCheckoutSdkContext = React.useContext(CustomCheckoutSdkContext);
var elementsContext = React.useContext(ElementsContext);
if (customCheckoutSdkContext && elementsContext) {
throw new Error("You cannot wrap the part of your app that ".concat(useCaseString, " in both <CustomCheckoutProvider> and <Elements> providers."));
}
if (customCheckoutSdkContext) {
return parseCustomCheckoutSdkContext(customCheckoutSdkContext, useCaseString);
}
return parseElementsContext(elementsContext, useCaseString);
};
var useCustomCheckout = function useCustomCheckout() {
// ensure it's in CustomCheckoutProvider
useCustomCheckoutSdkContextWithUseCase('calls useCustomCheckout()');
return React.useContext(CustomCheckoutContext);
};
var ElementsContext = /*#__PURE__*/React.createContext(null);

@@ -455,18 +688,3 @@ ElementsContext.displayName = 'ElementsContext';

React.useEffect(function () {
var anyStripe = ctx.stripe;
if (!anyStripe || !anyStripe._registerWrapper || !anyStripe.registerAppInfo) {
return;
}
anyStripe._registerWrapper({
name: 'react-stripe-js',
version: "2.1.2"
});
anyStripe.registerAppInfo({
name: 'react-stripe-js',
version: "2.1.2",
url: 'https://stripe.com/docs/stripe-js/react'
});
registerWithStripeJs(ctx.stripe);
}, [ctx.stripe]);

@@ -492,4 +710,16 @@ return /*#__PURE__*/React.createElement(ElementsContext.Provider, {

};
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);

@@ -512,4 +742,4 @@ };

var useStripe = function useStripe() {
var _useElementsContextWi2 = useElementsContextWithUseCase('calls useStripe()'),
stripe = _useElementsContextWi2.stripe;
var _useElementsOrCustomC = useElementsOrCustomCheckoutSdkContextWithUseCase('calls useStripe()'),
stripe = _useElementsOrCustomC.stripe;

@@ -605,6 +835,6 @@ return stripe;

onShippingRateChange = _ref.onShippingRateChange;
var ctx = useElementsOrCustomCheckoutSdkContextWithUseCase("mounts <".concat(displayName, ">"));
var elements = 'elements' in ctx ? ctx.elements : null;
var customCheckoutSdk = 'customCheckoutSdk' in ctx ? ctx.customCheckoutSdk : null;
var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
elements = _useElementsContextWi.elements;
var _React$useState = React.useState(null),

@@ -618,3 +848,3 @@ _React$useState2 = _slicedToArray(_React$useState, 2),

var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">")),
var _useCartElementContex = useCartElementContextWithUseCase("mounts <".concat(displayName, ">"), 'customCheckoutSdk' in ctx),
setCart = _useCartElementContex.setCart,

@@ -669,5 +899,11 @@ setCartState = _useCartElementContex.setCartState; // For every event where the merchant provides a callback, call element.on

React.useLayoutEffect(function () {
if (elementRef.current === null && elements && domNode.current !== null) {
var newElement = elements.create(type, options);
if (elementRef.current === null && domNode.current !== null && (elements || customCheckoutSdk)) {
var newElement = null;
if (customCheckoutSdk) {
newElement = customCheckoutSdk.createElement(type, options);
} else if (elements) {
newElement = elements.create(type, options);
}
if (type === 'cart' && setCart) {

@@ -683,5 +919,8 @@ // we know that elements.create return value must be of type StripeCartElement if type is 'cart',

setElement(newElement);
newElement.mount(domNode.current);
if (newElement) {
newElement.mount(domNode.current);
}
}
}, [elements, options, setCart]);
}, [elements, customCheckoutSdk, options, setCart]);
var prevOptions = usePrevious(options);

@@ -720,4 +959,4 @@ React.useEffect(function () {

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

@@ -813,5 +1052,2 @@ className = props.className;

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

@@ -827,5 +1063,2 @@ */

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

@@ -881,2 +1114,3 @@ */

exports.CartElement = CartElement;
exports.CustomCheckoutProvider = CustomCheckoutProvider;
exports.Elements = Elements;

@@ -897,2 +1131,3 @@ exports.ElementsConsumer = ElementsConsumer;

exports.useCartElementState = useCartElementState;
exports.useCustomCheckout = useCustomCheckout;
exports.useElements = useElements;

@@ -899,0 +1134,0 @@ exports.useStripe = useStripe;

23

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

@@ -707,2 +707,17 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";

declare const ElementsConsumer: FunctionComponent<ElementsConsumerProps>;
interface CustomCheckoutContextValue extends stripeJs.StripeCustomCheckoutActions, stripeJs.StripeCustomCheckoutSession {
}
interface CustomCheckoutProviderProps {
/**
* A [Stripe object](https://stripe.com/docs/js/initializing) or a `Promise` resolving to a `Stripe` object.
* The easiest way to initialize a `Stripe` object is with the the [Stripe.js wrapper module](https://github.com/stripe/stripe-js/blob/master/README.md#readme).
* Once this prop has been set, it can not be changed.
*
* You can also pass in `null` or a `Promise` resolving to `null` if you are performing an initial server-side render or when generating a static site.
*/
stripe: PromiseLike<stripeJs.Stripe | null> | stripeJs.Stripe | null;
options: stripeJs.StripeCustomCheckoutOptions;
}
declare const CustomCheckoutProvider: FunctionComponent<PropsWithChildren<CustomCheckoutProviderProps>>;
declare const useCustomCheckout: () => CustomCheckoutContextValue | null;
/**

@@ -753,5 +768,2 @@ * Requires beta access:

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

@@ -765,5 +777,2 @@ */

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

@@ -802,2 +811,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, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, 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, 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, useStripe, useElements, useCartElement, useCartElementState, Elements, ElementsConsumer, useCustomCheckout, CustomCheckoutProvider, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, ExpressCheckoutElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, 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=e||self).ReactStripe={},e.React)}(this,(function(e,t){"use strict";function n(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function r(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?n(Object(r),!0).forEach((function(t){c(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function o(e){return(o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function c(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,o,c=[],a=!0,u=!1;try{for(n=n.call(e);!(a=(r=n.next()).done)&&(c.push(r.value),!t||c.length!==t);a=!0);}catch(e){u=!0,o=e}finally{try{a||null==n.return||n.return()}finally{if(u)throw o}}return c}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return u(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return u(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function u(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function i(){}function s(){}s.resetWarningCache=i;var l=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,c){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==c){var a=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw a.name="Invariant Violation",a}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:s,resetWarningCache:i};return n.PropTypes=n,n}()})),f=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},p=function(e){return null!==e&&"object"===o(e)},m=function(e,t,n){return p(e)?Object.keys(e).reduce((function(o,a){var u=!p(t)||!function e(t,n){if(!p(t)||!p(n))return t===n;var r=Array.isArray(t);if(r!==Array.isArray(n))return!1;var o="[object Object]"===Object.prototype.toString.call(t);if(o!==("[object Object]"===Object.prototype.toString.call(n)))return!1;if(!o&&!r)return t===n;var c=Object.keys(t),a=Object.keys(n);if(c.length!==a.length)return!1;for(var u={},i=0;i<c.length;i+=1)u[c[i]]=!0;for(var s=0;s<a.length;s+=1)u[a[s]]=!0;var l=Object.keys(u);if(l.length!==c.length)return!1;var f=t,m=n;return l.every((function(t){return e(f[t],m[t])}))}(e[a],t[a]);return n.includes(a)?(u&&console.warn("Unsupported prop change: options.".concat(a," is not a mutable property.")),o):u?r(r({},o||{}),{},c({},a,e[a])):o}),null):null},y=function(e){if(null===e||p(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;var t;throw new Error("Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")},d=function(e){if(function(e){return p(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(y)};var t=y(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},h=t.createContext(null);h.displayName="ElementsContext";var g=t.createContext(null);g.displayName="CartElementContext";var E=function(e){var n=e.stripe,r=e.options,o=e.children,c=t.useMemo((function(){return d(n)}),[n]),u=a(t.useState(null),2),i=u[0],s=u[1],l=a(t.useState(null),2),p=l[0],y=l[1],E=a(t.useState((function(){return{stripe:"sync"===c.tag?c.stripe:null,elements:"sync"===c.tag?c.stripe.elements(r):null}})),2),b=E[0],v=E[1];t.useEffect((function(){var e=!0,t=function(e){v((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==c.tag||b.stripe?"sync"!==c.tag||b.stripe||t(c.stripe):c.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[c,b,r]);var C=f(n);t.useEffect((function(){null!==C&&C!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[C,n]);var S=f(r);return t.useEffect((function(){if(b.elements){var e=m(r,S,["clientSecret","fonts"]);e&&b.elements.update(e)}}),[r,S,b.elements]),t.useEffect((function(){var e=b.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"2.1.2"}),e.registerAppInfo({name:"react-stripe-js",version:"2.1.2",url:"https://stripe.com/docs/stripe-js/react"}))}),[b.stripe]),t.createElement(h.Provider,{value:b},t.createElement(g.Provider,{value:{cart:i,setCart:s,cartState:p,setCartState:y}},o))};E.propTypes={stripe:l.any,options:l.object};var b=function(e){return function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e}(t.useContext(h),e)},v=function(e){return function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e}(t.useContext(g),e)},C=function(e){return(0,e.children)(b("mounts <ElementsConsumer>"))};C.propTypes={children:l.func.isRequired};var S=function(e,n,r){var o=!!r,c=t.useRef(r);t.useEffect((function(){c.current=r}),[r]),t.useEffect((function(){if(!o||!e)return function(){};var t=function(){c.current&&c.current.apply(c,arguments)};return e.on(n,t),function(){e.off(n,t)}}),[o,n,e,c])},O=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=n?function(e){b("mounts <".concat(o,">")),v("mounts <".concat(o,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r,c=n.id,u=n.className,i=n.options,s=void 0===i?{}:i,l=n.onBlur,p=n.onFocus,y=n.onReady,d=n.onChange,h=n.onEscape,g=n.onClick,E=n.onLoadError,C=n.onLoaderStart,O=n.onNetworksChange,j=n.onCheckout,k=n.onLineItemClick,w=n.onConfirm,P=n.onCancel,A=n.onShippingAddressChange,x=n.onShippingRateChange,R=b("mounts <".concat(o,">")).elements,T=a(t.useState(null),2),B=T[0],_=T[1],I=t.useRef(null),N=t.useRef(null),M=v("mounts <".concat(o,">")),L=M.setCart,q=M.setCartState;S(B,"blur",l),S(B,"focus",p),S(B,"escape",h),S(B,"click",g),S(B,"loaderror",E),S(B,"loaderstart",C),S(B,"networkschange",O),S(B,"lineitemclick",k),S(B,"confirm",w),S(B,"cancel",P),S(B,"shippingaddresschange",A),S(B,"shippingratechange",x),"cart"===e?r=function(e){q(e),y&&y(e)}:y&&(r="expressCheckout"===e?y:function(){y(B)}),S(B,"ready",r),S(B,"change","cart"===e?function(e){q(e),d&&d(e)}:d),S(B,"checkout","cart"===e?function(e){q(e),j&&j(e)}:j),t.useLayoutEffect((function(){if(null===I.current&&R&&null!==N.current){var t=R.create(e,s);"cart"===e&&L&&L(t),I.current=t,_(t),t.mount(N.current)}}),[R,s,L]);var D=f(s);return t.useEffect((function(){if(I.current){var e=m(s,D,["paymentRequest"]);e&&I.current.update(e)}}),[s,D]),t.useLayoutEffect((function(){return function(){if(I.current&&"function"==typeof I.current.destroy)try{I.current.destroy(),I.current=null}catch(e){}}}),[]),t.createElement("div",{id:c,className:u,ref:N})};return c.propTypes={id:l.string,className:l.string,onChange:l.func,onBlur:l.func,onFocus:l.func,onReady:l.func,onEscape:l.func,onClick:l.func,onLoadError:l.func,onLoaderStart:l.func,onNetworksChange:l.func,onCheckout:l.func,onLineItemClick:l.func,onConfirm:l.func,onCancel:l.func,onShippingAddressChange:l.func,onShippingRateChange:l.func,options:l.object},c.displayName=o,c.__elementType=e,c},j="undefined"==typeof window,k=O("auBankAccount",j),w=O("card",j),P=O("cardNumber",j),A=O("cardExpiry",j),x=O("cardCvc",j),R=O("fpxBank",j),T=O("iban",j),B=O("idealBank",j),_=O("p24Bank",j),I=O("epsBank",j),N=O("payment",j),M=O("expressCheckout",j),L=O("paymentRequestButton",j),q=O("linkAuthentication",j),D=O("address",j),U=O("shippingAddress",j),W=O("cart",j),F=O("paymentMethodMessaging",j),Y=O("affirmMessage",j),H=O("afterpayClearpayMessage",j);e.AddressElement=D,e.AffirmMessageElement=Y,e.AfterpayClearpayMessageElement=H,e.AuBankAccountElement=k,e.CardCvcElement=x,e.CardElement=w,e.CardExpiryElement=A,e.CardNumberElement=P,e.CartElement=W,e.Elements=E,e.ElementsConsumer=C,e.EpsBankElement=I,e.ExpressCheckoutElement=M,e.FpxBankElement=R,e.IbanElement=T,e.IdealBankElement=B,e.LinkAuthenticationElement=q,e.P24BankElement=_,e.PaymentElement=N,e.PaymentMethodMessagingElement=F,e.PaymentRequestButtonElement=L,e.ShippingAddressElement=U,e.useCartElement=function(){return v("calls useCartElement()").cart},e.useCartElementState=function(){return v("calls useCartElementState()").cartState},e.useElements=function(){return b("calls useElements()").elements},e.useStripe=function(){return b("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));
!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){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})(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}t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function s(){}function l(){}l.resetWarningCache=s;var p=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,u){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==u){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:l,resetWarningCache:s};return n.PropTypes=n,n}()})),f=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},m=function(e){return null!==e&&"object"===o(e)},d=function(e){return m(e)&&"function"==typeof e.then},y=function(e){return m(e)&&"function"==typeof e.elements&&"function"==typeof e.createToken&&"function"==typeof e.createPaymentMethod&&"function"==typeof e.confirmCardPayment},h=function e(t,n){if(!m(t)||!m(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 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])}))},C=function(e,t,n){return m(e)?Object.keys(e).reduce((function(o,c){var i=!m(t)||!h(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},v="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.",g=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:v;if(null===e||y(e))return e;throw new Error(t)},E=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:v;if(d(e))return{tag:"async",stripePromise:Promise.resolve(e).then((function(e){return g(e,t)}))};var n=g(e,t);return null===n?{tag:"empty"}:{tag:"sync",stripe:n}},k=function(e){e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"2.2.0"}),e.registerAppInfo({name:"react-stripe-js",version:"2.2.0",url:"https://stripe.com/docs/stripe-js/react"}))},b=["on","session"],S=t.createContext(null);S.displayName="CustomCheckoutSdkContext";var O=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},j=t.createContext(null);j.displayName="CustomCheckoutContext";var w=function(e){var n=e.stripe,o=e.options,u=e.children,a=t.useMemo((function(){return E(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],d=i(t.useState((function(){return{stripe:"sync"===a.tag?a.stripe:null,customCheckoutSdk:null}})),2),y=d[0],C=d[1],v=function(e,t){C((function(n){return n.stripe&&n.customCheckoutSdk?n:{stripe:e,customCheckoutSdk:t}}))},g=t.useRef(!1);t.useEffect((function(){var e=!0;return"async"!==a.tag||y.stripe?"sync"===a.tag&&a.stripe&&!g.current&&(g.current=!0,a.stripe.initCustomCheckout(o).then((function(e){e&&(v(a.stripe,e),e.on("change",p))}))):a.stripePromise.then((function(t){t&&e&&!g.current&&(g.current=!0,t.initCustomCheckout(o).then((function(e){e&&(v(t,e),e.on("change",p))})))})),function(){e=!1}}),[a,y,o,p]);var O=f(n);t.useEffect((function(){null!==O&&O!==n&&console.warn("Unsupported prop change on CustomCheckoutProvider: You cannot change the `stripe` prop after setting it.")}),[O,n]);var w=f(o);t.useEffect((function(){var e,t;if(y.customCheckoutSdk){!o.clientSecret||m(w)||h(o.clientSecret,w.clientSecret)||console.warn("Unsupported prop change: options.client_secret is not a mutable property.");var n=null==w||null===(e=w.elementsOptions)||void 0===e?void 0:e.appearance,r=null==o||null===(t=o.elementsOptions)||void 0===t?void 0:t.appearance;r&&!h(r,n)&&y.customCheckoutSdk.changeAppearance(r)}}),[o,w,y.customCheckoutSdk]),t.useEffect((function(){k(y.stripe)}),[y.stripe]);var P=t.useMemo((function(){return function(e,t){if(!e)return null;e.on,e.session;var n=c(e,b);return r(r({},n),t||e.session())}(y.customCheckoutSdk,l)}),[y.customCheckoutSdk,l]);return y.customCheckoutSdk?t.createElement(S.Provider,{value:y},t.createElement(j.Provider,{value:P},u)):null};w.propTypes={stripe:p.any,options:p.shape({clientSecret:p.string.isRequired,elementsOptions:p.object}).isRequired};var P=function(e){var n=t.useContext(S),r=t.useContext(x);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?O(n,e):A(r,e)},x=t.createContext(null);x.displayName="ElementsContext";var A=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=t.createContext(null);R.displayName="CartElementContext";var T=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},I=function(e){var n=e.stripe,r=e.options,o=e.children,u=t.useMemo((function(){return E(n)}),[n]),c=i(t.useState(null),2),a=c[0],s=c[1],l=i(t.useState(null),2),p=l[0],m=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),y=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||y.stripe?"sync"!==u.tag||y.stripe||t(u.stripe):u.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[u,y,r]);var v=f(n);t.useEffect((function(){null!==v&&v!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[v,n]);var g=f(r);return t.useEffect((function(){if(y.elements){var e=C(r,g,["clientSecret","fonts"]);e&&y.elements.update(e)}}),[r,g,y.elements]),t.useEffect((function(){k(y.stripe)}),[y.stripe]),t.createElement(x.Provider,{value:y},t.createElement(R.Provider,{value:{cart:a,setCart:s,cartState:p,setCartState:m}},o))};I.propTypes={stripe:p.any,options:p.object};var _=function(e){var n=t.useContext(x);return A(n,e)},B={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(R);return n?B:T(r,e)},M=function(e){return(0,e.children)(_("mounts <ElementsConsumer>"))};M.propTypes={children:p.func.isRequired};var L=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])},q=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),u=n?function(e){var n=P("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,m=n.onReady,d=n.onChange,y=n.onEscape,h=n.onClick,v=n.onLoadError,g=n.onLoaderStart,E=n.onNetworksChange,k=n.onCheckout,b=n.onLineItemClick,S=n.onConfirm,O=n.onCancel,j=n.onShippingAddressChange,w=n.onShippingRateChange,x=P("mounts <".concat(o,">")),A="elements"in x?x.elements:null,R="customCheckoutSdk"in x?x.customCheckoutSdk:null,T=i(t.useState(null),2),I=T[0],_=T[1],B=t.useRef(null),M=t.useRef(null),q=N("mounts <".concat(o,">"),"customCheckoutSdk"in x),U=q.setCart,W=q.setCartState;L(I,"blur",l),L(I,"focus",p),L(I,"escape",y),L(I,"click",h),L(I,"loaderror",v),L(I,"loaderstart",g),L(I,"networkschange",E),L(I,"lineitemclick",b),L(I,"confirm",S),L(I,"cancel",O),L(I,"shippingaddresschange",j),L(I,"shippingratechange",w),"cart"===e?r=function(e){W(e),m&&m(e)}:m&&(r="expressCheckout"===e?m:function(){m(I)}),L(I,"ready",r),L(I,"change","cart"===e?function(e){W(e),d&&d(e)}:d),L(I,"checkout","cart"===e?function(e){W(e),k&&k(e)}:k),t.useLayoutEffect((function(){if(null===B.current&&null!==M.current&&(A||R)){var t=null;R?t=R.createElement(e,s):A&&(t=A.create(e,s)),"cart"===e&&U&&U(t),B.current=t,_(t),t&&t.mount(M.current)}}),[A,R,s,U]);var Y=f(s);return t.useEffect((function(){if(B.current){var e=C(s,Y,["paymentRequest"]);e&&B.current.update(e)}}),[s,Y]),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:p.string,className:p.string,onChange:p.func,onBlur:p.func,onFocus:p.func,onReady:p.func,onEscape:p.func,onClick:p.func,onLoadError:p.func,onLoaderStart:p.func,onNetworksChange:p.func,onCheckout:p.func,onLineItemClick:p.func,onConfirm:p.func,onCancel:p.func,onShippingAddressChange:p.func,onShippingRateChange:p.func,options:p.object},u.displayName=o,u.__elementType=e,u},U="undefined"==typeof window,W=q("auBankAccount",U),Y=q("card",U),D=q("cardNumber",U),F=q("cardExpiry",U),H=q("cardCvc",U),V=q("fpxBank",U),$=q("iban",U),z=q("idealBank",U),G=q("p24Bank",U),J=q("epsBank",U),K=q("payment",U),Q=q("expressCheckout",U),X=q("paymentRequestButton",U),Z=q("linkAuthentication",U),ee=q("address",U),te=q("shippingAddress",U),ne=q("cart",U),re=q("paymentMethodMessaging",U),oe=q("affirmMessage",U),ue=q("afterpayClearpayMessage",U);e.AddressElement=ee,e.AffirmMessageElement=oe,e.AfterpayClearpayMessageElement=ue,e.AuBankAccountElement=W,e.CardCvcElement=H,e.CardElement=Y,e.CardExpiryElement=F,e.CardNumberElement=D,e.CartElement=ne,e.CustomCheckoutProvider=w,e.Elements=I,e.ElementsConsumer=M,e.EpsBankElement=J,e.ExpressCheckoutElement=Q,e.FpxBankElement=V,e.IbanElement=$,e.IdealBankElement=z,e.LinkAuthenticationElement=Z,e.P24BankElement=G,e.PaymentElement=K,e.PaymentMethodMessagingElement=re,e.PaymentRequestButtonElement=X,e.ShippingAddressElement=te,e.useCartElement=function(){return N("calls useCartElement()").cart},e.useCartElementState=function(){return N("calls useCartElementState()").cartState},e.useCustomCheckout=function(){var e,n;return e="calls useCustomCheckout()",n=t.useContext(S),O(n,e),t.useContext(j)},e.useElements=function(){return _("calls useElements()").elements},e.useStripe=function(){return P("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));

4

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

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

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

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

13

src/index.ts

@@ -28,4 +28,4 @@ import createElementComponent from './components/createElementComponent';

export {
useStripe,
useElements,
useStripe,
useCartElement,

@@ -37,2 +37,7 @@ useCartElementState,

export {
useCustomCheckout,
CustomCheckoutProvider,
} from './components/CustomCheckout';
const isServer = typeof window === 'undefined';

@@ -129,5 +134,2 @@

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

@@ -149,5 +151,2 @@ */

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

@@ -154,0 +153,0 @@ */

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