(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react')) :
typeof define === 'function' && define.amd ? define(['exports', 'react'], factory) :
(global = global || self, factory(global.ReactStripe = {}, global.React));
}(this, (function (exports, React) { 'use strict';
React = React && Object.prototype.hasOwnProperty.call(React, 'default') ? React['default'] : React;
function createCommonjsModule(fn, module) {
return module = { exports: {} }, fn(module, module.exports), module.exports;
}
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var ReactPropTypesSecret = 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED';
var ReactPropTypesSecret_1 = ReactPropTypesSecret;
function emptyFunction() {}
function emptyFunctionWithReset() {}
emptyFunctionWithReset.resetWarningCache = emptyFunction;
var factoryWithThrowingShims = function () {
function shim(props, propName, componentName, location, propFullName, secret) {
if (secret === ReactPropTypesSecret_1) {
// It is still safe when called from React.
return;
}
var err = new Error('Calling PropTypes validators directly is not supported by the `prop-types` package. ' + 'Use PropTypes.checkPropTypes() to call them. ' + 'Read more at http://fb.me/use-check-prop-types');
err.name = 'Invariant Violation';
throw err;
}
shim.isRequired = shim;
function getShim() {
return shim;
}
// Keep this list in sync with production version in `./factoryWithTypeCheckers.js`.
var ReactPropTypes = {
array: shim,
bool: shim,
func: shim,
number: shim,
object: shim,
string: shim,
symbol: shim,
any: shim,
arrayOf: getShim,
element: shim,
elementType: shim,
instanceOf: getShim,
node: shim,
objectOf: getShim,
oneOf: getShim,
oneOfType: getShim,
shape: getShim,
exact: getShim,
checkPropTypes: emptyFunctionWithReset,
resetWarningCache: emptyFunction
};
ReactPropTypes.PropTypes = ReactPropTypes;
return ReactPropTypes;
};
var propTypes = createCommonjsModule(function (module) {
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
{
// By explicitly using `prop-types` you are opting into new production behavior.
// http://fb.me/prop-types-in-prod
module.exports = factoryWithThrowingShims();
}
});
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) {
symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
}
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
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 _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _iterableToArrayLimit(arr, i) {
var _i = arr && (typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]);
if (_i == null) return;
var _arr = [];
var _n = true;
var _d = false;
var _s, _e;
try {
for (_i = _i.call(arr); !(_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 _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
var usePrevious = function usePrevious(value) {
var ref = React.useRef(value);
React.useEffect(function () {
ref.current = value;
}, [value]);
return ref.current;
};
var isUnknownObject = function isUnknownObject(raw) {
return raw !== null && _typeof(raw) === 'object';
};
var isPromise = function isPromise(raw) {
return isUnknownObject(raw) && typeof raw.then === 'function';
}; // We are using types to enforce the `stripe` prop in this lib,
// but in an untyped integration `stripe` could be anything, so we need
// to do some sanity validation to prevent type errors.
var isStripe = function isStripe(raw) {
return isUnknownObject(raw) && typeof raw.elements === 'function' && typeof raw.createToken === 'function' && typeof raw.createPaymentMethod === 'function' && typeof raw.confirmCardPayment === 'function';
};
var PLAIN_OBJECT_STR = '[object Object]';
var isEqual = function isEqual(left, right) {
if (!isUnknownObject(left) || !isUnknownObject(right)) {
return left === right;
}
var leftArray = Array.isArray(left);
var rightArray = Array.isArray(right);
if (leftArray !== rightArray) return false;
var leftPlainObject = Object.prototype.toString.call(left) === PLAIN_OBJECT_STR;
var rightPlainObject = Object.prototype.toString.call(right) === PLAIN_OBJECT_STR;
if (leftPlainObject !== rightPlainObject) return false; // not sure what sort of special object this is (regexp is one option), so
// fallback to reference check.
if (!leftPlainObject && !leftArray) return left === right;
var leftKeys = Object.keys(left);
var rightKeys = Object.keys(right);
if (leftKeys.length !== rightKeys.length) return false;
var keySet = {};
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);
};
var extractAllowedOptionsUpdates = function extractAllowedOptionsUpdates(options, prevOptions, immutableKeys) {
if (!isUnknownObject(options)) {
return null;
}
return Object.keys(options).reduce(function (newOptions, key) {
var isUpdated = !isUnknownObject(prevOptions) || !isEqual(options[key], prevOptions[key]);
if (immutableKeys.includes(key)) {
if (isUpdated) {
console.warn("Unsupported prop change: options.".concat(key, " is not a mutable property."));
}
return newOptions;
}
if (!isUpdated) {
return newOptions;
}
return _objectSpread2(_objectSpread2({}, newOptions || {}), {}, _defineProperty({}, key, options[key]));
}, null);
};
var INVALID_STRIPE_ERROR = 'Invalid prop `stripe` supplied to `Elements`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.'; // We are using types to enforce the `stripe` prop in this lib, but in a real
// integration `stripe` could be anything, so we need to do some sanity
// validation to prevent type errors.
var validateStripe = function validateStripe(maybeStripe) {
if (maybeStripe === null || isStripe(maybeStripe)) {
return maybeStripe;
}
throw new Error(INVALID_STRIPE_ERROR);
};
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
};
};
var ElementsContext = /*#__PURE__*/React.createContext(null);
ElementsContext.displayName = 'ElementsContext';
var parseElementsContext = function parseElementsContext(ctx, useCase) {
if (!ctx) {
throw new Error("Could not find Elements context; You need to wrap the part of your app that ".concat(useCase, " in an <Elements> provider."));
}
return ctx;
};
/**
* The `Elements` provider allows you to use [Element components](https://stripe.com/docs/stripe-js/react#element-components) and access the [Stripe object](https://stripe.com/docs/js/initializing) in any nested component.
* Render an `Elements` provider at the root of your React app so that it is available everywhere you need it.
*
* To use the `Elements` provider, call `loadStripe` from `@stripe/stripe-js` with your publishable key.
* The `loadStripe` function will asynchronously load the Stripe.js script and initialize a `Stripe` object.
* Pass the returned `Promise` to `Elements`.
*
* @docs https://stripe.com/docs/stripe-js/react#elements-provider
*/
var Elements = function Elements(_ref) {
var rawStripeProp = _ref.stripe,
options = _ref.options,
children = _ref.children;
var parsed = React.useMemo(function () {
return parseStripeProp(rawStripeProp);
}, [rawStripeProp]); // For a sync stripe instance, initialize into context
var _React$useState = React.useState(function () {
return {
stripe: parsed.tag === 'sync' ? parsed.stripe : null,
elements: parsed.tag === 'sync' ? parsed.stripe.elements(options) : null
};
}),
_React$useState2 = _slicedToArray(_React$useState, 2),
ctx = _React$useState2[0],
setContext = _React$useState2[1];
React.useEffect(function () {
var isMounted = true;
var safeSetContext = function safeSetContext(stripe) {
setContext(function (ctx) {
// no-op if we already have a stripe instance (https://github.com/stripe/react-stripe-js/issues/296)
if (ctx.stripe) return ctx;
return {
stripe: stripe,
elements: stripe.elements(options)
};
});
}; // For an async stripePromise, store it in context once resolved
if (parsed.tag === 'async' && !ctx.stripe) {
parsed.stripePromise.then(function (stripe) {
if (stripe && isMounted) {
// Only update Elements context if the component is still mounted
// and stripe is not null. We allow stripe to be null to make
// handling SSR easier.
safeSetContext(stripe);
}
});
} else if (parsed.tag === 'sync' && !ctx.stripe) {
// Or, handle a sync stripe instance going from null -> populated
safeSetContext(parsed.stripe);
}
return function () {
isMounted = false;
};
}, [parsed, ctx, options]); // Warn on changes to stripe prop
var prevStripe = usePrevious(rawStripeProp);
React.useEffect(function () {
if (prevStripe !== null && prevStripe !== rawStripeProp) {
console.warn('Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.');
}
}, [prevStripe, rawStripeProp]); // Apply updates to elements when options prop has relevant changes
var prevOptions = usePrevious(options);
React.useEffect(function () {
if (!ctx.elements) {
return;
}
var updates = extractAllowedOptionsUpdates(options, prevOptions, ['clientSecret', 'fonts']);
if (updates) {
ctx.elements.update(updates);
}
}, [options, prevOptions, ctx.elements]); // Attach react-stripe-js version to stripe.js instance
React.useEffect(function () {
var anyStripe = ctx.stripe;
if (!anyStripe || !anyStripe._registerWrapper || !anyStripe.registerAppInfo) {
return;
}
anyStripe._registerWrapper({
name: 'react-stripe-js',
version: "1.10.0"
});
anyStripe.registerAppInfo({
name: 'react-stripe-js',
version: "1.10.0",
url: 'https://stripe.com/docs/stripe-js/react'
});
}, [ctx.stripe]);
return /*#__PURE__*/React.createElement(ElementsContext.Provider, {
value: ctx
}, children);
};
Elements.propTypes = {
stripe: propTypes.any,
options: propTypes.object
};
var useElementsContextWithUseCase = function useElementsContextWithUseCase(useCaseMessage) {
var ctx = React.useContext(ElementsContext);
return parseElementsContext(ctx, useCaseMessage);
};
/**
* @docs https://stripe.com/docs/stripe-js/react#useelements-hook
*/
var useElements = function useElements() {
var _useElementsContextWi = useElementsContextWithUseCase('calls useElements()'),
elements = _useElementsContextWi.elements;
return elements;
};
/**
* @docs https://stripe.com/docs/stripe-js/react#usestripe-hook
*/
var useStripe = function useStripe() {
var _useElementsContextWi2 = useElementsContextWithUseCase('calls useStripe()'),
stripe = _useElementsContextWi2.stripe;
return stripe;
};
/**
* @docs https://stripe.com/docs/stripe-js/react#elements-consumer
*/
var ElementsConsumer = function ElementsConsumer(_ref2) {
var children = _ref2.children;
var ctx = useElementsContextWithUseCase('mounts <ElementsConsumer>'); // Assert to satisfy the busted React.FC return type (it should be ReactNode)
return children(ctx);
};
ElementsConsumer.propTypes = {
children: propTypes.func.isRequired
};
var useCallbackReference = function useCallbackReference(cb) {
var ref = React.useRef(cb);
React.useEffect(function () {
ref.current = cb;
}, [cb]);
return function () {
if (ref.current) {
ref.current.apply(ref, arguments);
}
};
};
var 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$onEscape = _ref.onEscape,
onEscape = _ref$onEscape === void 0 ? noop : _ref$onEscape,
_ref$onClick = _ref.onClick,
onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
_ref$onLoadError = _ref.onLoadError,
onLoadError = _ref$onLoadError === void 0 ? noop : _ref$onLoadError,
_ref$onLoaderStart = _ref.onLoaderStart,
onLoaderStart = _ref$onLoaderStart === void 0 ? noop : _ref$onLoaderStart;
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);
var callOnEscape = useCallbackReference(onEscape);
var callOnLoadError = useCallbackReference(onLoadError);
var callOnLoaderStart = useCallbackReference(onLoaderStart);
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);
});
element.on('change', callOnChange);
element.on('blur', callOnBlur);
element.on('focus', callOnFocus);
element.on('escape', callOnEscape); // Users can pass an onLoadError prop on any Element component
// just as they could listen for the `loaderror` event on any Element,
// but only certain Elements will trigger the event.
element.on('loaderror', callOnLoadError); // Users can pass an onLoaderStart prop on any Element component
// just as they could listen for the `loaderstart` event on any Element,
// but only certain Elements will trigger the event.
element.on('loaderstart', callOnLoaderStart); // Users can pass an 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 = usePrevious(options);
React.useEffect(function () {
if (!elementRef.current) {
return;
}
var updates = extractAllowedOptionsUpdates(options, prevOptions, ['paymentRequest']);
if (updates) {
elementRef.current.update(updates);
}
}, [options, prevOptions]);
React.useLayoutEffect(function () {
return function () {
if (elementRef.current) {
elementRef.current.destroy();
elementRef.current = null;
}
};
}, []);
return /*#__PURE__*/React.createElement("div", {
id: id,
className: className,
ref: domNode
});
}; // Only render the Element wrapper in a server environment.
var 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 /*#__PURE__*/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,
onLoadError: propTypes.func,
onLoaderStart: propTypes.func,
options: propTypes.object
};
Element.displayName = displayName;
Element.__elementType = type;
return Element;
};
var isServer = typeof window === 'undefined';
/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var AuBankAccountElement = createElementComponent('auBankAccount', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var CardElement = createElementComponent('card', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var CardNumberElement = createElementComponent('cardNumber', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var CardExpiryElement = createElementComponent('cardExpiry', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var CardCvcElement = createElementComponent('cardCvc', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var FpxBankElement = createElementComponent('fpxBank', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var IbanElement = createElementComponent('iban', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var IdealBankElement = createElementComponent('idealBank', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var P24BankElement = createElementComponent('p24Bank', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var EpsBankElement = createElementComponent('epsBank', isServer);
var PaymentElement = createElementComponent('payment', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);
/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var LinkAuthenticationElement = createElementComponent('linkAuthentication', isServer);
/**
* Requires beta access:
* Contact [Stripe support](https://support.stripe.com/) for more information.
*
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var ShippingAddressElement = createElementComponent('shippingAddress', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var AffirmMessageElement = createElementComponent('affirmMessage', isServer);
/**
* @docs https://stripe.com/docs/stripe-js/react#element-components
*/
var AfterpayClearpayMessageElement = createElementComponent('afterpayClearpayMessage', isServer);
exports.AffirmMessageElement = AffirmMessageElement;
exports.AfterpayClearpayMessageElement = AfterpayClearpayMessageElement;
exports.AuBankAccountElement = AuBankAccountElement;
exports.CardCvcElement = CardCvcElement;
exports.CardElement = CardElement;
exports.CardExpiryElement = CardExpiryElement;
exports.CardNumberElement = CardNumberElement;
exports.Elements = Elements;
exports.ElementsConsumer = ElementsConsumer;
exports.EpsBankElement = EpsBankElement;
exports.FpxBankElement = FpxBankElement;
exports.IbanElement = IbanElement;
exports.IdealBankElement = IdealBankElement;
exports.LinkAuthenticationElement = LinkAuthenticationElement;
exports.P24BankElement = P24BankElement;
exports.PaymentElement = PaymentElement;
exports.PaymentRequestButtonElement = PaymentRequestButtonElement;
exports.ShippingAddressElement = ShippingAddressElement;
exports.useElements = useElements;
exports.useStripe = useStripe;
Object.defineProperty(exports, '__esModule', { value: true });
})));