@paypal/react-paypal-js
Advanced tools
Comparing version 6.0.2 to 7.0.0
@@ -5,2 +5,12 @@ # Changelog | ||
## [7.0.0](https://github.com/paypal/react-paypal-js/compare/v6.0.2...v7.0.0) (2021-06-04) | ||
### ⚠ BREAKING CHANGES | ||
- new file names for built files in dist folder. | ||
### Features | ||
- improve dist folder structure ([b032f77](https://github.com/paypal/react-paypal-js/commit/b032f77ceeb0181123741c0b3422ac19af94131d)) | ||
### [6.0.2](https://github.com/paypal/react-paypal-js/compare/v6.0.1...v6.0.2) (2021-06-04) | ||
@@ -7,0 +17,0 @@ |
import { FunctionComponent, ReactElement } from "react"; | ||
import type { PayPalButtonsComponentOptions } from "@paypal/paypal-js/types/components/buttons"; | ||
export interface PayPalButtonsComponentProps extends PayPalButtonsComponentOptions { | ||
export interface PayPalButtonsComponentProps | ||
extends PayPalButtonsComponentOptions { | ||
/** | ||
@@ -5,0 +6,0 @@ * Used to re-render the component. |
import { FunctionComponent } from "react"; | ||
import type { PayPalMessagesComponentOptions } from "@paypal/paypal-js/types/components/messages"; | ||
export interface PayPalMessagesComponentProps extends PayPalMessagesComponentOptions { | ||
export interface PayPalMessagesComponentProps | ||
extends PayPalMessagesComponentOptions { | ||
forceReRender?: unknown[]; | ||
@@ -5,0 +6,0 @@ className?: string; |
import type { PayPalNamespace } from "@paypal/paypal-js"; | ||
export declare const DEFAULT_PAYPAL_NAMESPACE = "paypal"; | ||
export declare function getPayPalWindowNamespace(namespace?: string): PayPalNamespace; | ||
export declare function getPayPalWindowNamespace( | ||
namespace?: string | ||
): PayPalNamespace; |
@@ -6,35 +6,204 @@ var _excluded = ["loadingStatus"], | ||
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } | ||
function _toConsumableArray(arr) { | ||
return ( | ||
_arrayWithoutHoles(arr) || | ||
_iterableToArray(arr) || | ||
_unsupportedIterableToArray(arr) || | ||
_nonIterableSpread() | ||
); | ||
} | ||
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
function _nonIterableSpread() { | ||
throw new TypeError( | ||
"Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method." | ||
); | ||
} | ||
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } | ||
function _iterableToArray(iter) { | ||
if ( | ||
(typeof Symbol !== "undefined" && iter[Symbol.iterator] != null) || | ||
iter["@@iterator"] != null | ||
) | ||
return Array.from(iter); | ||
} | ||
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } | ||
function _arrayWithoutHoles(arr) { | ||
if (Array.isArray(arr)) return _arrayLikeToArray(arr); | ||
} | ||
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); } | ||
function _slicedToArray(arr, i) { | ||
return ( | ||
_arrayWithHoles(arr) || | ||
_iterableToArrayLimit(arr, i) || | ||
_unsupportedIterableToArray(arr, i) || | ||
_nonIterableRest() | ||
); | ||
} | ||
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } | ||
function _nonIterableRest() { | ||
throw new TypeError( | ||
"Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method." | ||
); | ||
} | ||
function _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 _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 _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 _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 _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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } | ||
function _arrayWithHoles(arr) { | ||
if (Array.isArray(arr)) return arr; | ||
} | ||
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 _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 _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 _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 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 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 _objectSpread(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 _objectSpread(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 _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 _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 _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
function _typeof(obj) { | ||
"@babel/helpers - typeof"; | ||
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { | ||
_typeof = function _typeof(obj) { | ||
return typeof obj; | ||
}; | ||
} else { | ||
_typeof = function _typeof(obj) { | ||
return obj && | ||
typeof Symbol === "function" && | ||
obj.constructor === Symbol && | ||
obj !== Symbol.prototype | ||
? "symbol" | ||
: typeof obj; | ||
}; | ||
} | ||
return _typeof(obj); | ||
} | ||
import React, { createContext, useContext, useReducer, useEffect, useRef, useState } from 'react'; | ||
import React, { | ||
createContext, | ||
useContext, | ||
useReducer, | ||
useEffect, | ||
useRef, | ||
useState, | ||
} from "react"; | ||
/*! | ||
@@ -58,118 +227,136 @@ * paypal-js v3.1.11 (2021-06-03T21:16:51.218Z) | ||
function findScript(url, attributes) { | ||
var currentScript = document.querySelector("script[src=\"" + url + "\"]"); | ||
if (currentScript === null) return null; | ||
var nextScript = createScriptElement(url, attributes); // ignore the data-uid-auto attribute that gets auto-assigned to every script tag | ||
var currentScript = document.querySelector('script[src="' + url + '"]'); | ||
if (currentScript === null) return null; | ||
var nextScript = createScriptElement(url, attributes); // ignore the data-uid-auto attribute that gets auto-assigned to every script tag | ||
var currentScriptDataset = Object.assign({}, currentScript.dataset); | ||
delete currentScriptDataset.uidAuto; // check if the new script has the same number of data attributes | ||
var currentScriptDataset = Object.assign({}, currentScript.dataset); | ||
delete currentScriptDataset.uidAuto; // check if the new script has the same number of data attributes | ||
if (Object.keys(currentScriptDataset).length !== Object.keys(nextScript.dataset).length) { | ||
return null; | ||
} | ||
if ( | ||
Object.keys(currentScriptDataset).length !== | ||
Object.keys(nextScript.dataset).length | ||
) { | ||
return null; | ||
} | ||
var isExactMatch = true; // check if the data attribute values are the same | ||
var isExactMatch = true; // check if the data attribute values are the same | ||
Object.keys(currentScriptDataset).forEach(function (key) { | ||
if (currentScriptDataset[key] !== nextScript.dataset[key]) { | ||
isExactMatch = false; | ||
} | ||
}); | ||
return isExactMatch ? currentScript : null; | ||
Object.keys(currentScriptDataset).forEach(function (key) { | ||
if (currentScriptDataset[key] !== nextScript.dataset[key]) { | ||
isExactMatch = false; | ||
} | ||
}); | ||
return isExactMatch ? currentScript : null; | ||
} | ||
function insertScriptElement(_a) { | ||
var url = _a.url, | ||
attributes = _a.attributes, | ||
onSuccess = _a.onSuccess, | ||
onError = _a.onError; | ||
var newScript = createScriptElement(url, attributes); | ||
newScript.onerror = onError; | ||
newScript.onload = onSuccess; | ||
document.head.insertBefore(newScript, document.head.firstElementChild); | ||
var url = _a.url, | ||
attributes = _a.attributes, | ||
onSuccess = _a.onSuccess, | ||
onError = _a.onError; | ||
var newScript = createScriptElement(url, attributes); | ||
newScript.onerror = onError; | ||
newScript.onload = onSuccess; | ||
document.head.insertBefore(newScript, document.head.firstElementChild); | ||
} | ||
function processOptions(options) { | ||
var sdkBaseURL = "https://www.paypal.com/sdk/js"; | ||
var sdkBaseURL = "https://www.paypal.com/sdk/js"; | ||
if (options.sdkBaseURL) { | ||
sdkBaseURL = options.sdkBaseURL; | ||
delete options.sdkBaseURL; | ||
} | ||
if (options.sdkBaseURL) { | ||
sdkBaseURL = options.sdkBaseURL; | ||
delete options.sdkBaseURL; | ||
} | ||
var processedMerchantIDAttributes = processMerchantID(options["merchant-id"], options["data-merchant-id"]); | ||
var newOptions = Object.assign({}, options, processedMerchantIDAttributes); | ||
var processedMerchantIDAttributes = processMerchantID( | ||
options["merchant-id"], | ||
options["data-merchant-id"] | ||
); | ||
var newOptions = Object.assign({}, options, processedMerchantIDAttributes); | ||
var _a = Object.keys(newOptions).filter(function (key) { | ||
return typeof newOptions[key] !== "undefined" && newOptions[key] !== null && newOptions[key] !== ""; | ||
}).reduce(function (accumulator, key) { | ||
var value = newOptions[key].toString(); | ||
var _a = Object.keys(newOptions) | ||
.filter(function (key) { | ||
return ( | ||
typeof newOptions[key] !== "undefined" && | ||
newOptions[key] !== null && | ||
newOptions[key] !== "" | ||
); | ||
}) | ||
.reduce( | ||
function (accumulator, key) { | ||
var value = newOptions[key].toString(); | ||
if (key.substring(0, 5) === "data-") { | ||
accumulator.dataAttributes[key] = value; | ||
} else { | ||
accumulator.queryParams[key] = value; | ||
} | ||
if (key.substring(0, 5) === "data-") { | ||
accumulator.dataAttributes[key] = value; | ||
} else { | ||
accumulator.queryParams[key] = value; | ||
} | ||
return accumulator; | ||
}, { | ||
queryParams: {}, | ||
dataAttributes: {} | ||
}), | ||
queryParams = _a.queryParams, | ||
dataAttributes = _a.dataAttributes; | ||
return accumulator; | ||
}, | ||
{ | ||
queryParams: {}, | ||
dataAttributes: {}, | ||
} | ||
), | ||
queryParams = _a.queryParams, | ||
dataAttributes = _a.dataAttributes; | ||
return { | ||
url: sdkBaseURL + "?" + objectToQueryString(queryParams), | ||
dataAttributes: dataAttributes | ||
}; | ||
return { | ||
url: sdkBaseURL + "?" + objectToQueryString(queryParams), | ||
dataAttributes: dataAttributes, | ||
}; | ||
} | ||
function objectToQueryString(params) { | ||
var queryString = ""; | ||
Object.keys(params).forEach(function (key) { | ||
if (queryString.length !== 0) queryString += "&"; | ||
queryString += key + "=" + params[key]; | ||
}); | ||
return queryString; | ||
var queryString = ""; | ||
Object.keys(params).forEach(function (key) { | ||
if (queryString.length !== 0) queryString += "&"; | ||
queryString += key + "=" + params[key]; | ||
}); | ||
return queryString; | ||
} | ||
function createScriptElement(url, attributes) { | ||
if (attributes === void 0) { | ||
attributes = {}; | ||
} | ||
if (attributes === void 0) { | ||
attributes = {}; | ||
} | ||
var newScript = document.createElement("script"); | ||
newScript.src = url; | ||
Object.keys(attributes).forEach(function (key) { | ||
newScript.setAttribute(key, attributes[key]); | ||
var newScript = document.createElement("script"); | ||
newScript.src = url; | ||
Object.keys(attributes).forEach(function (key) { | ||
newScript.setAttribute(key, attributes[key]); | ||
if (key === "data-csp-nonce") { | ||
newScript.setAttribute("nonce", attributes["data-csp-nonce"]); | ||
} | ||
}); | ||
return newScript; | ||
if (key === "data-csp-nonce") { | ||
newScript.setAttribute("nonce", attributes["data-csp-nonce"]); | ||
} | ||
}); | ||
return newScript; | ||
} | ||
function processMerchantID(merchantID, dataMerchantID) { | ||
var newMerchantID = ""; | ||
var newDataMerchantID = ""; | ||
var newMerchantID = ""; | ||
var newDataMerchantID = ""; | ||
if (Array.isArray(merchantID)) { | ||
if (merchantID.length > 1) { | ||
newMerchantID = "*"; | ||
newDataMerchantID = merchantID.toString(); | ||
} else { | ||
newMerchantID = merchantID.toString(); | ||
if (Array.isArray(merchantID)) { | ||
if (merchantID.length > 1) { | ||
newMerchantID = "*"; | ||
newDataMerchantID = merchantID.toString(); | ||
} else { | ||
newMerchantID = merchantID.toString(); | ||
} | ||
} else if (typeof merchantID === "string" && merchantID.length > 0) { | ||
newMerchantID = merchantID; | ||
} else if ( | ||
typeof dataMerchantID === "string" && | ||
dataMerchantID.length > 0 | ||
) { | ||
newMerchantID = "*"; | ||
newDataMerchantID = dataMerchantID; | ||
} | ||
} else if (typeof merchantID === "string" && merchantID.length > 0) { | ||
newMerchantID = merchantID; | ||
} else if (typeof dataMerchantID === "string" && dataMerchantID.length > 0) { | ||
newMerchantID = "*"; | ||
newDataMerchantID = dataMerchantID; | ||
} | ||
return { | ||
"merchant-id": newMerchantID, | ||
"data-merchant-id": newDataMerchantID | ||
}; | ||
return { | ||
"merchant-id": newMerchantID, | ||
"data-merchant-id": newDataMerchantID, | ||
}; | ||
} | ||
@@ -184,35 +371,39 @@ /** | ||
function loadScript(options, PromisePonyfill) { | ||
if (PromisePonyfill === void 0) { | ||
PromisePonyfill = getDefaultPromiseImplementation(); | ||
} | ||
if (PromisePonyfill === void 0) { | ||
PromisePonyfill = getDefaultPromiseImplementation(); | ||
} | ||
validateArguments(options, PromisePonyfill); // resolve with null when running in Node | ||
validateArguments(options, PromisePonyfill); // resolve with null when running in Node | ||
if (typeof window === "undefined") return PromisePonyfill.resolve(null); | ||
if (typeof window === "undefined") return PromisePonyfill.resolve(null); | ||
var _a = processOptions(options), | ||
url = _a.url, | ||
dataAttributes = _a.dataAttributes; | ||
var _a = processOptions(options), | ||
url = _a.url, | ||
dataAttributes = _a.dataAttributes; | ||
var namespace = dataAttributes["data-namespace"] || "paypal"; | ||
var existingWindowNamespace = getPayPalWindowNamespace$1(namespace); // resolve with the existing global paypal namespace when a script with the same params already exists | ||
var namespace = dataAttributes["data-namespace"] || "paypal"; | ||
var existingWindowNamespace = getPayPalWindowNamespace$1(namespace); // resolve with the existing global paypal namespace when a script with the same params already exists | ||
if (findScript(url, dataAttributes) && existingWindowNamespace) { | ||
return PromisePonyfill.resolve(existingWindowNamespace); | ||
} | ||
if (findScript(url, dataAttributes) && existingWindowNamespace) { | ||
return PromisePonyfill.resolve(existingWindowNamespace); | ||
} | ||
return loadCustomScript({ | ||
url: url, | ||
attributes: dataAttributes | ||
}, PromisePonyfill).then(function () { | ||
var newWindowNamespace = getPayPalWindowNamespace$1(namespace); | ||
return loadCustomScript( | ||
{ | ||
url: url, | ||
attributes: dataAttributes, | ||
}, | ||
PromisePonyfill | ||
).then(function () { | ||
var newWindowNamespace = getPayPalWindowNamespace$1(namespace); | ||
if (newWindowNamespace) { | ||
return newWindowNamespace; | ||
} | ||
if (newWindowNamespace) { | ||
return newWindowNamespace; | ||
} | ||
throw new Error("The window." + namespace + " global variable is not available."); | ||
}); | ||
throw new Error( | ||
"The window." + namespace + " global variable is not available." | ||
); | ||
}); | ||
} | ||
@@ -227,64 +418,70 @@ /** | ||
function loadCustomScript(options, PromisePonyfill) { | ||
if (PromisePonyfill === void 0) { | ||
PromisePonyfill = getDefaultPromiseImplementation(); | ||
} | ||
if (PromisePonyfill === void 0) { | ||
PromisePonyfill = getDefaultPromiseImplementation(); | ||
} | ||
validateArguments(options, PromisePonyfill); | ||
var url = options.url, | ||
attributes = options.attributes; | ||
validateArguments(options, PromisePonyfill); | ||
var url = options.url, | ||
attributes = options.attributes; | ||
if (typeof url !== "string" || url.length === 0) { | ||
throw new Error("Invalid url."); | ||
} | ||
if (typeof url !== "string" || url.length === 0) { | ||
throw new Error("Invalid url."); | ||
} | ||
if (typeof attributes !== "undefined" && _typeof(attributes) !== "object") { | ||
throw new Error("Expected attributes to be an object."); | ||
} | ||
if (typeof attributes !== "undefined" && _typeof(attributes) !== "object") { | ||
throw new Error("Expected attributes to be an object."); | ||
} | ||
return new PromisePonyfill(function (resolve, reject) { | ||
// resolve with undefined when running in Node | ||
if (typeof window === "undefined") return resolve(); | ||
insertScriptElement({ | ||
url: url, | ||
attributes: attributes, | ||
onSuccess: function onSuccess() { | ||
return resolve(); | ||
}, | ||
onError: function onError() { | ||
return reject(new Error("The script \"" + url + "\" failed to load.")); | ||
} | ||
return new PromisePonyfill(function (resolve, reject) { | ||
// resolve with undefined when running in Node | ||
if (typeof window === "undefined") return resolve(); | ||
insertScriptElement({ | ||
url: url, | ||
attributes: attributes, | ||
onSuccess: function onSuccess() { | ||
return resolve(); | ||
}, | ||
onError: function onError() { | ||
return reject( | ||
new Error('The script "' + url + '" failed to load.') | ||
); | ||
}, | ||
}); | ||
}); | ||
}); | ||
} | ||
function getDefaultPromiseImplementation() { | ||
if (typeof Promise === "undefined") { | ||
throw new Error("Promise is undefined. To resolve the issue, use a Promise polyfill."); | ||
} | ||
if (typeof Promise === "undefined") { | ||
throw new Error( | ||
"Promise is undefined. To resolve the issue, use a Promise polyfill." | ||
); | ||
} | ||
return Promise; | ||
return Promise; | ||
} | ||
function getPayPalWindowNamespace$1(namespace) { | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
return window[namespace]; | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
return window[namespace]; | ||
} | ||
function validateArguments(options, PromisePonyfill) { | ||
if (_typeof(options) !== "object" || options === null) { | ||
throw new Error("Expected an options object."); | ||
} | ||
if (_typeof(options) !== "object" || options === null) { | ||
throw new Error("Expected an options object."); | ||
} | ||
if (typeof PromisePonyfill !== "undefined" && typeof PromisePonyfill !== "function") { | ||
throw new Error("Expected PromisePonyfill to be a function."); | ||
} | ||
if ( | ||
typeof PromisePonyfill !== "undefined" && | ||
typeof PromisePonyfill !== "function" | ||
) { | ||
throw new Error("Expected PromisePonyfill to be a function."); | ||
} | ||
} | ||
var SCRIPT_LOADING_STATE = { | ||
INITIAL: "initial", | ||
PENDING: "pending", | ||
REJECTED: "rejected", | ||
RESOLVED: "resolved" | ||
INITIAL: "initial", | ||
PENDING: "pending", | ||
REJECTED: "rejected", | ||
RESOLVED: "resolved", | ||
}; | ||
@@ -295,111 +492,146 @@ var ScriptContext = createContext(null); | ||
function scriptReducer(state, action) { | ||
switch (action.type) { | ||
case "setLoadingStatus": | ||
return { | ||
options: _objectSpread({}, state.options), | ||
loadingStatus: action.value | ||
}; | ||
switch (action.type) { | ||
case "setLoadingStatus": | ||
return { | ||
options: _objectSpread({}, state.options), | ||
loadingStatus: action.value, | ||
}; | ||
case "resetOptions": | ||
// destroy existing script to make sure only one script loads at a time | ||
destroySDKScript(state.options["data-react-paypal-script-id"]); | ||
return { | ||
loadingStatus: SCRIPT_LOADING_STATE.PENDING, | ||
options: _objectSpread(_objectSpread({}, action.value), {}, { | ||
"data-react-paypal-script-id": "".concat(getNewScriptID()) | ||
}) | ||
}; | ||
case "resetOptions": | ||
// destroy existing script to make sure only one script loads at a time | ||
destroySDKScript(state.options["data-react-paypal-script-id"]); | ||
return { | ||
loadingStatus: SCRIPT_LOADING_STATE.PENDING, | ||
options: _objectSpread( | ||
_objectSpread({}, action.value), | ||
{}, | ||
{ | ||
"data-react-paypal-script-id": "".concat( | ||
getNewScriptID() | ||
), | ||
} | ||
), | ||
}; | ||
default: | ||
{ | ||
return state; | ||
} | ||
} | ||
default: { | ||
return state; | ||
} | ||
} | ||
} | ||
function getNewScriptID() { | ||
return "react-paypal-js-".concat(Math.random().toString(36).substring(7)); | ||
return "react-paypal-js-".concat(Math.random().toString(36).substring(7)); | ||
} | ||
function destroySDKScript(reactPayPalScriptID) { | ||
var scriptNode = document.querySelector("script[data-react-paypal-script-id=\"".concat(reactPayPalScriptID, "\"]")); | ||
if (scriptNode === null) return; | ||
var scriptNode = document.querySelector( | ||
'script[data-react-paypal-script-id="'.concat(reactPayPalScriptID, '"]') | ||
); | ||
if (scriptNode === null) return; | ||
if (scriptNode.parentNode) { | ||
scriptNode.parentNode.removeChild(scriptNode); | ||
} | ||
if (scriptNode.parentNode) { | ||
scriptNode.parentNode.removeChild(scriptNode); | ||
} | ||
} | ||
function usePayPalScriptReducer() { | ||
var scriptContext = useContext(ScriptContext); | ||
var dispatchContext = useContext(ScriptDispatchContext); | ||
var scriptContext = useContext(ScriptContext); | ||
var dispatchContext = useContext(ScriptDispatchContext); | ||
if (scriptContext === null || dispatchContext === null) { | ||
throw new Error("usePayPalScriptReducer must be used within a PayPalScriptProvider"); | ||
} | ||
if (scriptContext === null || dispatchContext === null) { | ||
throw new Error( | ||
"usePayPalScriptReducer must be used within a PayPalScriptProvider" | ||
); | ||
} | ||
var loadingStatus = scriptContext.loadingStatus, | ||
restScriptContext = _objectWithoutProperties(scriptContext, _excluded); | ||
var loadingStatus = scriptContext.loadingStatus, | ||
restScriptContext = _objectWithoutProperties(scriptContext, _excluded); | ||
var derivedStatusContext = _objectSpread(_objectSpread({}, restScriptContext), {}, { | ||
isInitial: loadingStatus === SCRIPT_LOADING_STATE.INITIAL, | ||
isPending: loadingStatus === SCRIPT_LOADING_STATE.PENDING, | ||
isResolved: loadingStatus === SCRIPT_LOADING_STATE.RESOLVED, | ||
isRejected: loadingStatus === SCRIPT_LOADING_STATE.REJECTED | ||
}); | ||
var derivedStatusContext = _objectSpread( | ||
_objectSpread({}, restScriptContext), | ||
{}, | ||
{ | ||
isInitial: loadingStatus === SCRIPT_LOADING_STATE.INITIAL, | ||
isPending: loadingStatus === SCRIPT_LOADING_STATE.PENDING, | ||
isResolved: loadingStatus === SCRIPT_LOADING_STATE.RESOLVED, | ||
isRejected: loadingStatus === SCRIPT_LOADING_STATE.REJECTED, | ||
} | ||
); | ||
return [derivedStatusContext, dispatchContext]; | ||
return [derivedStatusContext, dispatchContext]; | ||
} | ||
var PayPalScriptProvider = function PayPalScriptProvider(_ref) { | ||
var options = _ref.options, | ||
children = _ref.children, | ||
_ref$deferLoading = _ref.deferLoading, | ||
deferLoading = _ref$deferLoading === void 0 ? false : _ref$deferLoading; | ||
var initialState = { | ||
options: _objectSpread(_objectSpread({}, options), {}, { | ||
"data-react-paypal-script-id": "".concat(getNewScriptID()) | ||
}), | ||
loadingStatus: deferLoading ? SCRIPT_LOADING_STATE.INITIAL : SCRIPT_LOADING_STATE.PENDING | ||
}; | ||
var options = _ref.options, | ||
children = _ref.children, | ||
_ref$deferLoading = _ref.deferLoading, | ||
deferLoading = _ref$deferLoading === void 0 ? false : _ref$deferLoading; | ||
var initialState = { | ||
options: _objectSpread( | ||
_objectSpread({}, options), | ||
{}, | ||
{ | ||
"data-react-paypal-script-id": "".concat(getNewScriptID()), | ||
} | ||
), | ||
loadingStatus: deferLoading | ||
? SCRIPT_LOADING_STATE.INITIAL | ||
: SCRIPT_LOADING_STATE.PENDING, | ||
}; | ||
var _useReducer = useReducer(scriptReducer, initialState), | ||
_useReducer2 = _slicedToArray(_useReducer, 2), | ||
state = _useReducer2[0], | ||
dispatch = _useReducer2[1]; | ||
var _useReducer = useReducer(scriptReducer, initialState), | ||
_useReducer2 = _slicedToArray(_useReducer, 2), | ||
state = _useReducer2[0], | ||
dispatch = _useReducer2[1]; | ||
useEffect(function () { | ||
if (deferLoading === false && state.loadingStatus === SCRIPT_LOADING_STATE.INITIAL) { | ||
return dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.PENDING | ||
}); | ||
} | ||
useEffect( | ||
function () { | ||
if ( | ||
deferLoading === false && | ||
state.loadingStatus === SCRIPT_LOADING_STATE.INITIAL | ||
) { | ||
return dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.PENDING, | ||
}); | ||
} | ||
if (state.loadingStatus !== SCRIPT_LOADING_STATE.PENDING) return; | ||
var isSubscribed = true; | ||
loadScript(state.options).then(function () { | ||
if (isSubscribed) { | ||
dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.RESOLVED | ||
}); | ||
} | ||
})["catch"](function () { | ||
if (isSubscribed) { | ||
dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.REJECTED | ||
}); | ||
} | ||
}); | ||
return function () { | ||
isSubscribed = false; | ||
}; | ||
}, [options, deferLoading, state.loadingStatus]); | ||
return React.createElement(ScriptContext.Provider, { | ||
value: state | ||
}, React.createElement(ScriptDispatchContext.Provider, { | ||
value: dispatch | ||
}, children)); | ||
if (state.loadingStatus !== SCRIPT_LOADING_STATE.PENDING) return; | ||
var isSubscribed = true; | ||
loadScript(state.options) | ||
.then(function () { | ||
if (isSubscribed) { | ||
dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.RESOLVED, | ||
}); | ||
} | ||
}) | ||
["catch"](function () { | ||
if (isSubscribed) { | ||
dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.REJECTED, | ||
}); | ||
} | ||
}); | ||
return function () { | ||
isSubscribed = false; | ||
}; | ||
}, | ||
[options, deferLoading, state.loadingStatus] | ||
); | ||
return React.createElement( | ||
ScriptContext.Provider, | ||
{ | ||
value: state, | ||
}, | ||
React.createElement( | ||
ScriptDispatchContext.Provider, | ||
{ | ||
value: dispatch, | ||
}, | ||
children | ||
) | ||
); | ||
}; | ||
@@ -410,5 +642,8 @@ | ||
function getPayPalWindowNamespace() { | ||
var namespace = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_PAYPAL_NAMESPACE; | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
return window[namespace]; | ||
var namespace = | ||
arguments.length > 0 && arguments[0] !== undefined | ||
? arguments[0] | ||
: DEFAULT_PAYPAL_NAMESPACE; | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
return window[namespace]; | ||
} | ||
@@ -426,139 +661,182 @@ /** | ||
var PayPalButtons = function PayPalButtons(_ref2) { | ||
var _ref2$className = _ref2.className, | ||
className = _ref2$className === void 0 ? "" : _ref2$className, | ||
_ref2$disabled = _ref2.disabled, | ||
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled, | ||
_ref2$children = _ref2.children, | ||
children = _ref2$children === void 0 ? null : _ref2$children, | ||
_ref2$forceReRender = _ref2.forceReRender, | ||
forceReRender = _ref2$forceReRender === void 0 ? [] : _ref2$forceReRender, | ||
buttonProps = _objectWithoutProperties(_ref2, _excluded2); | ||
var _ref2$className = _ref2.className, | ||
className = _ref2$className === void 0 ? "" : _ref2$className, | ||
_ref2$disabled = _ref2.disabled, | ||
disabled = _ref2$disabled === void 0 ? false : _ref2$disabled, | ||
_ref2$children = _ref2.children, | ||
children = _ref2$children === void 0 ? null : _ref2$children, | ||
_ref2$forceReRender = _ref2.forceReRender, | ||
forceReRender = | ||
_ref2$forceReRender === void 0 ? [] : _ref2$forceReRender, | ||
buttonProps = _objectWithoutProperties(_ref2, _excluded2); | ||
var buttonsContainerRef = useRef(null); | ||
var buttons = useRef(null); | ||
var buttonsContainerRef = useRef(null); | ||
var buttons = useRef(null); | ||
var _usePayPalScriptReduc = usePayPalScriptReducer(), | ||
_usePayPalScriptReduc2 = _slicedToArray(_usePayPalScriptReduc, 1), | ||
_usePayPalScriptReduc3 = _usePayPalScriptReduc2[0], | ||
isResolved = _usePayPalScriptReduc3.isResolved, | ||
options = _usePayPalScriptReduc3.options; | ||
var _usePayPalScriptReduc = usePayPalScriptReducer(), | ||
_usePayPalScriptReduc2 = _slicedToArray(_usePayPalScriptReduc, 1), | ||
_usePayPalScriptReduc3 = _usePayPalScriptReduc2[0], | ||
isResolved = _usePayPalScriptReduc3.isResolved, | ||
options = _usePayPalScriptReduc3.options; | ||
var _useState = useState(null), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
initActions = _useState2[0], | ||
setInitActions = _useState2[1]; | ||
var _useState = useState(null), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
initActions = _useState2[0], | ||
setInitActions = _useState2[1]; | ||
var _useState3 = useState(true), | ||
_useState4 = _slicedToArray(_useState3, 2), | ||
isEligible = _useState4[0], | ||
setIsEligible = _useState4[1]; | ||
var _useState3 = useState(true), | ||
_useState4 = _slicedToArray(_useState3, 2), | ||
isEligible = _useState4[0], | ||
setIsEligible = _useState4[1]; | ||
var _useState5 = useState(null), | ||
_useState6 = _slicedToArray(_useState5, 2), | ||
setErrorState = _useState6[1]; | ||
var _useState5 = useState(null), | ||
_useState6 = _slicedToArray(_useState5, 2), | ||
setErrorState = _useState6[1]; | ||
function closeButtonsComponent() { | ||
if (buttons.current !== null) { | ||
buttons.current.close()["catch"](function () {// ignore errors when closing the component | ||
}); | ||
} | ||
} // useEffect hook for rendering the buttons | ||
function closeButtonsComponent() { | ||
if (buttons.current !== null) { | ||
buttons.current.close()["catch"](function () { | ||
// ignore errors when closing the component | ||
}); | ||
} | ||
} // useEffect hook for rendering the buttons | ||
useEffect(function () { | ||
// verify the sdk script has successfully loaded | ||
if (isResolved === false) { | ||
return closeButtonsComponent; | ||
} | ||
useEffect(function () { | ||
// verify the sdk script has successfully loaded | ||
if (isResolved === false) { | ||
return closeButtonsComponent; | ||
} | ||
var paypalWindowNamespace = getPayPalWindowNamespace( | ||
options["data-namespace"] | ||
); // verify dependency on window object | ||
var paypalWindowNamespace = getPayPalWindowNamespace(options["data-namespace"]); // verify dependency on window object | ||
if ( | ||
paypalWindowNamespace === undefined || | ||
paypalWindowNamespace.Buttons === undefined | ||
) { | ||
setErrorState(function () { | ||
throw new Error(getErrorMessage$2(options)); | ||
}); | ||
return closeButtonsComponent; | ||
} | ||
if (paypalWindowNamespace === undefined || paypalWindowNamespace.Buttons === undefined) { | ||
setErrorState(function () { | ||
throw new Error(getErrorMessage$2(options)); | ||
}); | ||
return closeButtonsComponent; | ||
} | ||
var decoratedOnInit = function decoratedOnInit(data, actions) { | ||
setInitActions(actions); | ||
var decoratedOnInit = function decoratedOnInit(data, actions) { | ||
setInitActions(actions); | ||
if (typeof buttonProps.onInit === "function") { | ||
buttonProps.onInit(data, actions); | ||
} | ||
}; | ||
if (typeof buttonProps.onInit === "function") { | ||
buttonProps.onInit(data, actions); | ||
} | ||
}; | ||
buttons.current = paypalWindowNamespace.Buttons( | ||
_objectSpread( | ||
_objectSpread({}, buttonProps), | ||
{}, | ||
{ | ||
onInit: decoratedOnInit, | ||
} | ||
) | ||
); // only render the button when eligible | ||
buttons.current = paypalWindowNamespace.Buttons(_objectSpread(_objectSpread({}, buttonProps), {}, { | ||
onInit: decoratedOnInit | ||
})); // only render the button when eligible | ||
if (buttons.current.isEligible() === false) { | ||
setIsEligible(false); | ||
return closeButtonsComponent; | ||
} | ||
if (buttons.current.isEligible() === false) { | ||
setIsEligible(false); | ||
return closeButtonsComponent; | ||
} | ||
if (buttonsContainerRef.current === null) { | ||
return closeButtonsComponent; | ||
} | ||
if (buttonsContainerRef.current === null) { | ||
return closeButtonsComponent; | ||
} | ||
buttons.current | ||
.render(buttonsContainerRef.current) | ||
["catch"](function (err) { | ||
// component failed to render, possibly because it was closed or destroyed. | ||
if ( | ||
buttonsContainerRef.current === null || | ||
buttonsContainerRef.current.children.length === 0 | ||
) { | ||
// paypal buttons container is no longer in the DOM, we can safely ignore the error | ||
return; | ||
} // paypal buttons container is still in the DOM | ||
buttons.current.render(buttonsContainerRef.current)["catch"](function (err) { | ||
// component failed to render, possibly because it was closed or destroyed. | ||
if (buttonsContainerRef.current === null || buttonsContainerRef.current.children.length === 0) { | ||
// paypal buttons container is no longer in the DOM, we can safely ignore the error | ||
return; | ||
} // paypal buttons container is still in the DOM | ||
setErrorState(function () { | ||
throw new Error( | ||
"Failed to render <PayPalButtons /> component. ".concat( | ||
err | ||
) | ||
); | ||
}); | ||
}); | ||
return closeButtonsComponent; | ||
}, [isResolved].concat(_toConsumableArray(forceReRender), [ | ||
buttonProps.fundingSource, | ||
])); // useEffect hook for managing disabled state | ||
useEffect( | ||
function () { | ||
if (initActions === null) { | ||
return; | ||
} | ||
setErrorState(function () { | ||
throw new Error("Failed to render <PayPalButtons /> component. ".concat(err)); | ||
}); | ||
}); | ||
return closeButtonsComponent; | ||
}, [isResolved].concat(_toConsumableArray(forceReRender), [buttonProps.fundingSource])); // useEffect hook for managing disabled state | ||
if (disabled === true) { | ||
initActions.disable()["catch"](function () { | ||
// ignore errors when disabling the component | ||
}); | ||
} else { | ||
initActions.enable()["catch"](function () { | ||
// ignore errors when enabling the component | ||
}); | ||
} | ||
}, | ||
[disabled, initActions] | ||
); | ||
var isDisabledStyle = disabled | ||
? { | ||
opacity: 0.33, | ||
} | ||
: {}; | ||
var classNames = "" | ||
.concat(className, " ") | ||
.concat(disabled ? "paypal-buttons-disabled" : "") | ||
.trim(); | ||
useEffect(function () { | ||
if (initActions === null) { | ||
return; | ||
if (isEligible === false) { | ||
return children; | ||
} | ||
if (disabled === true) { | ||
initActions.disable()["catch"](function () {// ignore errors when disabling the component | ||
}); | ||
} else { | ||
initActions.enable()["catch"](function () {// ignore errors when enabling the component | ||
}); | ||
} | ||
}, [disabled, initActions]); | ||
var isDisabledStyle = disabled ? { | ||
opacity: 0.33 | ||
} : {}; | ||
var classNames = "".concat(className, " ").concat(disabled ? "paypal-buttons-disabled" : "").trim(); | ||
if (isEligible === false) { | ||
return children; | ||
} | ||
return React.createElement("div", { | ||
ref: buttonsContainerRef, | ||
style: isDisabledStyle, | ||
className: classNames | ||
}); | ||
return React.createElement("div", { | ||
ref: buttonsContainerRef, | ||
style: isDisabledStyle, | ||
className: classNames, | ||
}); | ||
}; | ||
function getErrorMessage$2(_ref3) { | ||
var _ref3$components = _ref3.components, | ||
components = _ref3$components === void 0 ? "" : _ref3$components, | ||
_ref3$dataNamespace = _ref3["data-namespace"], | ||
dataNamespace = _ref3$dataNamespace === void 0 ? DEFAULT_PAYPAL_NAMESPACE : _ref3$dataNamespace; | ||
var errorMessage = "Unable to render <PayPalButtons /> because window.".concat(dataNamespace, ".Buttons is undefined."); // the JS SDK includes the Buttons component by default when no 'components' are specified. | ||
// The 'buttons' component must be included in the 'components' list when using it with other components. | ||
var _ref3$components = _ref3.components, | ||
components = _ref3$components === void 0 ? "" : _ref3$components, | ||
_ref3$dataNamespace = _ref3["data-namespace"], | ||
dataNamespace = | ||
_ref3$dataNamespace === void 0 | ||
? DEFAULT_PAYPAL_NAMESPACE | ||
: _ref3$dataNamespace; | ||
var errorMessage = | ||
"Unable to render <PayPalButtons /> because window.".concat( | ||
dataNamespace, | ||
".Buttons is undefined." | ||
); // the JS SDK includes the Buttons component by default when no 'components' are specified. | ||
// The 'buttons' component must be included in the 'components' list when using it with other components. | ||
if (components.length && !components.includes("buttons")) { | ||
var expectedComponents = "".concat(components, ",buttons"); | ||
errorMessage += "\nTo fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:" + "\n`<PayPalScriptProvider options={{ components: '".concat(expectedComponents, "'}}>`."); | ||
} | ||
if (components.length && !components.includes("buttons")) { | ||
var expectedComponents = "".concat(components, ",buttons"); | ||
errorMessage += | ||
"\nTo fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:" + | ||
"\n`<PayPalScriptProvider options={{ components: '".concat( | ||
expectedComponents, | ||
"'}}>`." | ||
); | ||
} | ||
return errorMessage; | ||
return errorMessage; | ||
} | ||
@@ -588,187 +866,254 @@ /** | ||
var PayPalMarks = function PayPalMarks(_ref4) { | ||
var _ref4$className = _ref4.className, | ||
className = _ref4$className === void 0 ? "" : _ref4$className, | ||
markProps = _objectWithoutProperties(_ref4, _excluded3); | ||
var _ref4$className = _ref4.className, | ||
className = _ref4$className === void 0 ? "" : _ref4$className, | ||
markProps = _objectWithoutProperties(_ref4, _excluded3); | ||
var _usePayPalScriptReduc4 = usePayPalScriptReducer(), | ||
_usePayPalScriptReduc5 = _slicedToArray(_usePayPalScriptReduc4, 1), | ||
_usePayPalScriptReduc6 = _usePayPalScriptReduc5[0], | ||
isResolved = _usePayPalScriptReduc6.isResolved, | ||
options = _usePayPalScriptReduc6.options; | ||
var _usePayPalScriptReduc4 = usePayPalScriptReducer(), | ||
_usePayPalScriptReduc5 = _slicedToArray(_usePayPalScriptReduc4, 1), | ||
_usePayPalScriptReduc6 = _usePayPalScriptReduc5[0], | ||
isResolved = _usePayPalScriptReduc6.isResolved, | ||
options = _usePayPalScriptReduc6.options; | ||
var markContainerRef = useRef(null); | ||
var mark = useRef(null); | ||
var markContainerRef = useRef(null); | ||
var mark = useRef(null); | ||
var _useState7 = useState(null), | ||
_useState8 = _slicedToArray(_useState7, 2), | ||
setErrorState = _useState8[1]; | ||
var _useState7 = useState(null), | ||
_useState8 = _slicedToArray(_useState7, 2), | ||
setErrorState = _useState8[1]; | ||
useEffect(function () { | ||
// verify the sdk script has successfully loaded | ||
if (isResolved === false) { | ||
return; | ||
} // don't rerender when already rendered | ||
useEffect( | ||
function () { | ||
// verify the sdk script has successfully loaded | ||
if (isResolved === false) { | ||
return; | ||
} // don't rerender when already rendered | ||
if (mark.current !== null) { | ||
return; | ||
} | ||
if (mark.current !== null) { | ||
return; | ||
} | ||
var paypalWindowNamespace = getPayPalWindowNamespace( | ||
options["data-namespace"] | ||
); // verify dependency on window object | ||
var paypalWindowNamespace = getPayPalWindowNamespace(options["data-namespace"]); // verify dependency on window object | ||
if ( | ||
paypalWindowNamespace === undefined || | ||
paypalWindowNamespace.Marks === undefined | ||
) { | ||
setErrorState(function () { | ||
throw new Error(getErrorMessage$1(options)); | ||
}); | ||
return; | ||
} | ||
if (paypalWindowNamespace === undefined || paypalWindowNamespace.Marks === undefined) { | ||
setErrorState(function () { | ||
throw new Error(getErrorMessage$1(options)); | ||
}); | ||
return; | ||
} | ||
mark.current = paypalWindowNamespace.Marks( | ||
_objectSpread({}, markProps) | ||
); // only render the mark when eligible | ||
mark.current = paypalWindowNamespace.Marks(_objectSpread({}, markProps)); // only render the mark when eligible | ||
if (mark.current.isEligible() === false) { | ||
return; | ||
} | ||
if (mark.current.isEligible() === false) { | ||
return; | ||
} | ||
if (markContainerRef.current === null) { | ||
return; | ||
} | ||
if (markContainerRef.current === null) { | ||
return; | ||
} | ||
mark.current | ||
.render(markContainerRef.current) | ||
["catch"](function (err) { | ||
// component failed to render, possibly because it was closed or destroyed. | ||
if ( | ||
markContainerRef.current === null || | ||
markContainerRef.current.children.length === 0 | ||
) { | ||
// paypal marks container is no longer in the DOM, we can safely ignore the error | ||
return; | ||
} // paypal marks container is still in the DOM | ||
mark.current.render(markContainerRef.current)["catch"](function (err) { | ||
// component failed to render, possibly because it was closed or destroyed. | ||
if (markContainerRef.current === null || markContainerRef.current.children.length === 0) { | ||
// paypal marks container is no longer in the DOM, we can safely ignore the error | ||
return; | ||
} // paypal marks container is still in the DOM | ||
setErrorState(function () { | ||
throw new Error("Failed to render <PayPalMarks /> component. ".concat(err)); | ||
}); | ||
setErrorState(function () { | ||
throw new Error( | ||
"Failed to render <PayPalMarks /> component. ".concat( | ||
err | ||
) | ||
); | ||
}); | ||
}); | ||
}, | ||
[isResolved, markProps.fundingSource] | ||
); | ||
return React.createElement("div", { | ||
ref: markContainerRef, | ||
className: className, | ||
}); | ||
}, [isResolved, markProps.fundingSource]); | ||
return React.createElement("div", { | ||
ref: markContainerRef, | ||
className: className | ||
}); | ||
}; | ||
function getErrorMessage$1(_ref5) { | ||
var _ref5$components = _ref5.components, | ||
components = _ref5$components === void 0 ? "" : _ref5$components, | ||
_ref5$dataNamespace = _ref5["data-namespace"], | ||
dataNamespace = _ref5$dataNamespace === void 0 ? DEFAULT_PAYPAL_NAMESPACE : _ref5$dataNamespace; | ||
var errorMessage = "Unable to render <PayPalMarks /> because window.".concat(dataNamespace, ".Marks is undefined."); // the JS SDK does not load the Marks component by default. It must be passed into the "components" query parameter. | ||
var _ref5$components = _ref5.components, | ||
components = _ref5$components === void 0 ? "" : _ref5$components, | ||
_ref5$dataNamespace = _ref5["data-namespace"], | ||
dataNamespace = | ||
_ref5$dataNamespace === void 0 | ||
? DEFAULT_PAYPAL_NAMESPACE | ||
: _ref5$dataNamespace; | ||
var errorMessage = | ||
"Unable to render <PayPalMarks /> because window.".concat( | ||
dataNamespace, | ||
".Marks is undefined." | ||
); // the JS SDK does not load the Marks component by default. It must be passed into the "components" query parameter. | ||
if (!components.includes("marks")) { | ||
var expectedComponents = components ? "".concat(components, ",marks") : "marks"; | ||
errorMessage += "\nTo fix the issue, add 'marks' to the list of components passed to the parent PayPalScriptProvider:" + "\n`<PayPalScriptProvider options={{ components: '".concat(expectedComponents, "'}}>`."); | ||
} | ||
if (!components.includes("marks")) { | ||
var expectedComponents = components | ||
? "".concat(components, ",marks") | ||
: "marks"; | ||
errorMessage += | ||
"\nTo fix the issue, add 'marks' to the list of components passed to the parent PayPalScriptProvider:" + | ||
"\n`<PayPalScriptProvider options={{ components: '".concat( | ||
expectedComponents, | ||
"'}}>`." | ||
); | ||
} | ||
return errorMessage; | ||
return errorMessage; | ||
} | ||
var PayPalMessages = function PayPalMessages(_ref6) { | ||
var _ref6$className = _ref6.className, | ||
className = _ref6$className === void 0 ? "" : _ref6$className, | ||
_ref6$forceReRender = _ref6.forceReRender, | ||
forceReRender = _ref6$forceReRender === void 0 ? [] : _ref6$forceReRender, | ||
messageProps = _objectWithoutProperties(_ref6, _excluded4); | ||
var _ref6$className = _ref6.className, | ||
className = _ref6$className === void 0 ? "" : _ref6$className, | ||
_ref6$forceReRender = _ref6.forceReRender, | ||
forceReRender = | ||
_ref6$forceReRender === void 0 ? [] : _ref6$forceReRender, | ||
messageProps = _objectWithoutProperties(_ref6, _excluded4); | ||
var _usePayPalScriptReduc7 = usePayPalScriptReducer(), | ||
_usePayPalScriptReduc8 = _slicedToArray(_usePayPalScriptReduc7, 1), | ||
_usePayPalScriptReduc9 = _usePayPalScriptReduc8[0], | ||
isResolved = _usePayPalScriptReduc9.isResolved, | ||
options = _usePayPalScriptReduc9.options; | ||
var _usePayPalScriptReduc7 = usePayPalScriptReducer(), | ||
_usePayPalScriptReduc8 = _slicedToArray(_usePayPalScriptReduc7, 1), | ||
_usePayPalScriptReduc9 = _usePayPalScriptReduc8[0], | ||
isResolved = _usePayPalScriptReduc9.isResolved, | ||
options = _usePayPalScriptReduc9.options; | ||
var messagesContainerRef = useRef(null); | ||
var messages = useRef(null); | ||
var messagesContainerRef = useRef(null); | ||
var messages = useRef(null); | ||
var _useState9 = useState(null), | ||
_useState10 = _slicedToArray(_useState9, 2), | ||
setErrorState = _useState10[1]; | ||
var _useState9 = useState(null), | ||
_useState10 = _slicedToArray(_useState9, 2), | ||
setErrorState = _useState10[1]; | ||
useEffect(function () { | ||
// verify the sdk script has successfully loaded | ||
if (isResolved === false) { | ||
return; | ||
} | ||
useEffect(function () { | ||
// verify the sdk script has successfully loaded | ||
if (isResolved === false) { | ||
return; | ||
} | ||
var paypalWindowNamespace = getPayPalWindowNamespace(options["data-namespace"]); // verify dependency on window object | ||
var paypalWindowNamespace = getPayPalWindowNamespace( | ||
options["data-namespace"] | ||
); // verify dependency on window object | ||
if (paypalWindowNamespace === undefined || paypalWindowNamespace.Messages === undefined) { | ||
setErrorState(function () { | ||
throw new Error(getErrorMessage(options)); | ||
}); | ||
return; | ||
} | ||
if ( | ||
paypalWindowNamespace === undefined || | ||
paypalWindowNamespace.Messages === undefined | ||
) { | ||
setErrorState(function () { | ||
throw new Error(getErrorMessage(options)); | ||
}); | ||
return; | ||
} | ||
messages.current = paypalWindowNamespace.Messages(_objectSpread({}, messageProps)); | ||
messages.current = paypalWindowNamespace.Messages( | ||
_objectSpread({}, messageProps) | ||
); | ||
if (messagesContainerRef.current === null) { | ||
return; | ||
} | ||
if (messagesContainerRef.current === null) { | ||
return; | ||
} | ||
messages.current.render(messagesContainerRef.current)["catch"](function (err) { | ||
// component failed to render, possibly because it was closed or destroyed. | ||
if (messagesContainerRef.current === null || messagesContainerRef.current.children.length === 0) { | ||
// paypal messages container is no longer in the DOM, we can safely ignore the error | ||
return; | ||
} // paypal messages container is still in the DOM | ||
messages.current | ||
.render(messagesContainerRef.current) | ||
["catch"](function (err) { | ||
// component failed to render, possibly because it was closed or destroyed. | ||
if ( | ||
messagesContainerRef.current === null || | ||
messagesContainerRef.current.children.length === 0 | ||
) { | ||
// paypal messages container is no longer in the DOM, we can safely ignore the error | ||
return; | ||
} // paypal messages container is still in the DOM | ||
setErrorState(function () { | ||
throw new Error("Failed to render <PayPalMessages /> component. ".concat(err)); | ||
}); | ||
setErrorState(function () { | ||
throw new Error( | ||
"Failed to render <PayPalMessages /> component. ".concat( | ||
err | ||
) | ||
); | ||
}); | ||
}); | ||
}, [isResolved].concat(_toConsumableArray(forceReRender))); | ||
return React.createElement("div", { | ||
ref: messagesContainerRef, | ||
className: className, | ||
}); | ||
}, [isResolved].concat(_toConsumableArray(forceReRender))); | ||
return React.createElement("div", { | ||
ref: messagesContainerRef, | ||
className: className | ||
}); | ||
}; | ||
function getErrorMessage(_ref7) { | ||
var _ref7$components = _ref7.components, | ||
components = _ref7$components === void 0 ? "" : _ref7$components, | ||
_ref7$dataNamespace = _ref7["data-namespace"], | ||
dataNamespace = _ref7$dataNamespace === void 0 ? DEFAULT_PAYPAL_NAMESPACE : _ref7$dataNamespace; | ||
var errorMessage = "Unable to render <PayPalMessages /> because window.".concat(dataNamespace, ".Messages is undefined."); // the JS SDK does not load the Messages component by default. It must be passed into the "components" query parameter. | ||
var _ref7$components = _ref7.components, | ||
components = _ref7$components === void 0 ? "" : _ref7$components, | ||
_ref7$dataNamespace = _ref7["data-namespace"], | ||
dataNamespace = | ||
_ref7$dataNamespace === void 0 | ||
? DEFAULT_PAYPAL_NAMESPACE | ||
: _ref7$dataNamespace; | ||
var errorMessage = | ||
"Unable to render <PayPalMessages /> because window.".concat( | ||
dataNamespace, | ||
".Messages is undefined." | ||
); // the JS SDK does not load the Messages component by default. It must be passed into the "components" query parameter. | ||
if (!components.includes("messages")) { | ||
var expectedComponents = components ? "".concat(components, ",messages") : "messages"; | ||
errorMessage += "\nTo fix the issue, add 'messages' to the list of components passed to the parent PayPalScriptProvider:" + "\n`<PayPalScriptProvider options={{ components: '".concat(expectedComponents, "'}}>`."); | ||
} | ||
if (!components.includes("messages")) { | ||
var expectedComponents = components | ||
? "".concat(components, ",messages") | ||
: "messages"; | ||
errorMessage += | ||
"\nTo fix the issue, add 'messages' to the list of components passed to the parent PayPalScriptProvider:" + | ||
"\n`<PayPalScriptProvider options={{ components: '".concat( | ||
expectedComponents, | ||
"'}}>`." | ||
); | ||
} | ||
return errorMessage; | ||
return errorMessage; | ||
} | ||
var FUNDING = { | ||
PAYPAL: 'paypal', | ||
VENMO: 'venmo', | ||
APPLEPAY: 'applepay', | ||
ITAU: 'itau', | ||
CREDIT: 'credit', | ||
PAYLATER: 'paylater', | ||
CARD: 'card', | ||
IDEAL: 'ideal', | ||
SEPA: 'sepa', | ||
BANCONTACT: 'bancontact', | ||
GIROPAY: 'giropay', | ||
SOFORT: 'sofort', | ||
EPS: 'eps', | ||
MYBANK: 'mybank', | ||
P24: 'p24', | ||
VERKKOPANKKI: 'verkkopankki', | ||
PAYU: 'payu', | ||
BLIK: 'blik', | ||
TRUSTLY: 'trustly', | ||
ZIMPLER: 'zimpler', | ||
MAXIMA: 'maxima', | ||
OXXO: 'oxxo', | ||
BOLETO: 'boleto', | ||
WECHATPAY: 'wechatpay', | ||
MERCADOPAGO: 'mercadopago' | ||
PAYPAL: "paypal", | ||
VENMO: "venmo", | ||
APPLEPAY: "applepay", | ||
ITAU: "itau", | ||
CREDIT: "credit", | ||
PAYLATER: "paylater", | ||
CARD: "card", | ||
IDEAL: "ideal", | ||
SEPA: "sepa", | ||
BANCONTACT: "bancontact", | ||
GIROPAY: "giropay", | ||
SOFORT: "sofort", | ||
EPS: "eps", | ||
MYBANK: "mybank", | ||
P24: "p24", | ||
VERKKOPANKKI: "verkkopankki", | ||
PAYU: "payu", | ||
BLIK: "blik", | ||
TRUSTLY: "trustly", | ||
ZIMPLER: "zimpler", | ||
MAXIMA: "maxima", | ||
OXXO: "oxxo", | ||
BOLETO: "boleto", | ||
WECHATPAY: "wechatpay", | ||
MERCADOPAGO: "mercadopago", | ||
}; | ||
export { FUNDING, PayPalButtons, PayPalMarks, PayPalMessages, PayPalScriptProvider, usePayPalScriptReducer }; | ||
export { | ||
FUNDING, | ||
PayPalButtons, | ||
PayPalMarks, | ||
PayPalMessages, | ||
PayPalScriptProvider, | ||
usePayPalScriptReducer, | ||
}; |
@@ -1,10 +0,12 @@ | ||
'use strict'; | ||
"use strict"; | ||
Object.defineProperty(exports, '__esModule', { value: true }); | ||
Object.defineProperty(exports, "__esModule", { value: true }); | ||
var React = require('react'); | ||
var React = require("react"); | ||
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } | ||
function _interopDefaultLegacy(e) { | ||
return e && typeof e === "object" && "default" in e ? e : { default: e }; | ||
} | ||
var React__default = /*#__PURE__*/_interopDefaultLegacy(React); | ||
var React__default = /*#__PURE__*/ _interopDefaultLegacy(React); | ||
@@ -28,118 +30,136 @@ /*! | ||
function findScript(url, attributes) { | ||
var currentScript = document.querySelector("script[src=\"" + url + "\"]"); | ||
if (currentScript === null) return null; | ||
var nextScript = createScriptElement(url, attributes); // ignore the data-uid-auto attribute that gets auto-assigned to every script tag | ||
var currentScript = document.querySelector('script[src="' + url + '"]'); | ||
if (currentScript === null) return null; | ||
var nextScript = createScriptElement(url, attributes); // ignore the data-uid-auto attribute that gets auto-assigned to every script tag | ||
var currentScriptDataset = Object.assign({}, currentScript.dataset); | ||
delete currentScriptDataset.uidAuto; // check if the new script has the same number of data attributes | ||
var currentScriptDataset = Object.assign({}, currentScript.dataset); | ||
delete currentScriptDataset.uidAuto; // check if the new script has the same number of data attributes | ||
if (Object.keys(currentScriptDataset).length !== Object.keys(nextScript.dataset).length) { | ||
return null; | ||
} | ||
if ( | ||
Object.keys(currentScriptDataset).length !== | ||
Object.keys(nextScript.dataset).length | ||
) { | ||
return null; | ||
} | ||
var isExactMatch = true; // check if the data attribute values are the same | ||
var isExactMatch = true; // check if the data attribute values are the same | ||
Object.keys(currentScriptDataset).forEach(function (key) { | ||
if (currentScriptDataset[key] !== nextScript.dataset[key]) { | ||
isExactMatch = false; | ||
} | ||
}); | ||
return isExactMatch ? currentScript : null; | ||
Object.keys(currentScriptDataset).forEach(function (key) { | ||
if (currentScriptDataset[key] !== nextScript.dataset[key]) { | ||
isExactMatch = false; | ||
} | ||
}); | ||
return isExactMatch ? currentScript : null; | ||
} | ||
function insertScriptElement(_a) { | ||
var url = _a.url, | ||
attributes = _a.attributes, | ||
onSuccess = _a.onSuccess, | ||
onError = _a.onError; | ||
var newScript = createScriptElement(url, attributes); | ||
newScript.onerror = onError; | ||
newScript.onload = onSuccess; | ||
document.head.insertBefore(newScript, document.head.firstElementChild); | ||
var url = _a.url, | ||
attributes = _a.attributes, | ||
onSuccess = _a.onSuccess, | ||
onError = _a.onError; | ||
var newScript = createScriptElement(url, attributes); | ||
newScript.onerror = onError; | ||
newScript.onload = onSuccess; | ||
document.head.insertBefore(newScript, document.head.firstElementChild); | ||
} | ||
function processOptions(options) { | ||
var sdkBaseURL = "https://www.paypal.com/sdk/js"; | ||
var sdkBaseURL = "https://www.paypal.com/sdk/js"; | ||
if (options.sdkBaseURL) { | ||
sdkBaseURL = options.sdkBaseURL; | ||
delete options.sdkBaseURL; | ||
} | ||
if (options.sdkBaseURL) { | ||
sdkBaseURL = options.sdkBaseURL; | ||
delete options.sdkBaseURL; | ||
} | ||
var processedMerchantIDAttributes = processMerchantID(options["merchant-id"], options["data-merchant-id"]); | ||
var newOptions = Object.assign({}, options, processedMerchantIDAttributes); | ||
var processedMerchantIDAttributes = processMerchantID( | ||
options["merchant-id"], | ||
options["data-merchant-id"] | ||
); | ||
var newOptions = Object.assign({}, options, processedMerchantIDAttributes); | ||
var _a = Object.keys(newOptions).filter(function (key) { | ||
return typeof newOptions[key] !== "undefined" && newOptions[key] !== null && newOptions[key] !== ""; | ||
}).reduce(function (accumulator, key) { | ||
var value = newOptions[key].toString(); | ||
var _a = Object.keys(newOptions) | ||
.filter(function (key) { | ||
return ( | ||
typeof newOptions[key] !== "undefined" && | ||
newOptions[key] !== null && | ||
newOptions[key] !== "" | ||
); | ||
}) | ||
.reduce( | ||
function (accumulator, key) { | ||
var value = newOptions[key].toString(); | ||
if (key.substring(0, 5) === "data-") { | ||
accumulator.dataAttributes[key] = value; | ||
} else { | ||
accumulator.queryParams[key] = value; | ||
} | ||
if (key.substring(0, 5) === "data-") { | ||
accumulator.dataAttributes[key] = value; | ||
} else { | ||
accumulator.queryParams[key] = value; | ||
} | ||
return accumulator; | ||
}, { | ||
queryParams: {}, | ||
dataAttributes: {} | ||
}), | ||
queryParams = _a.queryParams, | ||
dataAttributes = _a.dataAttributes; | ||
return accumulator; | ||
}, | ||
{ | ||
queryParams: {}, | ||
dataAttributes: {}, | ||
} | ||
), | ||
queryParams = _a.queryParams, | ||
dataAttributes = _a.dataAttributes; | ||
return { | ||
url: sdkBaseURL + "?" + objectToQueryString(queryParams), | ||
dataAttributes: dataAttributes | ||
}; | ||
return { | ||
url: sdkBaseURL + "?" + objectToQueryString(queryParams), | ||
dataAttributes: dataAttributes, | ||
}; | ||
} | ||
function objectToQueryString(params) { | ||
var queryString = ""; | ||
Object.keys(params).forEach(function (key) { | ||
if (queryString.length !== 0) queryString += "&"; | ||
queryString += key + "=" + params[key]; | ||
}); | ||
return queryString; | ||
var queryString = ""; | ||
Object.keys(params).forEach(function (key) { | ||
if (queryString.length !== 0) queryString += "&"; | ||
queryString += key + "=" + params[key]; | ||
}); | ||
return queryString; | ||
} | ||
function createScriptElement(url, attributes) { | ||
if (attributes === void 0) { | ||
attributes = {}; | ||
} | ||
if (attributes === void 0) { | ||
attributes = {}; | ||
} | ||
var newScript = document.createElement("script"); | ||
newScript.src = url; | ||
Object.keys(attributes).forEach(function (key) { | ||
newScript.setAttribute(key, attributes[key]); | ||
var newScript = document.createElement("script"); | ||
newScript.src = url; | ||
Object.keys(attributes).forEach(function (key) { | ||
newScript.setAttribute(key, attributes[key]); | ||
if (key === "data-csp-nonce") { | ||
newScript.setAttribute("nonce", attributes["data-csp-nonce"]); | ||
} | ||
}); | ||
return newScript; | ||
if (key === "data-csp-nonce") { | ||
newScript.setAttribute("nonce", attributes["data-csp-nonce"]); | ||
} | ||
}); | ||
return newScript; | ||
} | ||
function processMerchantID(merchantID, dataMerchantID) { | ||
var newMerchantID = ""; | ||
var newDataMerchantID = ""; | ||
var newMerchantID = ""; | ||
var newDataMerchantID = ""; | ||
if (Array.isArray(merchantID)) { | ||
if (merchantID.length > 1) { | ||
newMerchantID = "*"; | ||
newDataMerchantID = merchantID.toString(); | ||
} else { | ||
newMerchantID = merchantID.toString(); | ||
if (Array.isArray(merchantID)) { | ||
if (merchantID.length > 1) { | ||
newMerchantID = "*"; | ||
newDataMerchantID = merchantID.toString(); | ||
} else { | ||
newMerchantID = merchantID.toString(); | ||
} | ||
} else if (typeof merchantID === "string" && merchantID.length > 0) { | ||
newMerchantID = merchantID; | ||
} else if ( | ||
typeof dataMerchantID === "string" && | ||
dataMerchantID.length > 0 | ||
) { | ||
newMerchantID = "*"; | ||
newDataMerchantID = dataMerchantID; | ||
} | ||
} else if (typeof merchantID === "string" && merchantID.length > 0) { | ||
newMerchantID = merchantID; | ||
} else if (typeof dataMerchantID === "string" && dataMerchantID.length > 0) { | ||
newMerchantID = "*"; | ||
newDataMerchantID = dataMerchantID; | ||
} | ||
return { | ||
"merchant-id": newMerchantID, | ||
"data-merchant-id": newDataMerchantID | ||
}; | ||
return { | ||
"merchant-id": newMerchantID, | ||
"data-merchant-id": newDataMerchantID, | ||
}; | ||
} | ||
@@ -154,35 +174,39 @@ /** | ||
function loadScript(options, PromisePonyfill) { | ||
if (PromisePonyfill === void 0) { | ||
PromisePonyfill = getDefaultPromiseImplementation(); | ||
} | ||
if (PromisePonyfill === void 0) { | ||
PromisePonyfill = getDefaultPromiseImplementation(); | ||
} | ||
validateArguments(options, PromisePonyfill); // resolve with null when running in Node | ||
validateArguments(options, PromisePonyfill); // resolve with null when running in Node | ||
if (typeof window === "undefined") return PromisePonyfill.resolve(null); | ||
if (typeof window === "undefined") return PromisePonyfill.resolve(null); | ||
var _a = processOptions(options), | ||
url = _a.url, | ||
dataAttributes = _a.dataAttributes; | ||
var _a = processOptions(options), | ||
url = _a.url, | ||
dataAttributes = _a.dataAttributes; | ||
var namespace = dataAttributes["data-namespace"] || "paypal"; | ||
var existingWindowNamespace = getPayPalWindowNamespace$1(namespace); // resolve with the existing global paypal namespace when a script with the same params already exists | ||
var namespace = dataAttributes["data-namespace"] || "paypal"; | ||
var existingWindowNamespace = getPayPalWindowNamespace$1(namespace); // resolve with the existing global paypal namespace when a script with the same params already exists | ||
if (findScript(url, dataAttributes) && existingWindowNamespace) { | ||
return PromisePonyfill.resolve(existingWindowNamespace); | ||
} | ||
if (findScript(url, dataAttributes) && existingWindowNamespace) { | ||
return PromisePonyfill.resolve(existingWindowNamespace); | ||
} | ||
return loadCustomScript({ | ||
url: url, | ||
attributes: dataAttributes | ||
}, PromisePonyfill).then(function () { | ||
var newWindowNamespace = getPayPalWindowNamespace$1(namespace); | ||
return loadCustomScript( | ||
{ | ||
url: url, | ||
attributes: dataAttributes, | ||
}, | ||
PromisePonyfill | ||
).then(function () { | ||
var newWindowNamespace = getPayPalWindowNamespace$1(namespace); | ||
if (newWindowNamespace) { | ||
return newWindowNamespace; | ||
} | ||
if (newWindowNamespace) { | ||
return newWindowNamespace; | ||
} | ||
throw new Error("The window." + namespace + " global variable is not available."); | ||
}); | ||
throw new Error( | ||
"The window." + namespace + " global variable is not available." | ||
); | ||
}); | ||
} | ||
@@ -197,57 +221,63 @@ /** | ||
function loadCustomScript(options, PromisePonyfill) { | ||
if (PromisePonyfill === void 0) { | ||
PromisePonyfill = getDefaultPromiseImplementation(); | ||
} | ||
if (PromisePonyfill === void 0) { | ||
PromisePonyfill = getDefaultPromiseImplementation(); | ||
} | ||
validateArguments(options, PromisePonyfill); | ||
var url = options.url, | ||
attributes = options.attributes; | ||
validateArguments(options, PromisePonyfill); | ||
var url = options.url, | ||
attributes = options.attributes; | ||
if (typeof url !== "string" || url.length === 0) { | ||
throw new Error("Invalid url."); | ||
} | ||
if (typeof url !== "string" || url.length === 0) { | ||
throw new Error("Invalid url."); | ||
} | ||
if (typeof attributes !== "undefined" && typeof attributes !== "object") { | ||
throw new Error("Expected attributes to be an object."); | ||
} | ||
if (typeof attributes !== "undefined" && typeof attributes !== "object") { | ||
throw new Error("Expected attributes to be an object."); | ||
} | ||
return new PromisePonyfill(function (resolve, reject) { | ||
// resolve with undefined when running in Node | ||
if (typeof window === "undefined") return resolve(); | ||
insertScriptElement({ | ||
url: url, | ||
attributes: attributes, | ||
onSuccess: function onSuccess() { | ||
return resolve(); | ||
}, | ||
onError: function onError() { | ||
return reject(new Error("The script \"" + url + "\" failed to load.")); | ||
} | ||
return new PromisePonyfill(function (resolve, reject) { | ||
// resolve with undefined when running in Node | ||
if (typeof window === "undefined") return resolve(); | ||
insertScriptElement({ | ||
url: url, | ||
attributes: attributes, | ||
onSuccess: function onSuccess() { | ||
return resolve(); | ||
}, | ||
onError: function onError() { | ||
return reject( | ||
new Error('The script "' + url + '" failed to load.') | ||
); | ||
}, | ||
}); | ||
}); | ||
}); | ||
} | ||
function getDefaultPromiseImplementation() { | ||
if (typeof Promise === "undefined") { | ||
throw new Error("Promise is undefined. To resolve the issue, use a Promise polyfill."); | ||
} | ||
if (typeof Promise === "undefined") { | ||
throw new Error( | ||
"Promise is undefined. To resolve the issue, use a Promise polyfill." | ||
); | ||
} | ||
return Promise; | ||
return Promise; | ||
} | ||
function getPayPalWindowNamespace$1(namespace) { | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
return window[namespace]; | ||
// eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
return window[namespace]; | ||
} | ||
function validateArguments(options, PromisePonyfill) { | ||
if (typeof options !== "object" || options === null) { | ||
throw new Error("Expected an options object."); | ||
} | ||
if (typeof options !== "object" || options === null) { | ||
throw new Error("Expected an options object."); | ||
} | ||
if (typeof PromisePonyfill !== "undefined" && typeof PromisePonyfill !== "function") { | ||
throw new Error("Expected PromisePonyfill to be a function."); | ||
} | ||
if ( | ||
typeof PromisePonyfill !== "undefined" && | ||
typeof PromisePonyfill !== "function" | ||
) { | ||
throw new Error("Expected PromisePonyfill to be a function."); | ||
} | ||
} | ||
@@ -291,5 +321,6 @@ | ||
function destroySDKScript(reactPayPalScriptID) { | ||
const scriptNode = document.querySelector(`script[data-react-paypal-script-id="${reactPayPalScriptID}"]`); | ||
if (scriptNode === null) | ||
return; | ||
const scriptNode = document.querySelector( | ||
`script[data-react-paypal-script-id="${reactPayPalScriptID}"]` | ||
); | ||
if (scriptNode === null) return; | ||
if (scriptNode.parentNode) { | ||
@@ -303,3 +334,5 @@ scriptNode.parentNode.removeChild(scriptNode); | ||
if (scriptContext === null || dispatchContext === null) { | ||
throw new Error("usePayPalScriptReducer must be used within a PayPalScriptProvider"); | ||
throw new Error( | ||
"usePayPalScriptReducer must be used within a PayPalScriptProvider" | ||
); | ||
} | ||
@@ -316,3 +349,3 @@ const { loadingStatus, ...restScriptContext } = scriptContext; | ||
} | ||
const PayPalScriptProvider = ({ options, children, deferLoading = false, }) => { | ||
const PayPalScriptProvider = ({ options, children, deferLoading = false }) => { | ||
const initialState = { | ||
@@ -329,4 +362,6 @@ options: { | ||
React.useEffect(() => { | ||
if (deferLoading === false && | ||
state.loadingStatus === SCRIPT_LOADING_STATE.INITIAL) { | ||
if ( | ||
deferLoading === false && | ||
state.loadingStatus === SCRIPT_LOADING_STATE.INITIAL | ||
) { | ||
return dispatch({ | ||
@@ -337,22 +372,21 @@ type: "setLoadingStatus", | ||
} | ||
if (state.loadingStatus !== SCRIPT_LOADING_STATE.PENDING) | ||
return; | ||
if (state.loadingStatus !== SCRIPT_LOADING_STATE.PENDING) return; | ||
let isSubscribed = true; | ||
loadScript(state.options) | ||
.then(() => { | ||
if (isSubscribed) { | ||
dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.RESOLVED, | ||
}); | ||
} | ||
}) | ||
if (isSubscribed) { | ||
dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.RESOLVED, | ||
}); | ||
} | ||
}) | ||
.catch(() => { | ||
if (isSubscribed) { | ||
dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.REJECTED, | ||
}); | ||
} | ||
}); | ||
if (isSubscribed) { | ||
dispatch({ | ||
type: "setLoadingStatus", | ||
value: SCRIPT_LOADING_STATE.REJECTED, | ||
}); | ||
} | ||
}); | ||
return () => { | ||
@@ -362,4 +396,11 @@ isSubscribed = false; | ||
}, [options, deferLoading, state.loadingStatus]); | ||
return (React__default['default'].createElement(ScriptContext.Provider, { value: state }, | ||
React__default['default'].createElement(ScriptDispatchContext.Provider, { value: dispatch }, children))); | ||
return React__default["default"].createElement( | ||
ScriptContext.Provider, | ||
{ value: state }, | ||
React__default["default"].createElement( | ||
ScriptDispatchContext.Provider, | ||
{ value: dispatch }, | ||
children | ||
) | ||
); | ||
}; | ||
@@ -383,3 +424,9 @@ | ||
*/ | ||
const PayPalButtons = ({ className = "", disabled = false, children = null, forceReRender = [], ...buttonProps }) => { | ||
const PayPalButtons = ({ | ||
className = "", | ||
disabled = false, | ||
children = null, | ||
forceReRender = [], | ||
...buttonProps | ||
}) => { | ||
const buttonsContainerRef = React.useRef(null); | ||
@@ -404,6 +451,10 @@ const buttons = React.useRef(null); | ||
} | ||
const paypalWindowNamespace = getPayPalWindowNamespace(options["data-namespace"]); | ||
const paypalWindowNamespace = getPayPalWindowNamespace( | ||
options["data-namespace"] | ||
); | ||
// verify dependency on window object | ||
if (paypalWindowNamespace === undefined || | ||
paypalWindowNamespace.Buttons === undefined) { | ||
if ( | ||
paypalWindowNamespace === undefined || | ||
paypalWindowNamespace.Buttons === undefined | ||
) { | ||
setErrorState(() => { | ||
@@ -434,4 +485,6 @@ throw new Error(getErrorMessage$2(options)); | ||
// component failed to render, possibly because it was closed or destroyed. | ||
if (buttonsContainerRef.current === null || | ||
buttonsContainerRef.current.children.length === 0) { | ||
if ( | ||
buttonsContainerRef.current === null || | ||
buttonsContainerRef.current.children.length === 0 | ||
) { | ||
// paypal buttons container is no longer in the DOM, we can safely ignore the error | ||
@@ -442,3 +495,5 @@ return; | ||
setErrorState(() => { | ||
throw new Error(`Failed to render <PayPalButtons /> component. ${err}`); | ||
throw new Error( | ||
`Failed to render <PayPalButtons /> component. ${err}` | ||
); | ||
}); | ||
@@ -457,4 +512,3 @@ }); | ||
}); | ||
} | ||
else { | ||
} else { | ||
initActions.enable().catch(() => { | ||
@@ -466,9 +520,18 @@ // ignore errors when enabling the component | ||
const isDisabledStyle = disabled ? { opacity: 0.33 } : {}; | ||
const classNames = `${className} ${disabled ? "paypal-buttons-disabled" : ""}`.trim(); | ||
const classNames = `${className} ${ | ||
disabled ? "paypal-buttons-disabled" : "" | ||
}`.trim(); | ||
if (isEligible === false) { | ||
return children; | ||
} | ||
return (React__default['default'].createElement("div", { ref: buttonsContainerRef, style: isDisabledStyle, className: classNames })); | ||
return React__default["default"].createElement("div", { | ||
ref: buttonsContainerRef, | ||
style: isDisabledStyle, | ||
className: classNames, | ||
}); | ||
}; | ||
function getErrorMessage$2({ components = "", "data-namespace": dataNamespace = DEFAULT_PAYPAL_NAMESPACE, }) { | ||
function getErrorMessage$2({ | ||
components = "", | ||
"data-namespace": dataNamespace = DEFAULT_PAYPAL_NAMESPACE, | ||
}) { | ||
let errorMessage = `Unable to render <PayPalButtons /> because window.${dataNamespace}.Buttons is undefined.`; | ||
@@ -481,3 +544,3 @@ // the JS SDK includes the Buttons component by default when no 'components' are specified. | ||
"\nTo fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:" + | ||
`\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`; | ||
`\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`; | ||
} | ||
@@ -523,6 +586,10 @@ return errorMessage; | ||
} | ||
const paypalWindowNamespace = getPayPalWindowNamespace(options["data-namespace"]); | ||
const paypalWindowNamespace = getPayPalWindowNamespace( | ||
options["data-namespace"] | ||
); | ||
// verify dependency on window object | ||
if (paypalWindowNamespace === undefined || | ||
paypalWindowNamespace.Marks === undefined) { | ||
if ( | ||
paypalWindowNamespace === undefined || | ||
paypalWindowNamespace.Marks === undefined | ||
) { | ||
setErrorState(() => { | ||
@@ -543,4 +610,6 @@ throw new Error(getErrorMessage$1(options)); | ||
// component failed to render, possibly because it was closed or destroyed. | ||
if (markContainerRef.current === null || | ||
markContainerRef.current.children.length === 0) { | ||
if ( | ||
markContainerRef.current === null || | ||
markContainerRef.current.children.length === 0 | ||
) { | ||
// paypal marks container is no longer in the DOM, we can safely ignore the error | ||
@@ -551,9 +620,17 @@ return; | ||
setErrorState(() => { | ||
throw new Error(`Failed to render <PayPalMarks /> component. ${err}`); | ||
throw new Error( | ||
`Failed to render <PayPalMarks /> component. ${err}` | ||
); | ||
}); | ||
}); | ||
}, [isResolved, markProps.fundingSource]); | ||
return React__default['default'].createElement("div", { ref: markContainerRef, className: className }); | ||
return React__default["default"].createElement("div", { | ||
ref: markContainerRef, | ||
className: className, | ||
}); | ||
}; | ||
function getErrorMessage$1({ components = "", "data-namespace": dataNamespace = DEFAULT_PAYPAL_NAMESPACE, }) { | ||
function getErrorMessage$1({ | ||
components = "", | ||
"data-namespace": dataNamespace = DEFAULT_PAYPAL_NAMESPACE, | ||
}) { | ||
let errorMessage = `Unable to render <PayPalMarks /> because window.${dataNamespace}.Marks is undefined.`; | ||
@@ -565,3 +642,3 @@ // the JS SDK does not load the Marks component by default. It must be passed into the "components" query parameter. | ||
"\nTo fix the issue, add 'marks' to the list of components passed to the parent PayPalScriptProvider:" + | ||
`\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`; | ||
`\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`; | ||
} | ||
@@ -571,3 +648,7 @@ return errorMessage; | ||
const PayPalMessages = ({ className = "", forceReRender = [], ...messageProps }) => { | ||
const PayPalMessages = ({ | ||
className = "", | ||
forceReRender = [], | ||
...messageProps | ||
}) => { | ||
const [{ isResolved, options }] = usePayPalScriptReducer(); | ||
@@ -582,6 +663,10 @@ const messagesContainerRef = React.useRef(null); | ||
} | ||
const paypalWindowNamespace = getPayPalWindowNamespace(options["data-namespace"]); | ||
const paypalWindowNamespace = getPayPalWindowNamespace( | ||
options["data-namespace"] | ||
); | ||
// verify dependency on window object | ||
if (paypalWindowNamespace === undefined || | ||
paypalWindowNamespace.Messages === undefined) { | ||
if ( | ||
paypalWindowNamespace === undefined || | ||
paypalWindowNamespace.Messages === undefined | ||
) { | ||
setErrorState(() => { | ||
@@ -598,4 +683,6 @@ throw new Error(getErrorMessage(options)); | ||
// component failed to render, possibly because it was closed or destroyed. | ||
if (messagesContainerRef.current === null || | ||
messagesContainerRef.current.children.length === 0) { | ||
if ( | ||
messagesContainerRef.current === null || | ||
messagesContainerRef.current.children.length === 0 | ||
) { | ||
// paypal messages container is no longer in the DOM, we can safely ignore the error | ||
@@ -606,9 +693,17 @@ return; | ||
setErrorState(() => { | ||
throw new Error(`Failed to render <PayPalMessages /> component. ${err}`); | ||
throw new Error( | ||
`Failed to render <PayPalMessages /> component. ${err}` | ||
); | ||
}); | ||
}); | ||
}, [isResolved, ...forceReRender]); | ||
return React__default['default'].createElement("div", { ref: messagesContainerRef, className: className }); | ||
return React__default["default"].createElement("div", { | ||
ref: messagesContainerRef, | ||
className: className, | ||
}); | ||
}; | ||
function getErrorMessage({ components = "", "data-namespace": dataNamespace = DEFAULT_PAYPAL_NAMESPACE, }) { | ||
function getErrorMessage({ | ||
components = "", | ||
"data-namespace": dataNamespace = DEFAULT_PAYPAL_NAMESPACE, | ||
}) { | ||
let errorMessage = `Unable to render <PayPalMessages /> because window.${dataNamespace}.Messages is undefined.`; | ||
@@ -622,3 +717,3 @@ // the JS SDK does not load the Messages component by default. It must be passed into the "components" query parameter. | ||
"\nTo fix the issue, add 'messages' to the list of components passed to the parent PayPalScriptProvider:" + | ||
`\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`; | ||
`\n\`<PayPalScriptProvider options={{ components: '${expectedComponents}'}}>\`.`; | ||
} | ||
@@ -629,27 +724,27 @@ return errorMessage; | ||
var FUNDING = { | ||
PAYPAL: 'paypal', | ||
VENMO: 'venmo', | ||
APPLEPAY: 'applepay', | ||
ITAU: 'itau', | ||
CREDIT: 'credit', | ||
PAYLATER: 'paylater', | ||
CARD: 'card', | ||
IDEAL: 'ideal', | ||
SEPA: 'sepa', | ||
BANCONTACT: 'bancontact', | ||
GIROPAY: 'giropay', | ||
SOFORT: 'sofort', | ||
EPS: 'eps', | ||
MYBANK: 'mybank', | ||
P24: 'p24', | ||
VERKKOPANKKI: 'verkkopankki', | ||
PAYU: 'payu', | ||
BLIK: 'blik', | ||
TRUSTLY: 'trustly', | ||
ZIMPLER: 'zimpler', | ||
MAXIMA: 'maxima', | ||
OXXO: 'oxxo', | ||
BOLETO: 'boleto', | ||
WECHATPAY: 'wechatpay', | ||
MERCADOPAGO: 'mercadopago' | ||
PAYPAL: "paypal", | ||
VENMO: "venmo", | ||
APPLEPAY: "applepay", | ||
ITAU: "itau", | ||
CREDIT: "credit", | ||
PAYLATER: "paylater", | ||
CARD: "card", | ||
IDEAL: "ideal", | ||
SEPA: "sepa", | ||
BANCONTACT: "bancontact", | ||
GIROPAY: "giropay", | ||
SOFORT: "sofort", | ||
EPS: "eps", | ||
MYBANK: "mybank", | ||
P24: "p24", | ||
VERKKOPANKKI: "verkkopankki", | ||
PAYU: "payu", | ||
BLIK: "blik", | ||
TRUSTLY: "trustly", | ||
ZIMPLER: "zimpler", | ||
MAXIMA: "maxima", | ||
OXXO: "oxxo", | ||
BOLETO: "boleto", | ||
WECHATPAY: "wechatpay", | ||
MERCADOPAGO: "mercadopago", | ||
}; | ||
@@ -656,0 +751,0 @@ |
@@ -12,3 +12,4 @@ import React, { FunctionComponent } from "react"; | ||
}; | ||
declare type ScriptLoadingState = typeof SCRIPT_LOADING_STATE[keyof typeof SCRIPT_LOADING_STATE]; | ||
declare type ScriptLoadingState = | ||
typeof SCRIPT_LOADING_STATE[keyof typeof SCRIPT_LOADING_STATE]; | ||
interface ScriptContextDerivedState { | ||
@@ -21,9 +22,11 @@ options: ReactPayPalScriptOptions; | ||
} | ||
declare type ScriptReducerAction = { | ||
type: "setLoadingStatus"; | ||
value: ScriptLoadingState; | ||
} | { | ||
type: "resetOptions"; | ||
value: ReactPayPalScriptOptions; | ||
}; | ||
declare type ScriptReducerAction = | ||
| { | ||
type: "setLoadingStatus"; | ||
value: ScriptLoadingState; | ||
} | ||
| { | ||
type: "resetOptions"; | ||
value: ReactPayPalScriptOptions; | ||
}; | ||
declare type ScriptReducerDispatch = (action: ScriptReducerAction) => void; | ||
@@ -30,0 +33,0 @@ declare function usePayPalScriptReducer(): [ |
{ | ||
"name": "@paypal/react-paypal-js", | ||
"version": "6.0.2", | ||
"version": "7.0.0", | ||
"description": "React components for the PayPal JS SDK", | ||
@@ -15,4 +15,4 @@ "keywords": [ | ||
], | ||
"main": "dist/react-paypal.node.js", | ||
"module": "dist/react-paypal.esm.js", | ||
"main": "index.js", | ||
"module": "dist/esm/react-paypal-js.js", | ||
"types": "dist/index.d.ts", | ||
@@ -45,3 +45,3 @@ "scripts": { | ||
"dependencies": { | ||
"@paypal/paypal-js": "^3.1.11", | ||
"@paypal/paypal-js": "^4.0.0", | ||
"@paypal/sdk-constants": "^1.0.106" | ||
@@ -83,2 +83,4 @@ }, | ||
"rollup": "^2.50.6", | ||
"rollup-plugin-cleanup": "^3.2.1", | ||
"rollup-plugin-terser": "^7.0.2", | ||
"shelljs": "^0.8.4", | ||
@@ -85,0 +87,0 @@ "standard-version": "^9.3.0", |
@@ -9,2 +9,3 @@ # react-paypal-js | ||
<a href="https://www.npmjs.com/package/@paypal/react-paypal-js"><img src="https://img.shields.io/npm/v/@paypal/react-paypal-js.svg?style=flat-square" alt="npm version"></a> | ||
<a href="https://bundlephobia.com/result?p=@paypal/react-paypal-js"><img src="https://img.shields.io/bundlephobia/minzip/@paypal/react-paypal-js.svg?style=flat-square" alt="bundle size"></a> | ||
<a href="https://www.npmtrends.com/@paypal/react-paypal-js"><img src="https://img.shields.io/npm/dm/@paypal/react-paypal-js.svg?style=flat-square" alt="npm downloads"></a> | ||
@@ -11,0 +12,0 @@ <a href="https://github.com/paypal/react-paypal-js/blob/main/LICENSE"><img src="https://img.shields.io/npm/l/@paypal/react-paypal-js.svg?style=flat-square" alt="apache license"></a> |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Minified code
QualityThis package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
161593
17
3090
171
38
1
1
1
+ Added@paypal/paypal-js@4.2.2(transitive)
- Removed@paypal/paypal-js@3.1.11(transitive)
Updated@paypal/paypal-js@^4.0.0