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

Comparing version 1.0.2 to 1.0.3

657

dist/react-stripe.esm.js

		import React from 'react';
		import PropTypes from 'prop-types';

		const isUnknownObject = (raw) => {
		return raw !== null && typeof raw === 'object';
		function _typeof(obj) {
		"@babel/helpers - typeof";

		if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
		_typeof = function (obj) {
		return typeof obj;
		};
		} else {
		_typeof = function (obj) {
		return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
		};
		}

		return _typeof(obj);
		}

		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) {
		return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _nonIterableRest();
		}

		function _arrayWithHoles(arr) {
		if (Array.isArray(arr)) return arr;
		}

		function _iterableToArrayLimit(arr, i) {
		if (!(Symbol.iterator in Object(arr) \|\| Object.prototype.toString.call(arr) === "[object Arguments]")) {
		return;
		}

		var _arr = [];
		var _n = true;
		var _d = false;
		var _e = undefined;

		try {
		for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
		_arr.push(_s.value);

		if (i && _arr.length === i) break;
		}
		} catch (err) {
		_d = true;
		_e = err;
		} finally {
		try {
		if (!_n && _i["return"] != null) _i["return"]();
		} finally {
		if (_d) throw _e;
		}
		}

		return _arr;
		}

		function _nonIterableRest() {
		throw new TypeError("Invalid attempt to destructure non-iterable instance");
		}

		var isUnknownObject = function isUnknownObject(raw) {
		return raw !== null && _typeof(raw) === 'object';
		};
		const isPromise = (raw) => {
		return isUnknownObject(raw) && typeof raw.then === 'function';
		};
		// We are using types to enforce the `stripe` prop in this lib,
		var isPromise = function isPromise(raw) {
		return isUnknownObject(raw) && typeof raw.then === 'function';
		}; // We are using types to enforce the `stripe` prop in this lib,
		// but in an untyped integration `stripe` could be anything, so we need
		// to do some sanity validation to prevent type errors.
		const isStripe = (raw) => {
		return (isUnknownObject(raw) &&
		typeof raw.elements === 'function' &&
		typeof raw.createToken === 'function' &&
		typeof raw.createPaymentMethod === 'function' &&
		typeof raw.confirmCardPayment === 'function');

		var isStripe = function isStripe(raw) {
		return isUnknownObject(raw) && typeof raw.elements === 'function' && typeof raw.createToken === 'function' && typeof raw.createPaymentMethod === 'function' && typeof raw.confirmCardPayment === 'function';
		};

		const PLAIN_OBJECT_STR = '[object Object]';
		const isEqual = (left, right) => {
		if (!isUnknownObject(left) \|\| !isUnknownObject(right)) {
		return left === right;
		}
		const leftArray = Array.isArray(left);
		const rightArray = Array.isArray(right);
		if (leftArray !== rightArray)
		return false;
		const leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
		const rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
		if (leftPlainObject !== rightPlainObject)
		return false;
		if (!leftPlainObject && !leftArray)
		return false;
		const leftKeys = Object.keys(left);
		const rightKeys = Object.keys(right);
		if (leftKeys.length !== rightKeys.length)
		return false;
		const keySet = {};
		for (let i = 0; i < leftKeys.length; i += 1) {
		keySet[leftKeys[i]] = true;
		}
		for (let i = 0; i < rightKeys.length; i += 1) {
		keySet[rightKeys[i]] = true;
		}
		const allKeys = Object.keys(keySet);
		if (allKeys.length !== leftKeys.length) {
		return false;
		}
		const l = left;
		const r = right;
		const pred = (key) => {
		return isEqual(l[key], r[key]);
		};
		return allKeys.every(pred);
		var PLAIN_OBJECT_STR = '[object Object]';
		var isEqual = function isEqual(left, right) {
		if (!isUnknownObject(left) \|\| !isUnknownObject(right)) {
		return left === right;
		}

		var leftArray = Array.isArray(left);
		var rightArray = Array.isArray(right);
		if (leftArray !== rightArray) return false;
		var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
		var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
		if (leftPlainObject !== rightPlainObject) return false;
		if (!leftPlainObject && !leftArray) return false;
		var leftKeys = Object.keys(left);
		var rightKeys = Object.keys(right);
		if (leftKeys.length !== rightKeys.length) return false;
		var keySet = {};

		for (var i = 0; i < leftKeys.length; i += 1) {
		keySet[leftKeys[i]] = true;
		}

		for (var _i = 0; _i < rightKeys.length; _i += 1) {
		keySet[rightKeys[_i]] = true;
		}

		var allKeys = Object.keys(keySet);

		if (allKeys.length !== leftKeys.length) {
		return false;
		}

		var l = left;
		var r = right;

		var pred = function pred(key) {
		return isEqual(l[key], r[key]);
		};

		return allKeys.every(pred);
		};

		const usePrevious = (value) => {
		const ref = React.useRef(value);
		React.useEffect(() => {
		ref.current = value;
		}, [value]);
		return ref.current;
		var usePrevious = function usePrevious(value) {
		var ref = React.useRef(value);
		React.useEffect(function () {
		ref.current = value;
		}, [value]);
		return ref.current;
		};

		const INVALID_STRIPE_ERROR = 'Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.';
		// We are using types to enforce the `stripe` prop in this lib, but in a real
		var INVALID_STRIPE_ERROR = 'Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.'; // We are using types to enforce the `stripe` prop in this lib, but in a real
		// integration `stripe` could be anything, so we need to do some sanity
		// validation to prevent type errors.
		const validateStripe = (maybeStripe) => {
		if (maybeStripe === null \|\| isStripe(maybeStripe)) {
		return maybeStripe;
		}
		throw new Error(INVALID_STRIPE_ERROR);

		var validateStripe = function validateStripe(maybeStripe) {
		if (maybeStripe === null \|\| isStripe(maybeStripe)) {
		return maybeStripe;
		}

		throw new Error(INVALID_STRIPE_ERROR);
		};
		const parseStripeProp = (raw) => {
		if (isPromise(raw)) {
		return {
		tag: 'async',
		stripePromise: Promise.resolve(raw).then(validateStripe),
		};
		}
		const stripe = validateStripe(raw);
		if (stripe === null) {
		return { tag: 'empty' };
		}
		return { tag: 'sync', stripe };

		var parseStripeProp = function parseStripeProp(raw) {
		if (isPromise(raw)) {
		return {
		tag: 'async',
		stripePromise: Promise.resolve(raw).then(validateStripe)
		};
		}

		var stripe = validateStripe(raw);

		if (stripe === null) {
		return {
		tag: 'empty'
		};
		}

		return {
		tag: 'sync',
		stripe: stripe
		};
		};
		const ElementsContext = React.createContext(null);

		var ElementsContext = React.createContext(null);
		ElementsContext.displayName = 'ElementsContext';
		const parseElementsContext = (ctx, useCase) => {
		if (!ctx) {
		throw new Error(`Could not find Elements context; You need to wrap the part of your app that ${useCase} in an <Elements> provider.`);
		}
		return ctx;
		var parseElementsContext = function parseElementsContext(ctx, useCase) {
		if (!ctx) {
		throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider."));
		}

		return ctx;
		};
		@@ -108,59 +214,79 @@ /**
		*/
		const Elements = ({ stripe: rawStripeProp, options, children, }) => {
		const final = React.useRef(false);
		const isMounted = React.useRef(true);
		const parsed = React.useMemo(() => parseStripeProp(rawStripeProp), [
		rawStripeProp,
		]);
		const [ctx, setContext] = React.useState(() => ({
		stripe: null,
		elements: null,
		}));
		const prevStripe = usePrevious(rawStripeProp);
		const prevOptions = usePrevious(options);
		if (prevStripe !== null) {
		if (prevStripe !== rawStripeProp) {
		console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
		}
		if (!isEqual(options, prevOptions)) {
		console.warn('Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.');
		}

		var Elements = function Elements(_ref) {
		var rawStripeProp = _ref.stripe,
		options = _ref.options,
		children = _ref.children;

		var _final = React.useRef(false);

		var isMounted = React.useRef(true);
		var parsed = React.useMemo(function () {
		return parseStripeProp(rawStripeProp);
		}, [rawStripeProp]);

		var _React$useState = React.useState(function () {
		return {
		stripe: null,
		elements: null
		};
		}),
		_React$useState2 = _slicedToArray(_React$useState, 2),
		ctx = _React$useState2[0],
		setContext = _React$useState2[1];

		var prevStripe = usePrevious(rawStripeProp);
		var prevOptions = usePrevious(options);

		if (prevStripe !== null) {
		if (prevStripe !== rawStripeProp) {
		console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
		}
		if (!final.current) {
		if (parsed.tag === 'sync') {
		final.current = true;
		setContext({
		stripe: parsed.stripe,
		elements: parsed.stripe.elements(options),
		});

		if (!isEqual(options, prevOptions)) {
		console.warn('Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.');
		}
		}

		if (!_final.current) {
		if (parsed.tag === 'sync') {
		_final.current = true;
		setContext({
		stripe: parsed.stripe,
		elements: parsed.stripe.elements(options)
		});
		}

		if (parsed.tag === 'async') {
		_final.current = true;
		parsed.stripePromise.then(function (stripe) {
		if (stripe && isMounted.current) {
		// Only update Elements context if the component is still mounted
		// and stripe is not null. We allow stripe to be null to make
		// handling SSR easier.
		setContext({
		stripe: stripe,
		elements: stripe.elements(options)
		});
		}
		if (parsed.tag === 'async') {
		final.current = true;
		parsed.stripePromise.then((stripe) => {
		if (stripe && isMounted.current) {
		// Only update Elements context if the component is still mounted
		// and stripe is not null. We allow stripe to be null to make
		// handling SSR easier.
		setContext({
		stripe,
		elements: stripe.elements(options),
		});
		}
		});
		}
		});
		}
		React.useEffect(() => {
		return () => {
		isMounted.current = false;
		};
		}, []);
		return (React.createElement(ElementsContext.Provider, { value: ctx }, children));
		}

		React.useEffect(function () {
		return function () {
		isMounted.current = false;
		};
		}, []);
		return React.createElement(ElementsContext.Provider, {
		value: ctx
		}, children);
		};
		Elements.propTypes = {
		stripe: PropTypes.any,
		options: PropTypes.object,
		stripe: PropTypes.any,
		options: PropTypes.object
		};
		const useElementsContextWithUseCase = (useCaseMessage) => {
		const ctx = React.useContext(ElementsContext);
		return parseElementsContext(ctx, useCaseMessage);
		var useElementsContextWithUseCase = function useElementsContextWithUseCase(useCaseMessage) {
		var ctx = React.useContext(ElementsContext);
		return parseElementsContext(ctx, useCaseMessage);
		};
		@@ -170,5 +296,8 @@ /**
		*/
		const useElements = () => {
		const { elements } = useElementsContextWithUseCase('calls useElements()');
		return elements;

		var useElements = function useElements() {
		var _useElementsContextWi = useElementsContextWithUseCase('calls useElements()'),
		elements = _useElementsContextWi.elements;

		return elements;
		};
		@@ -178,5 +307,8 @@ /**
		*/
		const useStripe = () => {
		const { stripe } = useElementsContextWithUseCase('calls useStripe()');
		return stripe;

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

		return stripe;
		};
		@@ -186,104 +318,146 @@ /**
		*/
		const ElementsConsumer = ({ children, }) => {
		const ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>');
		// Assert to satsify the busted React.FC return type (it should be ReactNode)
		return children(ctx);

		var ElementsConsumer = function ElementsConsumer(_ref2) {
		var children = _ref2.children;
		var ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>'); // Assert to satsify the busted React.FC return type (it should be ReactNode)

		return children(ctx);
		};
		ElementsConsumer.propTypes = {
		children: PropTypes.func.isRequired,
		children: PropTypes.func.isRequired
		};

		const useCallbackReference = (cb) => {
		const ref = React.useRef(cb);
		React.useEffect(() => {
		ref.current = cb;
		}, [cb]);
		return (...args) => {
		if (ref.current) {
		ref.current(...args);
		}
		};
		var useCallbackReference = function useCallbackReference(cb) {
		var ref = React.useRef(cb);
		React.useEffect(function () {
		ref.current = cb;
		}, [cb]);
		return function () {
		if (ref.current) {
		ref.current.apply(ref, arguments);
		}
		};
		};

		const extractUpdateableOptions = (options) => {
		if (!isUnknownObject(options)) {
		return {};
		}
		const { paymentRequest: _, ...rest } = options;
		return rest;
		var extractUpdateableOptions = function extractUpdateableOptions(options) {
		if (!isUnknownObject(options)) {
		return {};
		}

		var _ = options.paymentRequest,
		rest = _objectWithoutProperties(options, ["paymentRequest"]);

		return rest;
		};
		const noop = () => { };
		const capitalized = (str) => str.charAt(0).toUpperCase() + str.slice(1);
		const createElementComponent = (type, isServer) => {
		const displayName = `${capitalized(type)}Element`;
		const ClientElement = ({ id, className, options = {}, onBlur = noop, onFocus = noop, onReady = noop, onChange = noop, onClick = noop, }) => {
		const { elements } = useElementsContextWithUseCase(`mounts <${displayName}>`);
		const elementRef = React.useRef(null);
		const domNode = React.useRef(null);
		const callOnReady = useCallbackReference(onReady);
		const callOnBlur = useCallbackReference(onBlur);
		const callOnFocus = useCallbackReference(onFocus);
		const callOnClick = useCallbackReference(onClick);
		const callOnChange = useCallbackReference(onChange);
		React.useLayoutEffect(() => {
		if (elementRef.current == null && elements && domNode.current != null) {
		const element = elements.create(type, options);
		elementRef.current = element;
		element.mount(domNode.current);
		element.on('ready', () => callOnReady(element));
		element.on('change', callOnChange);
		element.on('blur', callOnBlur);
		element.on('focus', callOnFocus);
		// Users can pass an an onClick prop on any Element component
		// just as they could listen for the `click` event on any Element,
		// but only the PaymentRequestButton will actually trigger the event.
		element.on('click', callOnClick);
		}

		var noop = function noop() {};

		var capitalized = function capitalized(str) {
		return str.charAt(0).toUpperCase() + str.slice(1);
		};

		var createElementComponent = function createElementComponent(type, isServer) {
		var displayName = "".concat(capitalized(type), "Element");

		var ClientElement = function ClientElement(_ref) {
		var id = _ref.id,
		className = _ref.className,
		_ref$options = _ref.options,
		options = _ref$options === void 0 ? {} : _ref$options,
		_ref$onBlur = _ref.onBlur,
		onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur,
		_ref$onFocus = _ref.onFocus,
		onFocus = _ref$onFocus === void 0 ? noop : _ref$onFocus,
		_ref$onReady = _ref.onReady,
		onReady = _ref$onReady === void 0 ? noop : _ref$onReady,
		_ref$onChange = _ref.onChange,
		onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
		_ref$onClick = _ref.onClick,
		onClick = _ref$onClick === void 0 ? noop : _ref$onClick;

		var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
		elements = _useElementsContextWi.elements;

		var elementRef = React.useRef(null);
		var domNode = React.useRef(null);
		var callOnReady = useCallbackReference(onReady);
		var callOnBlur = useCallbackReference(onBlur);
		var callOnFocus = useCallbackReference(onFocus);
		var callOnClick = useCallbackReference(onClick);
		var callOnChange = useCallbackReference(onChange);
		React.useLayoutEffect(function () {
		if (elementRef.current == null && elements && domNode.current != null) {
		var element = elements.create(type, options);
		elementRef.current = element;
		element.mount(domNode.current);
		element.on('ready', function () {
		return callOnReady(element);
		});
		const prevOptions = React.useRef(options);
		React.useEffect(() => {
		if (prevOptions.current &&
		prevOptions.current.paymentRequest !== options.paymentRequest) {
		console.warn('Unsupported prop change: options.paymentRequest is not a customizable property.');
		}
		const updateableOptions = extractUpdateableOptions(options);
		if (Object.keys(updateableOptions).length !== 0 &&
		!isEqual(updateableOptions, extractUpdateableOptions(prevOptions.current))) {
		if (elementRef.current) {
		elementRef.current.update(updateableOptions);
		prevOptions.current = options;
		}
		}
		}, [options]);
		React.useEffect(() => () => {
		if (elementRef.current) {
		elementRef.current.destroy();
		}
		}, []);
		return React.createElement("div", { id: id, className: className, ref: domNode });
		};
		// Only render the Element wrapper in a server environment.
		const ServerElement = (props) => {
		// Validate that we are in the right context by calling useElementsContextWithUseCase.
		useElementsContextWithUseCase(`mounts <${displayName}>`);
		const { id, className } = props;
		return React.createElement("div", { id: id, className: className });
		};
		const Element = isServer ? ServerElement : ClientElement;
		Element.propTypes = {
		id: PropTypes.string,
		className: PropTypes.string,
		onChange: PropTypes.func,
		onBlur: PropTypes.func,
		onFocus: PropTypes.func,
		onReady: PropTypes.func,
		onClick: PropTypes.func,
		options: PropTypes.object,
		};
		Element.displayName = displayName;
		Element.__elementType = type;
		return Element;
		element.on('change', callOnChange);
		element.on('blur', callOnBlur);
		element.on('focus', callOnFocus); // Users can pass an an onClick prop on any Element component
		// just as they could listen for the `click` event on any Element,
		// but only the PaymentRequestButton will actually trigger the event.

		element.on('click', callOnClick);
		}
		});
		var prevOptions = React.useRef(options);
		React.useEffect(function () {
		if (prevOptions.current && prevOptions.current.paymentRequest !== options.paymentRequest) {
		console.warn('Unsupported prop change: options.paymentRequest is not a customizable property.');
		}

		var updateableOptions = extractUpdateableOptions(options);

		if (Object.keys(updateableOptions).length !== 0 && !isEqual(updateableOptions, extractUpdateableOptions(prevOptions.current))) {
		if (elementRef.current) {
		elementRef.current.update(updateableOptions);
		prevOptions.current = options;
		}
		}
		}, [options]);
		React.useEffect(function () {
		return function () {
		if (elementRef.current) {
		elementRef.current.destroy();
		}
		};
		}, []);
		return React.createElement("div", {
		id: id,
		className: className,
		ref: domNode
		});
		}; // Only render the Element wrapper in a server environment.


		var ServerElement = function ServerElement(props) {
		// Validate that we are in the right context by calling useElementsContextWithUseCase.
		useElementsContextWithUseCase("mounts <".concat(displayName, ">"));
		var id = props.id,
		className = props.className;
		return React.createElement("div", {
		id: id,
		className: className
		});
		};

		var Element = isServer ? ServerElement : ClientElement;
		Element.propTypes = {
		id: PropTypes.string,
		className: PropTypes.string,
		onChange: PropTypes.func,
		onBlur: PropTypes.func,
		onFocus: PropTypes.func,
		onReady: PropTypes.func,
		onClick: PropTypes.func,
		options: PropTypes.object
		};
		Element.displayName = displayName;
		Element.__elementType = type;
		return Element;
		};

		const isServer = typeof window === 'undefined';
		var isServer = typeof window === 'undefined';
		/**
		@@ -295,36 +469,45 @@ * Requires beta access:
		*/
		const AuBankAccountElement = createElementComponent('auBankAccount', isServer);

		var AuBankAccountElement = createElementComponent('auBankAccount', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const CardElement = createElementComponent('card', isServer);

		var CardElement = createElementComponent('card', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const CardNumberElement = createElementComponent('cardNumber', isServer);

		var CardNumberElement = createElementComponent('cardNumber', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const CardExpiryElement = createElementComponent('cardExpiry', isServer);

		var CardExpiryElement = createElementComponent('cardExpiry', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const CardCvcElement = createElementComponent('cardCvc', isServer);

		var CardCvcElement = createElementComponent('cardCvc', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const FpxBankElement = createElementComponent('fpxBank', isServer);

		var FpxBankElement = createElementComponent('fpxBank', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const IbanElement = createElementComponent('iban', isServer);

		var IbanElement = createElementComponent('iban', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const IdealBankElement = createElementComponent('idealBank', isServer);

		var IdealBankElement = createElementComponent('idealBank', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);

		var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);

		export { AuBankAccountElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, Elements, ElementsConsumer, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement, useElements, useStripe };

657

dist/react-stripe.js

		@@ -10,95 +10,201 @@ 'use strict';

		const isUnknownObject = (raw) => {
		return raw !== null && typeof raw === 'object';
		function _typeof(obj) {
		"@babel/helpers - typeof";

		if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
		_typeof = function (obj) {
		return typeof obj;
		};
		} else {
		_typeof = function (obj) {
		return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
		};
		}

		return _typeof(obj);
		}

		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) {
		return _arrayWithHoles(arr) \|\| _iterableToArrayLimit(arr, i) \|\| _nonIterableRest();
		}

		function _arrayWithHoles(arr) {
		if (Array.isArray(arr)) return arr;
		}

		function _iterableToArrayLimit(arr, i) {
		if (!(Symbol.iterator in Object(arr) \|\| Object.prototype.toString.call(arr) === "[object Arguments]")) {
		return;
		}

		var _arr = [];
		var _n = true;
		var _d = false;
		var _e = undefined;

		try {
		for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
		_arr.push(_s.value);

		if (i && _arr.length === i) break;
		}
		} catch (err) {
		_d = true;
		_e = err;
		} finally {
		try {
		if (!_n && _i["return"] != null) _i["return"]();
		} finally {
		if (_d) throw _e;
		}
		}

		return _arr;
		}

		function _nonIterableRest() {
		throw new TypeError("Invalid attempt to destructure non-iterable instance");
		}

		var isUnknownObject = function isUnknownObject(raw) {
		return raw !== null && _typeof(raw) === 'object';
		};
		const isPromise = (raw) => {
		return isUnknownObject(raw) && typeof raw.then === 'function';
		};
		// We are using types to enforce the `stripe` prop in this lib,
		var isPromise = function isPromise(raw) {
		return isUnknownObject(raw) && typeof raw.then === 'function';
		}; // We are using types to enforce the `stripe` prop in this lib,
		// but in an untyped integration `stripe` could be anything, so we need
		// to do some sanity validation to prevent type errors.
		const isStripe = (raw) => {
		return (isUnknownObject(raw) &&
		typeof raw.elements === 'function' &&
		typeof raw.createToken === 'function' &&
		typeof raw.createPaymentMethod === 'function' &&
		typeof raw.confirmCardPayment === 'function');

		var isStripe = function isStripe(raw) {
		return isUnknownObject(raw) && typeof raw.elements === 'function' && typeof raw.createToken === 'function' && typeof raw.createPaymentMethod === 'function' && typeof raw.confirmCardPayment === 'function';
		};

		const PLAIN_OBJECT_STR = '[object Object]';
		const isEqual = (left, right) => {
		if (!isUnknownObject(left) \|\| !isUnknownObject(right)) {
		return left === right;
		}
		const leftArray = Array.isArray(left);
		const rightArray = Array.isArray(right);
		if (leftArray !== rightArray)
		return false;
		const leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
		const rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
		if (leftPlainObject !== rightPlainObject)
		return false;
		if (!leftPlainObject && !leftArray)
		return false;
		const leftKeys = Object.keys(left);
		const rightKeys = Object.keys(right);
		if (leftKeys.length !== rightKeys.length)
		return false;
		const keySet = {};
		for (let i = 0; i < leftKeys.length; i += 1) {
		keySet[leftKeys[i]] = true;
		}
		for (let i = 0; i < rightKeys.length; i += 1) {
		keySet[rightKeys[i]] = true;
		}
		const allKeys = Object.keys(keySet);
		if (allKeys.length !== leftKeys.length) {
		return false;
		}
		const l = left;
		const r = right;
		const pred = (key) => {
		return isEqual(l[key], r[key]);
		};
		return allKeys.every(pred);
		var PLAIN_OBJECT_STR = '[object Object]';
		var isEqual = function isEqual(left, right) {
		if (!isUnknownObject(left) \|\| !isUnknownObject(right)) {
		return left === right;
		}

		var leftArray = Array.isArray(left);
		var rightArray = Array.isArray(right);
		if (leftArray !== rightArray) return false;
		var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
		var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
		if (leftPlainObject !== rightPlainObject) return false;
		if (!leftPlainObject && !leftArray) return false;
		var leftKeys = Object.keys(left);
		var rightKeys = Object.keys(right);
		if (leftKeys.length !== rightKeys.length) return false;
		var keySet = {};

		for (var i = 0; i < leftKeys.length; i += 1) {
		keySet[leftKeys[i]] = true;
		}

		for (var _i = 0; _i < rightKeys.length; _i += 1) {
		keySet[rightKeys[_i]] = true;
		}

		var allKeys = Object.keys(keySet);

		if (allKeys.length !== leftKeys.length) {
		return false;
		}

		var l = left;
		var r = right;

		var pred = function pred(key) {
		return isEqual(l[key], r[key]);
		};

		return allKeys.every(pred);
		};

		const usePrevious = (value) => {
		const ref = React.useRef(value);
		React.useEffect(() => {
		ref.current = value;
		}, [value]);
		return ref.current;
		var usePrevious = function usePrevious(value) {
		var ref = React.useRef(value);
		React.useEffect(function () {
		ref.current = value;
		}, [value]);
		return ref.current;
		};

		const INVALID_STRIPE_ERROR = 'Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.';
		// We are using types to enforce the `stripe` prop in this lib, but in a real
		var INVALID_STRIPE_ERROR = 'Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.'; // We are using types to enforce the `stripe` prop in this lib, but in a real
		// integration `stripe` could be anything, so we need to do some sanity
		// validation to prevent type errors.
		const validateStripe = (maybeStripe) => {
		if (maybeStripe === null \|\| isStripe(maybeStripe)) {
		return maybeStripe;
		}
		throw new Error(INVALID_STRIPE_ERROR);

		var validateStripe = function validateStripe(maybeStripe) {
		if (maybeStripe === null \|\| isStripe(maybeStripe)) {
		return maybeStripe;
		}

		throw new Error(INVALID_STRIPE_ERROR);
		};
		const parseStripeProp = (raw) => {
		if (isPromise(raw)) {
		return {
		tag: 'async',
		stripePromise: Promise.resolve(raw).then(validateStripe),
		};
		}
		const stripe = validateStripe(raw);
		if (stripe === null) {
		return { tag: 'empty' };
		}
		return { tag: 'sync', stripe };

		var parseStripeProp = function parseStripeProp(raw) {
		if (isPromise(raw)) {
		return {
		tag: 'async',
		stripePromise: Promise.resolve(raw).then(validateStripe)
		};
		}

		var stripe = validateStripe(raw);

		if (stripe === null) {
		return {
		tag: 'empty'
		};
		}

		return {
		tag: 'sync',
		stripe: stripe
		};
		};
		const ElementsContext = React.createContext(null);

		var ElementsContext = React.createContext(null);
		ElementsContext.displayName = 'ElementsContext';
		const parseElementsContext = (ctx, useCase) => {
		if (!ctx) {
		throw new Error(`Could not find Elements context; You need to wrap the part of your app that ${useCase} in an <Elements> provider.`);
		}
		return ctx;
		var parseElementsContext = function parseElementsContext(ctx, useCase) {
		if (!ctx) {
		throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider."));
		}

		return ctx;
		};
		@@ -115,59 +221,79 @@ /**
		*/
		const Elements = ({ stripe: rawStripeProp, options, children, }) => {
		const final = React.useRef(false);
		const isMounted = React.useRef(true);
		const parsed = React.useMemo(() => parseStripeProp(rawStripeProp), [
		rawStripeProp,
		]);
		const [ctx, setContext] = React.useState(() => ({
		stripe: null,
		elements: null,
		}));
		const prevStripe = usePrevious(rawStripeProp);
		const prevOptions = usePrevious(options);
		if (prevStripe !== null) {
		if (prevStripe !== rawStripeProp) {
		console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
		}
		if (!isEqual(options, prevOptions)) {
		console.warn('Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.');
		}

		var Elements = function Elements(_ref) {
		var rawStripeProp = _ref.stripe,
		options = _ref.options,
		children = _ref.children;

		var _final = React.useRef(false);

		var isMounted = React.useRef(true);
		var parsed = React.useMemo(function () {
		return parseStripeProp(rawStripeProp);
		}, [rawStripeProp]);

		var _React$useState = React.useState(function () {
		return {
		stripe: null,
		elements: null
		};
		}),
		_React$useState2 = _slicedToArray(_React$useState, 2),
		ctx = _React$useState2[0],
		setContext = _React$useState2[1];

		var prevStripe = usePrevious(rawStripeProp);
		var prevOptions = usePrevious(options);

		if (prevStripe !== null) {
		if (prevStripe !== rawStripeProp) {
		console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
		}
		if (!final.current) {
		if (parsed.tag === 'sync') {
		final.current = true;
		setContext({
		stripe: parsed.stripe,
		elements: parsed.stripe.elements(options),
		});

		if (!isEqual(options, prevOptions)) {
		console.warn('Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.');
		}
		}

		if (!_final.current) {
		if (parsed.tag === 'sync') {
		_final.current = true;
		setContext({
		stripe: parsed.stripe,
		elements: parsed.stripe.elements(options)
		});
		}

		if (parsed.tag === 'async') {
		_final.current = true;
		parsed.stripePromise.then(function (stripe) {
		if (stripe && isMounted.current) {
		// Only update Elements context if the component is still mounted
		// and stripe is not null. We allow stripe to be null to make
		// handling SSR easier.
		setContext({
		stripe: stripe,
		elements: stripe.elements(options)
		});
		}
		if (parsed.tag === 'async') {
		final.current = true;
		parsed.stripePromise.then((stripe) => {
		if (stripe && isMounted.current) {
		// Only update Elements context if the component is still mounted
		// and stripe is not null. We allow stripe to be null to make
		// handling SSR easier.
		setContext({
		stripe,
		elements: stripe.elements(options),
		});
		}
		});
		}
		});
		}
		React.useEffect(() => {
		return () => {
		isMounted.current = false;
		};
		}, []);
		return (React.createElement(ElementsContext.Provider, { value: ctx }, children));
		}

		React.useEffect(function () {
		return function () {
		isMounted.current = false;
		};
		}, []);
		return React.createElement(ElementsContext.Provider, {
		value: ctx
		}, children);
		};
		Elements.propTypes = {
		stripe: PropTypes.any,
		options: PropTypes.object,
		stripe: PropTypes.any,
		options: PropTypes.object
		};
		const useElementsContextWithUseCase = (useCaseMessage) => {
		const ctx = React.useContext(ElementsContext);
		return parseElementsContext(ctx, useCaseMessage);
		var useElementsContextWithUseCase = function useElementsContextWithUseCase(useCaseMessage) {
		var ctx = React.useContext(ElementsContext);
		return parseElementsContext(ctx, useCaseMessage);
		};
		@@ -177,5 +303,8 @@ /**
		*/
		const useElements = () => {
		const { elements } = useElementsContextWithUseCase('calls useElements()');
		return elements;

		var useElements = function useElements() {
		var _useElementsContextWi = useElementsContextWithUseCase('calls useElements()'),
		elements = _useElementsContextWi.elements;

		return elements;
		};
		@@ -185,5 +314,8 @@ /**
		*/
		const useStripe = () => {
		const { stripe } = useElementsContextWithUseCase('calls useStripe()');
		return stripe;

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

		return stripe;
		};
		@@ -193,104 +325,146 @@ /**
		*/
		const ElementsConsumer = ({ children, }) => {
		const ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>');
		// Assert to satsify the busted React.FC return type (it should be ReactNode)
		return children(ctx);

		var ElementsConsumer = function ElementsConsumer(_ref2) {
		var children = _ref2.children;
		var ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>'); // Assert to satsify the busted React.FC return type (it should be ReactNode)

		return children(ctx);
		};
		ElementsConsumer.propTypes = {
		children: PropTypes.func.isRequired,
		children: PropTypes.func.isRequired
		};

		const useCallbackReference = (cb) => {
		const ref = React.useRef(cb);
		React.useEffect(() => {
		ref.current = cb;
		}, [cb]);
		return (...args) => {
		if (ref.current) {
		ref.current(...args);
		}
		};
		var useCallbackReference = function useCallbackReference(cb) {
		var ref = React.useRef(cb);
		React.useEffect(function () {
		ref.current = cb;
		}, [cb]);
		return function () {
		if (ref.current) {
		ref.current.apply(ref, arguments);
		}
		};
		};

		const extractUpdateableOptions = (options) => {
		if (!isUnknownObject(options)) {
		return {};
		}
		const { paymentRequest: _, ...rest } = options;
		return rest;
		var extractUpdateableOptions = function extractUpdateableOptions(options) {
		if (!isUnknownObject(options)) {
		return {};
		}

		var _ = options.paymentRequest,
		rest = _objectWithoutProperties(options, ["paymentRequest"]);

		return rest;
		};
		const noop = () => { };
		const capitalized = (str) => str.charAt(0).toUpperCase() + str.slice(1);
		const createElementComponent = (type, isServer) => {
		const displayName = `${capitalized(type)}Element`;
		const ClientElement = ({ id, className, options = {}, onBlur = noop, onFocus = noop, onReady = noop, onChange = noop, onClick = noop, }) => {
		const { elements } = useElementsContextWithUseCase(`mounts <${displayName}>`);
		const elementRef = React.useRef(null);
		const domNode = React.useRef(null);
		const callOnReady = useCallbackReference(onReady);
		const callOnBlur = useCallbackReference(onBlur);
		const callOnFocus = useCallbackReference(onFocus);
		const callOnClick = useCallbackReference(onClick);
		const callOnChange = useCallbackReference(onChange);
		React.useLayoutEffect(() => {
		if (elementRef.current == null && elements && domNode.current != null) {
		const element = elements.create(type, options);
		elementRef.current = element;
		element.mount(domNode.current);
		element.on('ready', () => callOnReady(element));
		element.on('change', callOnChange);
		element.on('blur', callOnBlur);
		element.on('focus', callOnFocus);
		// Users can pass an an onClick prop on any Element component
		// just as they could listen for the `click` event on any Element,
		// but only the PaymentRequestButton will actually trigger the event.
		element.on('click', callOnClick);
		}

		var noop = function noop() {};

		var capitalized = function capitalized(str) {
		return str.charAt(0).toUpperCase() + str.slice(1);
		};

		var createElementComponent = function createElementComponent(type, isServer) {
		var displayName = "".concat(capitalized(type), "Element");

		var ClientElement = function ClientElement(_ref) {
		var id = _ref.id,
		className = _ref.className,
		_ref$options = _ref.options,
		options = _ref$options === void 0 ? {} : _ref$options,
		_ref$onBlur = _ref.onBlur,
		onBlur = _ref$onBlur === void 0 ? noop : _ref$onBlur,
		_ref$onFocus = _ref.onFocus,
		onFocus = _ref$onFocus === void 0 ? noop : _ref$onFocus,
		_ref$onReady = _ref.onReady,
		onReady = _ref$onReady === void 0 ? noop : _ref$onReady,
		_ref$onChange = _ref.onChange,
		onChange = _ref$onChange === void 0 ? noop : _ref$onChange,
		_ref$onClick = _ref.onClick,
		onClick = _ref$onClick === void 0 ? noop : _ref$onClick;

		var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
		elements = _useElementsContextWi.elements;

		var elementRef = React.useRef(null);
		var domNode = React.useRef(null);
		var callOnReady = useCallbackReference(onReady);
		var callOnBlur = useCallbackReference(onBlur);
		var callOnFocus = useCallbackReference(onFocus);
		var callOnClick = useCallbackReference(onClick);
		var callOnChange = useCallbackReference(onChange);
		React.useLayoutEffect(function () {
		if (elementRef.current == null && elements && domNode.current != null) {
		var element = elements.create(type, options);
		elementRef.current = element;
		element.mount(domNode.current);
		element.on('ready', function () {
		return callOnReady(element);
		});
		const prevOptions = React.useRef(options);
		React.useEffect(() => {
		if (prevOptions.current &&
		prevOptions.current.paymentRequest !== options.paymentRequest) {
		console.warn('Unsupported prop change: options.paymentRequest is not a customizable property.');
		}
		const updateableOptions = extractUpdateableOptions(options);
		if (Object.keys(updateableOptions).length !== 0 &&
		!isEqual(updateableOptions, extractUpdateableOptions(prevOptions.current))) {
		if (elementRef.current) {
		elementRef.current.update(updateableOptions);
		prevOptions.current = options;
		}
		}
		}, [options]);
		React.useEffect(() => () => {
		if (elementRef.current) {
		elementRef.current.destroy();
		}
		}, []);
		return React.createElement("div", { id: id, className: className, ref: domNode });
		};
		// Only render the Element wrapper in a server environment.
		const ServerElement = (props) => {
		// Validate that we are in the right context by calling useElementsContextWithUseCase.
		useElementsContextWithUseCase(`mounts <${displayName}>`);
		const { id, className } = props;
		return React.createElement("div", { id: id, className: className });
		};
		const Element = isServer ? ServerElement : ClientElement;
		Element.propTypes = {
		id: PropTypes.string,
		className: PropTypes.string,
		onChange: PropTypes.func,
		onBlur: PropTypes.func,
		onFocus: PropTypes.func,
		onReady: PropTypes.func,
		onClick: PropTypes.func,
		options: PropTypes.object,
		};
		Element.displayName = displayName;
		Element.__elementType = type;
		return Element;
		element.on('change', callOnChange);
		element.on('blur', callOnBlur);
		element.on('focus', callOnFocus); // Users can pass an an onClick prop on any Element component
		// just as they could listen for the `click` event on any Element,
		// but only the PaymentRequestButton will actually trigger the event.

		element.on('click', callOnClick);
		}
		});
		var prevOptions = React.useRef(options);
		React.useEffect(function () {
		if (prevOptions.current && prevOptions.current.paymentRequest !== options.paymentRequest) {
		console.warn('Unsupported prop change: options.paymentRequest is not a customizable property.');
		}

		var updateableOptions = extractUpdateableOptions(options);

		if (Object.keys(updateableOptions).length !== 0 && !isEqual(updateableOptions, extractUpdateableOptions(prevOptions.current))) {
		if (elementRef.current) {
		elementRef.current.update(updateableOptions);
		prevOptions.current = options;
		}
		}
		}, [options]);
		React.useEffect(function () {
		return function () {
		if (elementRef.current) {
		elementRef.current.destroy();
		}
		};
		}, []);
		return React.createElement("div", {
		id: id,
		className: className,
		ref: domNode
		});
		}; // Only render the Element wrapper in a server environment.


		var ServerElement = function ServerElement(props) {
		// Validate that we are in the right context by calling useElementsContextWithUseCase.
		useElementsContextWithUseCase("mounts <".concat(displayName, ">"));
		var id = props.id,
		className = props.className;
		return React.createElement("div", {
		id: id,
		className: className
		});
		};

		var Element = isServer ? ServerElement : ClientElement;
		Element.propTypes = {
		id: PropTypes.string,
		className: PropTypes.string,
		onChange: PropTypes.func,
		onBlur: PropTypes.func,
		onFocus: PropTypes.func,
		onReady: PropTypes.func,
		onClick: PropTypes.func,
		options: PropTypes.object
		};
		Element.displayName = displayName;
		Element.__elementType = type;
		return Element;
		};

		const isServer = typeof window === 'undefined';
		var isServer = typeof window === 'undefined';
		/**
		@@ -302,36 +476,45 @@ * Requires beta access:
		*/
		const AuBankAccountElement = createElementComponent('auBankAccount', isServer);

		var AuBankAccountElement = createElementComponent('auBankAccount', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const CardElement = createElementComponent('card', isServer);

		var CardElement = createElementComponent('card', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const CardNumberElement = createElementComponent('cardNumber', isServer);

		var CardNumberElement = createElementComponent('cardNumber', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const CardExpiryElement = createElementComponent('cardExpiry', isServer);

		var CardExpiryElement = createElementComponent('cardExpiry', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const CardCvcElement = createElementComponent('cardCvc', isServer);

		var CardCvcElement = createElementComponent('cardCvc', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const FpxBankElement = createElementComponent('fpxBank', isServer);

		var FpxBankElement = createElementComponent('fpxBank', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const IbanElement = createElementComponent('iban', isServer);

		var IbanElement = createElementComponent('iban', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const IdealBankElement = createElementComponent('idealBank', isServer);

		var IdealBankElement = createElementComponent('idealBank', isServer);
		/**
		* @docs https://stripe.com/docs/stripe-js/react#element-components
		*/
		const PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);

		var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);

		exports.AuBankAccountElement = AuBankAccountElement;
		@@ -338,0 +521,0 @@ exports.CardCvcElement = CardCvcElement;

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";t=t&&t.hasOwnProperty("default")?t.default:t;function n(){}function r(){}r.resetWarningCache=n;var o=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,s){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==s){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var o={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:n};return o.PropTypes=o,o}()}));const s=e=>null!==e&&"object"==typeof e,c=(e,t)=>{if(!s(e)\|\|!s(t))return e===t;const n=Array.isArray(e);if(n!==Array.isArray(t))return!1;const r="[object Object]"===Object.prototype.toString.call(e);if(r!==("[object Object]"===Object.prototype.toString.call(t)))return!1;if(!r&&!n)return!1;const o=Object.keys(e),u=Object.keys(t);if(o.length!==u.length)return!1;const a={};for(let e=0;e<o.length;e+=1)a[o[e]]=!0;for(let e=0;e<u.length;e+=1)a[u[e]]=!0;const p=Object.keys(a);if(p.length!==o.length)return!1;const i=e,l=t;return p.every(e=>c(i[e],l[e]))},u=e=>{const n=t.useRef(e);return t.useEffect(()=>{n.current=e},[e]),n.current},a=e=>{if(null===e\|\|s(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;var t;throw new Error("Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")},p=e=>{if((e=>s(e)&&"function"==typeof e.then)(e))return{tag:"async",stripePromise:Promise.resolve(e).then(a)};const t=a(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},i=t.createContext(null);i.displayName="ElementsContext";const l=({stripe:e,options:n,children:r})=>{const o=t.useRef(!1),s=t.useRef(!0),a=t.useMemo(()=>p(e),[e]),[l,f]=t.useState(()=>({stripe:null,elements:null})),m=u(e),y=u(n);return null!==m&&(m!==e&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it."),c(n,y)\|\|console.warn("Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.")),o.current\|\|("sync"===a.tag&&(o.current=!0,f({stripe:a.stripe,elements:a.stripe.elements(n)})),"async"===a.tag&&(o.current=!0,a.stripePromise.then(e=>{e&&s.current&&f({stripe:e,elements:e.elements(n)})}))),t.useEffect(()=>()=>{s.current=!1},[]),t.createElement(i.Provider,{value:l},r)};l.propTypes={stripe:o.any,options:o.object};const f=e=>((e,t)=>{if(!e)throw new Error(`Could not find Elements context; You need to wrap the part of your app that ${t} in an <Elements> provider.`);return e})(t.useContext(i),e),m=({children:e})=>e(f("mounts <ElementsConsumer>"));m.propTypes={children:o.func.isRequired};const y=e=>{const n=t.useRef(e);return t.useEffect(()=>{n.current=e},[e]),(...e)=>{n.current&&n.current(...e)}},d=e=>{if(!s(e))return{};const{paymentRequest:t,...n}=e;return n},h=()=>{},E=(e,n)=>{const r=`${s=e,s.charAt(0).toUpperCase()+s.slice(1)}Element`;var s;const u=n?e=>{f(`mounts <${r}>`);const{id:n,className:o}=e;return t.createElement("div",{id:n,className:o})}:({id:n,className:o,options:s={},onBlur:u=h,onFocus:a=h,onReady:p=h,onChange:i=h,onClick:l=h})=>{const{elements:m}=f(`mounts <${r}>`),E=t.useRef(null),g=t.useRef(null),b=y(p),R=y(u),C=y(a),j=y(l),O=y(i);t.useLayoutEffect(()=>{if(null==E.current&&m&&null!=g.current){const t=m.create(e,s);E.current=t,t.mount(g.current),t.on("ready",()=>b(t)),t.on("change",O),t.on("blur",R),t.on("focus",C),t.on("click",j)}});const k=t.useRef(s);return t.useEffect(()=>{k.current&&k.current.paymentRequest!==s.paymentRequest&&console.warn("Unsupported prop change: options.paymentRequest is not a customizable property.");const e=d(s);0===Object.keys(e).length\|\|c(e,d(k.current))\|\|E.current&&(E.current.update(e),k.current=s)},[s]),t.useEffect(()=>()=>{E.current&&E.current.destroy()},[]),t.createElement("div",{id:n,className:o,ref:g})};return u.propTypes={id:o.string,className:o.string,onChange:o.func,onBlur:o.func,onFocus:o.func,onReady:o.func,onClick:o.func,options:o.object},u.displayName=r,u.__elementType=e,u},g="undefined"==typeof window,b=E("auBankAccount",g),R=E("card",g),C=E("cardNumber",g),j=E("cardExpiry",g),O=E("cardCvc",g),k=E("fpxBank",g),v=E("iban",g),x=E("idealBank",g),P=E("paymentRequestButton",g);e.AuBankAccountElement=b,e.CardCvcElement=O,e.CardElement=R,e.CardExpiryElement=j,e.CardNumberElement=C,e.Elements=l,e.ElementsConsumer=m,e.FpxBankElement=k,e.IbanElement=v,e.IdealBankElement=x,e.PaymentRequestButtonElement=P,e.useElements=()=>{const{elements:e}=f("calls useElements()");return e},e.useStripe=()=>{const{stripe:e}=f("calls useStripe()");return e},Object.defineProperty(e,"__esModule",{value:!0})}));
		!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e\|\|self).ReactStripe={},e.React)}(this,(function(e,t){"use strict";function n(e){return(n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function r(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},u=Object.keys(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0\|\|(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var u=Object.getOwnPropertySymbols(e);for(r=0;r<u.length;r++)n=u[r],t.indexOf(n)>=0\|\|Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function o(e,t){return function(e){if(Array.isArray(e))return e}(e)\|\|function(e,t){if(!(Symbol.iterator in Object(e)\|\|"[object Arguments]"===Object.prototype.toString.call(e)))return;var n=[],r=!0,o=!1,u=void 0;try{for(var c,i=e[Symbol.iterator]();!(r=(c=i.next()).done)&&(n.push(c.value),!t\|\|n.length!==t);r=!0);}catch(e){o=!0,u=e}finally{try{r\|\|null==i.return\|\|i.return()}finally{if(o)throw u}}return n}(e,t)\|\|function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}t=t&&t.hasOwnProperty("default")?t.default:t;function u(){}function c(){}c.resetWarningCache=u;var i=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,u){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==u){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var n={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:c,resetWarningCache:u};return n.PropTypes=n,n}()})),a=function(e){return null!==e&&"object"===n(e)},s=function e(t,n){if(!a(t)\|\|!a(n))return t===n;var r=Array.isArray(t);if(r!==Array.isArray(n))return!1;var o="[object Object]"===Object.prototype.toString.call(t);if(o!==("[object Object]"===Object.prototype.toString.call(n)))return!1;if(!o&&!r)return!1;var u=Object.keys(t),c=Object.keys(n);if(u.length!==c.length)return!1;for(var i={},s=0;s<u.length;s+=1)i[u[s]]=!0;for(var l=0;l<c.length;l+=1)i[c[l]]=!0;var p=Object.keys(i);if(p.length!==u.length)return!1;var f=t,y=n;return p.every((function(t){return e(f[t],y[t])}))},l=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},p=function(e){if(null===e\|\|a(t=e)&&"function"==typeof t.elements&&"function"==typeof t.createToken&&"function"==typeof t.createPaymentMethod&&"function"==typeof t.confirmCardPayment)return e;var t;throw new Error("Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.")},f=function(e){if(function(e){return a(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(p)};var t=p(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},y=t.createContext(null);y.displayName="ElementsContext";var m=function(e){var n=e.stripe,r=e.options,u=e.children,c=t.useRef(!1),i=t.useRef(!0),a=t.useMemo((function(){return f(n)}),[n]),p=o(t.useState((function(){return{stripe:null,elements:null}})),2),m=p[0],d=p[1],h=l(n),v=l(r);return null!==h&&(h!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it."),s(r,v)\|\|console.warn("Unsupported prop change on Elements: You cannot change the `options` prop after setting the `stripe` prop.")),c.current\|\|("sync"===a.tag&&(c.current=!0,d({stripe:a.stripe,elements:a.stripe.elements(r)})),"async"===a.tag&&(c.current=!0,a.stripePromise.then((function(e){e&&i.current&&d({stripe:e,elements:e.elements(r)})})))),t.useEffect((function(){return function(){i.current=!1}}),[]),t.createElement(y.Provider,{value:m},u)};m.propTypes={stripe:i.any,options:i.object};var d=function(e){return function(e,t){if(!e)throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(t," in an <Elements> provider."));return e}(t.useContext(y),e)},h=function(e){return(0,e.children)(d("mounts <ElementsConsumer>"))};h.propTypes={children:i.func.isRequired};var v=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},b=function(e){if(!a(e))return{};e.paymentRequest;return r(e,["paymentRequest"])},E=function(){},g=function(e,n){var r,o="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),u=n?function(e){d("mounts <".concat(o,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,u=n.className,c=n.options,i=void 0===c?{}:c,a=n.onBlur,l=void 0===a?E:a,p=n.onFocus,f=void 0===p?E:p,y=n.onReady,m=void 0===y?E:y,h=n.onChange,g=void 0===h?E:h,O=n.onClick,j=void 0===O?E:O,R=d("mounts <".concat(o,">")).elements,C=t.useRef(null),S=t.useRef(null),k=v(m),x=v(l),w=v(f),P=v(j),T=v(g);t.useLayoutEffect((function(){if(null==C.current&&R&&null!=S.current){var t=R.create(e,i);C.current=t,t.mount(S.current),t.on("ready",(function(){return k(t)})),t.on("change",T),t.on("blur",x),t.on("focus",w),t.on("click",P)}}));var _=t.useRef(i);return t.useEffect((function(){_.current&&_.current.paymentRequest!==i.paymentRequest&&console.warn("Unsupported prop change: options.paymentRequest is not a customizable property.");var e=b(i);0===Object.keys(e).length\|\|s(e,b(_.current))\|\|C.current&&(C.current.update(e),_.current=i)}),[i]),t.useEffect((function(){return function(){C.current&&C.current.destroy()}}),[]),t.createElement("div",{id:r,className:u,ref:S})};return u.propTypes={id:i.string,className:i.string,onChange:i.func,onBlur:i.func,onFocus:i.func,onReady:i.func,onClick:i.func,options:i.object},u.displayName=o,u.__elementType=e,u},O="undefined"==typeof window,j=g("auBankAccount",O),R=g("card",O),C=g("cardNumber",O),S=g("cardExpiry",O),k=g("cardCvc",O),x=g("fpxBank",O),w=g("iban",O),P=g("idealBank",O),T=g("paymentRequestButton",O);e.AuBankAccountElement=j,e.CardCvcElement=k,e.CardElement=R,e.CardExpiryElement=S,e.CardNumberElement=C,e.Elements=m,e.ElementsConsumer=h,e.FpxBankElement=x,e.IbanElement=w,e.IdealBankElement=P,e.PaymentRequestButtonElement=T,e.useElements=function(){return d("calls useElements()").elements},e.useStripe=function(){return d("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

		{
		"name": "@stripe/react-stripe-js",
		"version": "1.0.2",
		"version": "1.0.3",
		"description": "React components for Stripe.js and Stripe Elements",
		@@ -5,0 +5,0 @@ "main": "dist/react-stripe.js",

dist/react-stripe.umd.js

Sorry, the diff of this file is too big to display

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

New alerts

Fixed alerts

Improved metrics