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

Comparing version 7.1.2 to 7.2.0

CHANGELOG.md

@@ -5,2 +5,14 @@ # Changelog
 
+## [7.2.0](https://github.com/paypal/react-paypal-js/compare/v7.1.2...v7.2.0) (2021-07-11)
+
+### Features
+
+-   more robust package publishing ([#130](https://github.com/paypal/react-paypal-js/issues/130)) ([e5caf02](https://github.com/paypal/react-paypal-js/commit/e5caf02ece24b22f50f7f82b40203358746b5cc2))
+
+### Bug Fixes
+
+-   **release:** do not publish types from storybook ([#131](https://github.com/paypal/react-paypal-js/issues/131)) ([6534d59](https://github.com/paypal/react-paypal-js/commit/6534d595033dc9960b1fe6939a31482e8f22fdbd))
+-   increase opacity for disabled button ([d1ac1d2](https://github.com/paypal/react-paypal-js/commit/d1ac1d28d729774900dd757e0829812ab4cbc4f9))
+-   type declarations don’t depend on internal typings ([#129](https://github.com/paypal/react-paypal-js/issues/129)) ([76a3b9f](https://github.com/paypal/react-paypal-js/commit/76a3b9f72b4893aa7c2210e0d77711820a875bef))
+
 ### [7.1.2](https://github.com/paypal/react-paypal-js/compare/v7.1.1...v7.1.2) (2021-07-05)
@@ -7,0 +19,0 @@

dist/cjs/react-paypal-js.js

 /*!
- * react-paypal-js v7.1.2 (2021-07-05T21:48:03.272Z)
+ * react-paypal-js v7.2.0 (2021-07-11T21:19:10.801Z)
  * Copyright 2020-present, PayPal, Inc. All rights reserved.
@@ -325,11 +325,28 @@ *
 /**
- * This `<PayPalButtons />` component renders the [Smart Payment Buttons](https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/#buttons).
- * It relies on the `<PayPalScriptProvider />` parent component for managing state related to loading the JS SDK script.
- *
- * Use props for customizing your buttons. For example, here's how you would use the `style` and `createOrder` options:
- *
- * ```jsx
- *     <PayPalButtons style={{ layout: "vertical" }} createOrder={(data, actions) => {}} />
- * ```
- */
+This `<PayPalButtons />` component renders the [Smart Payment Buttons](https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/#buttons).
+It relies on the `<PayPalScriptProvider />` parent component for managing state related to loading the JS SDK script.
+
+Use props for customizing your buttons. For example, here's how you would use the `style` and `createOrder` options:
+
+```jsx
+    import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
+
+    <PayPalScriptProvider options={{ "client-id": "test" }}>
+        <PayPalButtons
+            style={{ layout: "horizontal" }}
+            createOrder={(data, actions) => {
+                return actions.order.create({
+                    purchase_units: [
+                        {
+                            amount: {
+                                value: "2.00",
+                            },
+                        },
+                    ],
+                });
+            }}
+        />;
+    </PayPalScriptProvider>
+```
+*/
 var PayPalButtons = function (_a) {
@@ -410,3 +427,3 @@ var _b = _a.className, className = _b === void 0 ? "" : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.children, children = _d === void 0 ? null : _d, _e = _a.forceReRender, forceReRender = _e === void 0 ? [] : _e, buttonProps = __rest(_a, ["className", "disabled", "children", "forceReRender"]);
     }, [disabled, initActions]);
-    var isDisabledStyle = disabled ? { opacity: 0.33 } : {};
+    var isDisabledStyle = disabled ? { opacity: 0.38 } : {};
     var classNames = (className + " " + (disabled ? "paypal-buttons-disabled" : "")).trim();
@@ -433,23 +450,21 @@ if (isEligible === false) {
 /**
- * The `<PayPalMarks />` component is used for conditionally rendering different payment options using radio buttons.
- * The [Display PayPal Buttons with other Payment Methods guide](https://developer.paypal.com/docs/business/checkout/add-capabilities/buyer-experience/#display-paypal-buttons-with-other-payment-methods) describes this style of integration in detail.
- * It relies on the `<PayPalScriptProvider />` parent component for managing state related to loading the JS SDK script.
- *
- * ```jsx
- *     <PayPalMarks />
- * ```
- *
- * This component can also be configured to use a single funding source similar to the [standalone buttons](https://developer.paypal.com/docs/business/checkout/configure-payments/standalone-buttons/) approach.
- * A `FUNDING` object is exported by this library which has a key for every available funding source option.
- *
- * ```js
- *     import { FUNDING } from '@paypal/react-paypal-js'
- * ```
- *
- * Use this `FUNDING` constant to set the `fundingSource` prop.
- *
- * ```jsx
- *     <PayPalMarks fundingSource={FUNDING.PAYPAL}/>
- * ```
- */
+The `<PayPalMarks />` component is used for conditionally rendering different payment options using radio buttons.
+The [Display PayPal Buttons with other Payment Methods guide](https://developer.paypal.com/docs/business/checkout/add-capabilities/buyer-experience/#display-paypal-buttons-with-other-payment-methods) describes this style of integration in detail.
+It relies on the `<PayPalScriptProvider />` parent component for managing state related to loading the JS SDK script.
+
+```jsx
+    <PayPalMarks />
+```
+
+This component can also be configured to use a single funding source similar to the [standalone buttons](https://developer.paypal.com/docs/business/checkout/configure-payments/standalone-buttons/) approach.
+A `FUNDING` object is exported by this library which has a key for every available funding source option.
+
+```jsx
+    import { PayPalScriptProvider, PayPalMarks, FUNDING } from "@paypal/react-paypal-js";
+
+    <PayPalScriptProvider options={{ "client-id": "test", components: "buttons,marks" }}>
+        <PayPalMarks fundingSource={FUNDING.PAYPAL}/>
+    </PayPalScriptProvider>
+```
+*/
 var PayPalMarks = function (_a) {
@@ -571,3 +586,3 @@ var _b = _a.className, className = _b === void 0 ? "" : _b, markProps = __rest(_a, ["className"]);
 
-var FUNDING = {
+var FUNDING$1 = {
   PAYPAL: 'paypal',
@@ -600,2 +615,8 @@ VENMO: 'venmo',
 
+// We do not re-export `FUNDING` from the `sdk-constants` module
+// directly because it has no type definitions.
+//
+// See https://github.com/paypal/react-paypal-js/issues/125
+var FUNDING = FUNDING$1;
+
 exports.FUNDING = FUNDING;
@@ -602,0 +623,0 @@ exports.PayPalButtons = PayPalButtons;

dist/cjs/react-paypal-js.min.js

 /*!
- * react-paypal-js v7.1.2 (2021-07-05T21:48:03.272Z)
+ * react-paypal-js v7.2.0 (2021-07-11T21:19:10.801Z)
  * Copyright 2020-present, PayPal, Inc. All rights reserved.
@@ -17,2 +17,2 @@ *
  */
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e),r=function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}function o(e,t,n){if(n||2===arguments.length)for(var r,a=0,o=t.length;a<o;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return e.concat(r||t)}function i(e){var t="https://www.paypal.com/sdk/js";e.sdkBaseURL&&(t=e.sdkBaseURL,delete e.sdkBaseURL);var n=function(e,t){var n="",r="";Array.isArray(e)?e.length>1?(n="*",r=e.toString()):n=e.toString():"string"==typeof e&&e.length>0?n=e:"string"==typeof t&&t.length>0&&(n="*",r=t);return{"merchant-id":n,"data-merchant-id":r}}(e["merchant-id"],e["data-merchant-id"]),r=Object.assign({},e,n),a=Object.keys(r).filter((function(e){return void 0!==r[e]&&null!==r[e]&&""!==r[e]})).reduce((function(e,t){var n=r[t].toString();return"data-"===t.substring(0,5)?e.dataAttributes[t]=n:e.queryParams[t]=n,e}),{queryParams:{},dataAttributes:{}}),o=a.queryParams,i=a.dataAttributes;return{url:t+"?"+u(o),dataAttributes:i}}function u(e){var t="";return Object.keys(e).forEach((function(n){0!==t.length&&(t+="&"),t+=n+"="+e[n]})),t}function s(e,t){void 0===t&&(t={});var n=document.createElement("script");return n.src=e,Object.keys(t).forEach((function(e){n.setAttribute(e,t[e]),"data-csp-nonce"===e&&n.setAttribute("nonce",t["data-csp-nonce"])})),n}function c(e,t){if(void 0===t&&(t=l()),f(e,t),"undefined"==typeof window)return t.resolve(null);var n=i(e),r=n.url,a=n.dataAttributes,o=a["data-namespace"]||"paypal",u=d(o);return function(e,t){var n=document.querySelector('script[src="'+e+'"]');if(null===n)return null;var r=s(e,t),a=Object.assign({},n.dataset);if(delete a.uidAuto,Object.keys(a).length!==Object.keys(r.dataset).length)return null;var o=!0;return Object.keys(a).forEach((function(e){a[e]!==r.dataset[e]&&(o=!1)})),o?n:null}(r,a)&&u?t.resolve(u):function(e,t){void 0===t&&(t=l());f(e,t);var n=e.url,r=e.attributes;if("string"!=typeof n||0===n.length)throw new Error("Invalid url.");if(void 0!==r&&"object"!=typeof r)throw new Error("Expected attributes to be an object.");return new t((function(e,t){if("undefined"==typeof window)return e();!function(e){var t=e.url,n=e.attributes,r=e.onSuccess,a=e.onError,o=s(t,n);o.onerror=a,o.onload=r,document.head.insertBefore(o,document.head.firstElementChild)}({url:n,attributes:r,onSuccess:function(){return e()},onError:function(){return t(new Error('The script "'+n+'" failed to load.'))}})}))}({url:r,attributes:a},t).then((function(){var e=d(o);if(e)return e;throw new Error("The window."+o+" global variable is not available.")}))}function l(){if("undefined"==typeof Promise)throw new Error("Promise is undefined. To resolve the issue, use a Promise polyfill.");return Promise}function d(e){return window[e]}function f(e,t){if("object"!=typeof e||null===e)throw new Error("Expected an options object.");if(void 0!==t&&"function"!=typeof t)throw new Error("Expected PromisePonyfill to be a function.")}var p="initial",v="pending",y="rejected",P="resolved",h=e.createContext(null),m=e.createContext(null);function b(e,t){switch(t.type){case"setLoadingStatus":return{options:r({},e.options),loadingStatus:t.value};case"resetOptions":return function(e){var t=document.querySelector('script[data-react-paypal-script-id="'+e+'"]');if(null===t)return;t.parentNode&&t.parentNode.removeChild(t)}(e.options["data-react-paypal-script-id"]),{loadingStatus:v,options:r(r({},t.value),{"data-react-paypal-script-id":""+g()})};default:return e}}function g(){return"react-paypal-js-"+Math.random().toString(36).substring(7)}function w(){var t=e.useContext(h),n=e.useContext(m);if(null===t||null===n)throw new Error("usePayPalScriptReducer must be used within a PayPalScriptProvider");var o=t.loadingStatus,i=a(t,["loadingStatus"]);return[r(r({},i),{isInitial:o===p,isPending:o===v,isResolved:o===P,isRejected:o===y}),n]}function E(e){return void 0===e&&(e="paypal"),window[e]}exports.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"},exports.PayPalButtons=function(t){var i=t.className,u=void 0===i?"":i,s=t.disabled,c=void 0!==s&&s,l=t.children,d=void 0===l?null:l,f=t.forceReRender,p=void 0===f?[]:f,v=a(t,["className","disabled","children","forceReRender"]),y=e.useRef(null),P=e.useRef(null),h=w()[0],m=h.isResolved,b=h.options,g=e.useState(null),S=g[0],O=g[1],R=e.useState(!0),A=R[0],k=R[1],j=e.useState(null)[1];function x(){null!==P.current&&P.current.close().catch((function(){}))}e.useEffect((function(){if(!1===m)return x;var e=E(b["data-namespace"]);if(void 0===e||void 0===e.Buttons)return j((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],a="Unable to render <PayPalButtons /> because window."+(void 0===r?"paypal":r)+".Buttons is undefined.";if(n.length&&!n.includes("buttons")){a+="\nTo fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n+",buttons")+"'}}>`."}return a}(b))})),x;return P.current=e.Buttons(r(r({},v),{onInit:function(e,t){O(t),"function"==typeof v.onInit&&v.onInit(e,t)}})),!1===P.current.isEligible()?(k(!1),x):(null===y.current||P.current.render(y.current).catch((function(e){null!==y.current&&0!==y.current.children.length&&j((function(){throw new Error("Failed to render <PayPalButtons /> component. "+e)}))})),x)}),o(o([m],p),[v.fundingSource])),e.useEffect((function(){null!==S&&(!0===c?S.disable().catch((function(){})):S.enable().catch((function(){})))}),[c,S]);var M=c?{opacity:.33}:{},N=(u+" "+(c?"paypal-buttons-disabled":"")).trim();return!1===A?d:n.default.createElement("div",{ref:y,style:M,className:N})},exports.PayPalMarks=function(t){var o=t.className,i=void 0===o?"":o,u=a(t,["className"]),s=w()[0],c=s.isResolved,l=s.options,d=e.useRef(null),f=e.useRef(null),p=e.useState(null)[1];return e.useEffect((function(){if(!1!==c&&null===f.current){var e=E(l["data-namespace"]);void 0!==e&&void 0!==e.Marks?(f.current=e.Marks(r({},u)),!1!==f.current.isEligible()&&null!==d.current&&f.current.render(d.current).catch((function(e){null!==d.current&&0!==d.current.children.length&&p((function(){throw new Error("Failed to render <PayPalMarks /> component. "+e)}))}))):p((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],a="Unable to render <PayPalMarks /> because window."+(void 0===r?"paypal":r)+".Marks is undefined.";if(!n.includes("marks")){a+="\nTo fix the issue, add 'marks' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n?n+",marks":"marks")+"'}}>`."}return a}(l))}))}}),[c,u.fundingSource]),n.default.createElement("div",{ref:d,className:i})},exports.PayPalMessages=function(t){var i=t.className,u=void 0===i?"":i,s=t.forceReRender,c=void 0===s?[]:s,l=a(t,["className","forceReRender"]),d=w()[0],f=d.isResolved,p=d.options,v=e.useRef(null),y=e.useRef(null),P=e.useState(null)[1];return e.useEffect((function(){if(!1!==f){var e=E(p["data-namespace"]);void 0!==e&&void 0!==e.Messages?(y.current=e.Messages(r({},l)),null!==v.current&&y.current.render(v.current).catch((function(e){null!==v.current&&0!==v.current.children.length&&P((function(){throw new Error("Failed to render <PayPalMessages /> component. "+e)}))}))):P((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],a="Unable to render <PayPalMessages /> because window."+(void 0===r?"paypal":r)+".Messages is undefined.";if(!n.includes("messages")){a+="\nTo fix the issue, add 'messages' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n?n+",messages":"messages")+"'}}>`."}return a}(p))}))}}),o([f],c)),n.default.createElement("div",{ref:v,className:u})},exports.PayPalScriptProvider=function(t){var a=t.options,o=t.children,i=t.deferLoading,u=void 0!==i&&i,s={options:r(r({},a),{"data-react-paypal-script-id":""+g()}),loadingStatus:u?p:v},l=e.useReducer(b,s),d=l[0],f=l[1];return e.useEffect((function(){if(!1===u&&d.loadingStatus===p)return f({type:"setLoadingStatus",value:v});if(d.loadingStatus===v){var e=!0;return c(d.options).then((function(){e&&f({type:"setLoadingStatus",value:P})})).catch((function(){e&&f({type:"setLoadingStatus",value:y})})),function(){e=!1}}}),[a,u,d.loadingStatus]),n.default.createElement(h.Provider,{value:d},n.default.createElement(m.Provider,{value:f},o))},exports.usePayPalScriptReducer=w;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=t(e),r=function(){return(r=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var a in t=arguments[n])Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a]);return e}).apply(this,arguments)};function a(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(r=Object.getOwnPropertySymbols(e);a<r.length;a++)t.indexOf(r[a])<0&&Object.prototype.propertyIsEnumerable.call(e,r[a])&&(n[r[a]]=e[r[a]])}return n}function o(e,t,n){if(n||2===arguments.length)for(var r,a=0,o=t.length;a<o;a++)!r&&a in t||(r||(r=Array.prototype.slice.call(t,0,a)),r[a]=t[a]);return e.concat(r||t)}function i(e){var t="https://www.paypal.com/sdk/js";e.sdkBaseURL&&(t=e.sdkBaseURL,delete e.sdkBaseURL);var n=function(e,t){var n="",r="";Array.isArray(e)?e.length>1?(n="*",r=e.toString()):n=e.toString():"string"==typeof e&&e.length>0?n=e:"string"==typeof t&&t.length>0&&(n="*",r=t);return{"merchant-id":n,"data-merchant-id":r}}(e["merchant-id"],e["data-merchant-id"]),r=Object.assign({},e,n),a=Object.keys(r).filter((function(e){return void 0!==r[e]&&null!==r[e]&&""!==r[e]})).reduce((function(e,t){var n=r[t].toString();return"data-"===t.substring(0,5)?e.dataAttributes[t]=n:e.queryParams[t]=n,e}),{queryParams:{},dataAttributes:{}}),o=a.queryParams,i=a.dataAttributes;return{url:t+"?"+u(o),dataAttributes:i}}function u(e){var t="";return Object.keys(e).forEach((function(n){0!==t.length&&(t+="&"),t+=n+"="+e[n]})),t}function s(e,t){void 0===t&&(t={});var n=document.createElement("script");return n.src=e,Object.keys(t).forEach((function(e){n.setAttribute(e,t[e]),"data-csp-nonce"===e&&n.setAttribute("nonce",t["data-csp-nonce"])})),n}function c(e,t){if(void 0===t&&(t=l()),f(e,t),"undefined"==typeof window)return t.resolve(null);var n=i(e),r=n.url,a=n.dataAttributes,o=a["data-namespace"]||"paypal",u=d(o);return function(e,t){var n=document.querySelector('script[src="'+e+'"]');if(null===n)return null;var r=s(e,t),a=Object.assign({},n.dataset);if(delete a.uidAuto,Object.keys(a).length!==Object.keys(r.dataset).length)return null;var o=!0;return Object.keys(a).forEach((function(e){a[e]!==r.dataset[e]&&(o=!1)})),o?n:null}(r,a)&&u?t.resolve(u):function(e,t){void 0===t&&(t=l());f(e,t);var n=e.url,r=e.attributes;if("string"!=typeof n||0===n.length)throw new Error("Invalid url.");if(void 0!==r&&"object"!=typeof r)throw new Error("Expected attributes to be an object.");return new t((function(e,t){if("undefined"==typeof window)return e();!function(e){var t=e.url,n=e.attributes,r=e.onSuccess,a=e.onError,o=s(t,n);o.onerror=a,o.onload=r,document.head.insertBefore(o,document.head.firstElementChild)}({url:n,attributes:r,onSuccess:function(){return e()},onError:function(){return t(new Error('The script "'+n+'" failed to load.'))}})}))}({url:r,attributes:a},t).then((function(){var e=d(o);if(e)return e;throw new Error("The window."+o+" global variable is not available.")}))}function l(){if("undefined"==typeof Promise)throw new Error("Promise is undefined. To resolve the issue, use a Promise polyfill.");return Promise}function d(e){return window[e]}function f(e,t){if("object"!=typeof e||null===e)throw new Error("Expected an options object.");if(void 0!==t&&"function"!=typeof t)throw new Error("Expected PromisePonyfill to be a function.")}var p="initial",v="pending",y="rejected",P="resolved",h=e.createContext(null),m=e.createContext(null);function b(e,t){switch(t.type){case"setLoadingStatus":return{options:r({},e.options),loadingStatus:t.value};case"resetOptions":return function(e){var t=document.querySelector('script[data-react-paypal-script-id="'+e+'"]');if(null===t)return;t.parentNode&&t.parentNode.removeChild(t)}(e.options["data-react-paypal-script-id"]),{loadingStatus:v,options:r(r({},t.value),{"data-react-paypal-script-id":""+g()})};default:return e}}function g(){return"react-paypal-js-"+Math.random().toString(36).substring(7)}function w(){var t=e.useContext(h),n=e.useContext(m);if(null===t||null===n)throw new Error("usePayPalScriptReducer must be used within a PayPalScriptProvider");var o=t.loadingStatus,i=a(t,["loadingStatus"]);return[r(r({},i),{isInitial:o===p,isPending:o===v,isResolved:o===P,isRejected:o===y}),n]}function E(e){return void 0===e&&(e="paypal"),window[e]}var S={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"};exports.FUNDING=S,exports.PayPalButtons=function(t){var i=t.className,u=void 0===i?"":i,s=t.disabled,c=void 0!==s&&s,l=t.children,d=void 0===l?null:l,f=t.forceReRender,p=void 0===f?[]:f,v=a(t,["className","disabled","children","forceReRender"]),y=e.useRef(null),P=e.useRef(null),h=w()[0],m=h.isResolved,b=h.options,g=e.useState(null),S=g[0],O=g[1],R=e.useState(!0),A=R[0],k=R[1],j=e.useState(null)[1];function x(){null!==P.current&&P.current.close().catch((function(){}))}e.useEffect((function(){if(!1===m)return x;var e=E(b["data-namespace"]);if(void 0===e||void 0===e.Buttons)return j((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],a="Unable to render <PayPalButtons /> because window."+(void 0===r?"paypal":r)+".Buttons is undefined.";if(n.length&&!n.includes("buttons")){a+="\nTo fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n+",buttons")+"'}}>`."}return a}(b))})),x;return P.current=e.Buttons(r(r({},v),{onInit:function(e,t){O(t),"function"==typeof v.onInit&&v.onInit(e,t)}})),!1===P.current.isEligible()?(k(!1),x):(null===y.current||P.current.render(y.current).catch((function(e){null!==y.current&&0!==y.current.children.length&&j((function(){throw new Error("Failed to render <PayPalButtons /> component. "+e)}))})),x)}),o(o([m],p),[v.fundingSource])),e.useEffect((function(){null!==S&&(!0===c?S.disable().catch((function(){})):S.enable().catch((function(){})))}),[c,S]);var M=c?{opacity:.38}:{},N=(u+" "+(c?"paypal-buttons-disabled":"")).trim();return!1===A?d:n.default.createElement("div",{ref:y,style:M,className:N})},exports.PayPalMarks=function(t){var o=t.className,i=void 0===o?"":o,u=a(t,["className"]),s=w()[0],c=s.isResolved,l=s.options,d=e.useRef(null),f=e.useRef(null),p=e.useState(null)[1];return e.useEffect((function(){if(!1!==c&&null===f.current){var e=E(l["data-namespace"]);void 0!==e&&void 0!==e.Marks?(f.current=e.Marks(r({},u)),!1!==f.current.isEligible()&&null!==d.current&&f.current.render(d.current).catch((function(e){null!==d.current&&0!==d.current.children.length&&p((function(){throw new Error("Failed to render <PayPalMarks /> component. "+e)}))}))):p((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],a="Unable to render <PayPalMarks /> because window."+(void 0===r?"paypal":r)+".Marks is undefined.";if(!n.includes("marks")){a+="\nTo fix the issue, add 'marks' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n?n+",marks":"marks")+"'}}>`."}return a}(l))}))}}),[c,u.fundingSource]),n.default.createElement("div",{ref:d,className:i})},exports.PayPalMessages=function(t){var i=t.className,u=void 0===i?"":i,s=t.forceReRender,c=void 0===s?[]:s,l=a(t,["className","forceReRender"]),d=w()[0],f=d.isResolved,p=d.options,v=e.useRef(null),y=e.useRef(null),P=e.useState(null)[1];return e.useEffect((function(){if(!1!==f){var e=E(p["data-namespace"]);void 0!==e&&void 0!==e.Messages?(y.current=e.Messages(r({},l)),null!==v.current&&y.current.render(v.current).catch((function(e){null!==v.current&&0!==v.current.children.length&&P((function(){throw new Error("Failed to render <PayPalMessages /> component. "+e)}))}))):P((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],a="Unable to render <PayPalMessages /> because window."+(void 0===r?"paypal":r)+".Messages is undefined.";if(!n.includes("messages")){a+="\nTo fix the issue, add 'messages' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n?n+",messages":"messages")+"'}}>`."}return a}(p))}))}}),o([f],c)),n.default.createElement("div",{ref:v,className:u})},exports.PayPalScriptProvider=function(t){var a=t.options,o=t.children,i=t.deferLoading,u=void 0!==i&&i,s={options:r(r({},a),{"data-react-paypal-script-id":""+g()}),loadingStatus:u?p:v},l=e.useReducer(b,s),d=l[0],f=l[1];return e.useEffect((function(){if(!1===u&&d.loadingStatus===p)return f({type:"setLoadingStatus",value:v});if(d.loadingStatus===v){var e=!0;return c(d.options).then((function(){e&&f({type:"setLoadingStatus",value:P})})).catch((function(){e&&f({type:"setLoadingStatus",value:y})})),function(){e=!1}}}),[a,u,d.loadingStatus]),n.default.createElement(h.Provider,{value:d},n.default.createElement(m.Provider,{value:f},o))},exports.usePayPalScriptReducer=w;

dist/esm/react-paypal-js.js

 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); }
 
 /*!
- * react-paypal-js v7.1.2 (2021-07-05T21:48:03.272Z)
+ * react-paypal-js v7.2.0 (2021-07-11T21:19:10.801Z)
  * Copyright 2020-present, PayPal, Inc. All rights reserved.
@@ -395,13 +395,30 @@ *
 /**
- * This `<PayPalButtons />` component renders the [Smart Payment Buttons](https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/#buttons).
- * It relies on the `<PayPalScriptProvider />` parent component for managing state related to loading the JS SDK script.
- *
- * Use props for customizing your buttons. For example, here's how you would use the `style` and `createOrder` options:
- *
- * ```jsx
- *     <PayPalButtons style={{ layout: "vertical" }} createOrder={(data, actions) => {}} />
- * ```
- */
+This `<PayPalButtons />` component renders the [Smart Payment Buttons](https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/#buttons).
+It relies on the `<PayPalScriptProvider />` parent component for managing state related to loading the JS SDK script.
 
+Use props for customizing your buttons. For example, here's how you would use the `style` and `createOrder` options:
 
+```jsx
+    import { PayPalScriptProvider, PayPalButtons } from "@paypal/react-paypal-js";
+
+    <PayPalScriptProvider options={{ "client-id": "test" }}>
+        <PayPalButtons
+            style={{ layout: "horizontal" }}
+            createOrder={(data, actions) => {
+                return actions.order.create({
+                    purchase_units: [
+                        {
+                            amount: {
+                                value: "2.00",
+                            },
+                        },
+                    ],
+                });
+            }}
+        />;
+    </PayPalScriptProvider>
+```
+*/
+
+
 var PayPalButtons = function PayPalButtons(_a) {
@@ -508,3 +525,3 @@ var _b = _a.className,
   var isDisabledStyle = disabled ? {
-    opacity: 0.33
+    opacity: 0.38
   } : {};
@@ -540,25 +557,23 @@ var classNames = (className + " " + (disabled ? "paypal-buttons-disabled" : "")).trim();
 /**
- * The `<PayPalMarks />` component is used for conditionally rendering different payment options using radio buttons.
- * The [Display PayPal Buttons with other Payment Methods guide](https://developer.paypal.com/docs/business/checkout/add-capabilities/buyer-experience/#display-paypal-buttons-with-other-payment-methods) describes this style of integration in detail.
- * It relies on the `<PayPalScriptProvider />` parent component for managing state related to loading the JS SDK script.
- *
- * ```jsx
- *     <PayPalMarks />
- * ```
- *
- * This component can also be configured to use a single funding source similar to the [standalone buttons](https://developer.paypal.com/docs/business/checkout/configure-payments/standalone-buttons/) approach.
- * A `FUNDING` object is exported by this library which has a key for every available funding source option.
- *
- * ```js
- *     import { FUNDING } from '@paypal/react-paypal-js'
- * ```
- *
- * Use this `FUNDING` constant to set the `fundingSource` prop.
- *
- * ```jsx
- *     <PayPalMarks fundingSource={FUNDING.PAYPAL}/>
- * ```
- */
+The `<PayPalMarks />` component is used for conditionally rendering different payment options using radio buttons.
+The [Display PayPal Buttons with other Payment Methods guide](https://developer.paypal.com/docs/business/checkout/add-capabilities/buyer-experience/#display-paypal-buttons-with-other-payment-methods) describes this style of integration in detail.
+It relies on the `<PayPalScriptProvider />` parent component for managing state related to loading the JS SDK script.
 
+```jsx
+    <PayPalMarks />
+```
 
+This component can also be configured to use a single funding source similar to the [standalone buttons](https://developer.paypal.com/docs/business/checkout/configure-payments/standalone-buttons/) approach.
+A `FUNDING` object is exported by this library which has a key for every available funding source option.
+
+```jsx
+    import { PayPalScriptProvider, PayPalMarks, FUNDING } from "@paypal/react-paypal-js";
+
+    <PayPalScriptProvider options={{ "client-id": "test", components: "buttons,marks" }}>
+        <PayPalMarks fundingSource={FUNDING.PAYPAL}/>
+    </PayPalScriptProvider>
+```
+*/
+
+
 var PayPalMarks = function PayPalMarks(_a) {
@@ -713,3 +728,3 @@ var _b = _a.className,
 
-var FUNDING = {
+var FUNDING$1 = {
   PAYPAL: 'paypal',
@@ -740,3 +755,8 @@ VENMO: 'venmo',
   MERCADOPAGO: 'mercadopago'
-};
+}; // We do not re-export `FUNDING` from the `sdk-constants` module
+// directly because it has no type definitions.
+//
+// See https://github.com/paypal/react-paypal-js/issues/125
+
+var FUNDING = FUNDING$1;
 export { FUNDING, PayPalButtons, PayPalMarks, PayPalMessages, PayPalScriptProvider, usePayPalScriptReducer };

dist/esm/react-paypal-js.min.js

 function e(t){return(e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(t)}
 /*!
- * react-paypal-js v7.1.2 (2021-07-05T21:48:03.272Z)
+ * react-paypal-js v7.2.0 (2021-07-11T21:19:10.801Z)
  * Copyright 2020-present, PayPal, Inc. All rights reserved.
@@ -17,2 +17,2 @@ *
  * limitations under the License.
- */import t,{createContext as n,useContext as r,useReducer as o,useEffect as a,useRef as i,useState as u}from"react";var s=function(){return(s=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function c(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function l(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||t)}function d(e){var t="https://www.paypal.com/sdk/js";e.sdkBaseURL&&(t=e.sdkBaseURL,delete e.sdkBaseURL);var n=function(e,t){var n="",r="";Array.isArray(e)?e.length>1?(n="*",r=e.toString()):n=e.toString():"string"==typeof e&&e.length>0?n=e:"string"==typeof t&&t.length>0&&(n="*",r=t);return{"merchant-id":n,"data-merchant-id":r}}(e["merchant-id"],e["data-merchant-id"]),r=Object.assign({},e,n),o=Object.keys(r).filter((function(e){return void 0!==r[e]&&null!==r[e]&&""!==r[e]})).reduce((function(e,t){var n=r[t].toString();return"data-"===t.substring(0,5)?e.dataAttributes[t]=n:e.queryParams[t]=n,e}),{queryParams:{},dataAttributes:{}}),a=o.queryParams,i=o.dataAttributes;return{url:t+"?"+f(a),dataAttributes:i}}function f(e){var t="";return Object.keys(e).forEach((function(n){0!==t.length&&(t+="&"),t+=n+"="+e[n]})),t}function p(e,t){void 0===t&&(t={});var n=document.createElement("script");return n.src=e,Object.keys(t).forEach((function(e){n.setAttribute(e,t[e]),"data-csp-nonce"===e&&n.setAttribute("nonce",t["data-csp-nonce"])})),n}function v(t,n){if(void 0===n&&(n=y()),h(t,n),"undefined"==typeof window)return n.resolve(null);var r=d(t),o=r.url,a=r.dataAttributes,i=a["data-namespace"]||"paypal",u=m(i);return function(e,t){var n=document.querySelector('script[src="'+e+'"]');if(null===n)return null;var r=p(e,t),o=Object.assign({},n.dataset);if(delete o.uidAuto,Object.keys(o).length!==Object.keys(r.dataset).length)return null;var a=!0;return Object.keys(o).forEach((function(e){o[e]!==r.dataset[e]&&(a=!1)})),a?n:null}(o,a)&&u?n.resolve(u):function(t,n){void 0===n&&(n=y());h(t,n);var r=t.url,o=t.attributes;if("string"!=typeof r||0===r.length)throw new Error("Invalid url.");if(void 0!==o&&"object"!==e(o))throw new Error("Expected attributes to be an object.");return new n((function(e,t){if("undefined"==typeof window)return e();!function(e){var t=e.url,n=e.attributes,r=e.onSuccess,o=e.onError,a=p(t,n);a.onerror=o,a.onload=r,document.head.insertBefore(a,document.head.firstElementChild)}({url:r,attributes:o,onSuccess:function(){return e()},onError:function(){return t(new Error('The script "'+r+'" failed to load.'))}})}))}({url:o,attributes:a},n).then((function(){var e=m(i);if(e)return e;throw new Error("The window."+i+" global variable is not available.")}))}function y(){if("undefined"==typeof Promise)throw new Error("Promise is undefined. To resolve the issue, use a Promise polyfill.");return Promise}function m(e){return window[e]}function h(t,n){if("object"!==e(t)||null===t)throw new Error("Expected an options object.");if(void 0!==n&&"function"!=typeof n)throw new Error("Expected PromisePonyfill to be a function.")}var b="initial",P="pending",g="rejected",w="resolved",E=n(null),S=n(null);function A(e,t){switch(t.type){case"setLoadingStatus":return{options:s({},e.options),loadingStatus:t.value};case"resetOptions":return function(e){var t=document.querySelector('script[data-react-paypal-script-id="'+e+'"]');if(null===t)return;t.parentNode&&t.parentNode.removeChild(t)}(e.options["data-react-paypal-script-id"]),{loadingStatus:P,options:s(s({},t.value),{"data-react-paypal-script-id":""+O()})};default:return e}}function O(){return"react-paypal-js-"+Math.random().toString(36).substring(7)}function R(){var e=r(E),t=r(S);if(null===e||null===t)throw new Error("usePayPalScriptReducer must be used within a PayPalScriptProvider");var n=e.loadingStatus,o=c(e,["loadingStatus"]);return[s(s({},o),{isInitial:n===b,isPending:n===P,isResolved:n===w,isRejected:n===g}),t]}var k=function(e){var n=e.options,r=e.children,i=e.deferLoading,u=void 0!==i&&i,c={options:s(s({},n),{"data-react-paypal-script-id":""+O()}),loadingStatus:u?b:P},l=o(A,c),d=l[0],f=l[1];return a((function(){if(!1===u&&d.loadingStatus===b)return f({type:"setLoadingStatus",value:P});if(d.loadingStatus===P){var e=!0;return v(d.options).then((function(){e&&f({type:"setLoadingStatus",value:w})})).catch((function(){e&&f({type:"setLoadingStatus",value:g})})),function(){e=!1}}}),[n,u,d.loadingStatus]),t.createElement(E.Provider,{value:d},t.createElement(S.Provider,{value:f},r))};function j(e){return void 0===e&&(e="paypal"),window[e]}var M=function(e){var n=e.className,r=void 0===n?"":n,o=e.disabled,d=void 0!==o&&o,f=e.children,p=void 0===f?null:f,v=e.forceReRender,y=void 0===v?[]:v,m=c(e,["className","disabled","children","forceReRender"]),h=i(null),b=i(null),P=R()[0],g=P.isResolved,w=P.options,E=u(null),S=E[0],A=E[1],O=u(!0),k=O[0],M=O[1],L=u(null)[1];function N(){null!==b.current&&b.current.close().catch((function(){}))}a((function(){if(!1===g)return N;var e=j(w["data-namespace"]);if(void 0===e||void 0===e.Buttons)return L((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],o="Unable to render <PayPalButtons /> because window."+(void 0===r?"paypal":r)+".Buttons is undefined.";if(n.length&&!n.includes("buttons")){o+="\nTo fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n+",buttons")+"'}}>`."}return o}(w))})),N;return b.current=e.Buttons(s(s({},m),{onInit:function(e,t){A(t),"function"==typeof m.onInit&&m.onInit(e,t)}})),!1===b.current.isEligible()?(M(!1),N):(null===h.current||b.current.render(h.current).catch((function(e){null!==h.current&&0!==h.current.children.length&&L((function(){throw new Error("Failed to render <PayPalButtons /> component. "+e)}))})),N)}),l(l([g],y),[m.fundingSource])),a((function(){null!==S&&(!0===d?S.disable().catch((function(){})):S.enable().catch((function(){})))}),[d,S]);var T=d?{opacity:.33}:{},I=(r+" "+(d?"paypal-buttons-disabled":"")).trim();return!1===k?p:t.createElement("div",{ref:h,style:T,className:I})};var L=function(e){var n=e.className,r=void 0===n?"":n,o=c(e,["className"]),l=R()[0],d=l.isResolved,f=l.options,p=i(null),v=i(null),y=u(null)[1];return a((function(){if(!1!==d&&null===v.current){var e=j(f["data-namespace"]);void 0!==e&&void 0!==e.Marks?(v.current=e.Marks(s({},o)),!1!==v.current.isEligible()&&null!==p.current&&v.current.render(p.current).catch((function(e){null!==p.current&&0!==p.current.children.length&&y((function(){throw new Error("Failed to render <PayPalMarks /> component. "+e)}))}))):y((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],o="Unable to render <PayPalMarks /> because window."+(void 0===r?"paypal":r)+".Marks is undefined.";if(!n.includes("marks")){o+="\nTo fix the issue, add 'marks' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n?n+",marks":"marks")+"'}}>`."}return o}(f))}))}}),[d,o.fundingSource]),t.createElement("div",{ref:p,className:r})};var N=function(e){var n=e.className,r=void 0===n?"":n,o=e.forceReRender,d=void 0===o?[]:o,f=c(e,["className","forceReRender"]),p=R()[0],v=p.isResolved,y=p.options,m=i(null),h=i(null),b=u(null)[1];return a((function(){if(!1!==v){var e=j(y["data-namespace"]);void 0!==e&&void 0!==e.Messages?(h.current=e.Messages(s({},f)),null!==m.current&&h.current.render(m.current).catch((function(e){null!==m.current&&0!==m.current.children.length&&b((function(){throw new Error("Failed to render <PayPalMessages /> component. "+e)}))}))):b((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],o="Unable to render <PayPalMessages /> because window."+(void 0===r?"paypal":r)+".Messages is undefined.";if(!n.includes("messages")){o+="\nTo fix the issue, add 'messages' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n?n+",messages":"messages")+"'}}>`."}return o}(y))}))}}),l([v],d)),t.createElement("div",{ref:m,className:r})};var T={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{T as FUNDING,M as PayPalButtons,L as PayPalMarks,N as PayPalMessages,k as PayPalScriptProvider,R as usePayPalScriptReducer};
+ */import t,{createContext as n,useContext as r,useReducer as o,useEffect as a,useRef as i,useState as u}from"react";var s=function(){return(s=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};function c(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n}function l(e,t,n){if(n||2===arguments.length)for(var r,o=0,a=t.length;o<a;o++)!r&&o in t||(r||(r=Array.prototype.slice.call(t,0,o)),r[o]=t[o]);return e.concat(r||t)}function d(e){var t="https://www.paypal.com/sdk/js";e.sdkBaseURL&&(t=e.sdkBaseURL,delete e.sdkBaseURL);var n=function(e,t){var n="",r="";Array.isArray(e)?e.length>1?(n="*",r=e.toString()):n=e.toString():"string"==typeof e&&e.length>0?n=e:"string"==typeof t&&t.length>0&&(n="*",r=t);return{"merchant-id":n,"data-merchant-id":r}}(e["merchant-id"],e["data-merchant-id"]),r=Object.assign({},e,n),o=Object.keys(r).filter((function(e){return void 0!==r[e]&&null!==r[e]&&""!==r[e]})).reduce((function(e,t){var n=r[t].toString();return"data-"===t.substring(0,5)?e.dataAttributes[t]=n:e.queryParams[t]=n,e}),{queryParams:{},dataAttributes:{}}),a=o.queryParams,i=o.dataAttributes;return{url:t+"?"+f(a),dataAttributes:i}}function f(e){var t="";return Object.keys(e).forEach((function(n){0!==t.length&&(t+="&"),t+=n+"="+e[n]})),t}function p(e,t){void 0===t&&(t={});var n=document.createElement("script");return n.src=e,Object.keys(t).forEach((function(e){n.setAttribute(e,t[e]),"data-csp-nonce"===e&&n.setAttribute("nonce",t["data-csp-nonce"])})),n}function v(t,n){if(void 0===n&&(n=y()),h(t,n),"undefined"==typeof window)return n.resolve(null);var r=d(t),o=r.url,a=r.dataAttributes,i=a["data-namespace"]||"paypal",u=m(i);return function(e,t){var n=document.querySelector('script[src="'+e+'"]');if(null===n)return null;var r=p(e,t),o=Object.assign({},n.dataset);if(delete o.uidAuto,Object.keys(o).length!==Object.keys(r.dataset).length)return null;var a=!0;return Object.keys(o).forEach((function(e){o[e]!==r.dataset[e]&&(a=!1)})),a?n:null}(o,a)&&u?n.resolve(u):function(t,n){void 0===n&&(n=y());h(t,n);var r=t.url,o=t.attributes;if("string"!=typeof r||0===r.length)throw new Error("Invalid url.");if(void 0!==o&&"object"!==e(o))throw new Error("Expected attributes to be an object.");return new n((function(e,t){if("undefined"==typeof window)return e();!function(e){var t=e.url,n=e.attributes,r=e.onSuccess,o=e.onError,a=p(t,n);a.onerror=o,a.onload=r,document.head.insertBefore(a,document.head.firstElementChild)}({url:r,attributes:o,onSuccess:function(){return e()},onError:function(){return t(new Error('The script "'+r+'" failed to load.'))}})}))}({url:o,attributes:a},n).then((function(){var e=m(i);if(e)return e;throw new Error("The window."+i+" global variable is not available.")}))}function y(){if("undefined"==typeof Promise)throw new Error("Promise is undefined. To resolve the issue, use a Promise polyfill.");return Promise}function m(e){return window[e]}function h(t,n){if("object"!==e(t)||null===t)throw new Error("Expected an options object.");if(void 0!==n&&"function"!=typeof n)throw new Error("Expected PromisePonyfill to be a function.")}var b="initial",P="pending",g="rejected",w="resolved",E=n(null),S=n(null);function A(e,t){switch(t.type){case"setLoadingStatus":return{options:s({},e.options),loadingStatus:t.value};case"resetOptions":return function(e){var t=document.querySelector('script[data-react-paypal-script-id="'+e+'"]');if(null===t)return;t.parentNode&&t.parentNode.removeChild(t)}(e.options["data-react-paypal-script-id"]),{loadingStatus:P,options:s(s({},t.value),{"data-react-paypal-script-id":""+O()})};default:return e}}function O(){return"react-paypal-js-"+Math.random().toString(36).substring(7)}function R(){var e=r(E),t=r(S);if(null===e||null===t)throw new Error("usePayPalScriptReducer must be used within a PayPalScriptProvider");var n=e.loadingStatus,o=c(e,["loadingStatus"]);return[s(s({},o),{isInitial:n===b,isPending:n===P,isResolved:n===w,isRejected:n===g}),t]}var k=function(e){var n=e.options,r=e.children,i=e.deferLoading,u=void 0!==i&&i,c={options:s(s({},n),{"data-react-paypal-script-id":""+O()}),loadingStatus:u?b:P},l=o(A,c),d=l[0],f=l[1];return a((function(){if(!1===u&&d.loadingStatus===b)return f({type:"setLoadingStatus",value:P});if(d.loadingStatus===P){var e=!0;return v(d.options).then((function(){e&&f({type:"setLoadingStatus",value:w})})).catch((function(){e&&f({type:"setLoadingStatus",value:g})})),function(){e=!1}}}),[n,u,d.loadingStatus]),t.createElement(E.Provider,{value:d},t.createElement(S.Provider,{value:f},r))};function j(e){return void 0===e&&(e="paypal"),window[e]}var M=function(e){var n=e.className,r=void 0===n?"":n,o=e.disabled,d=void 0!==o&&o,f=e.children,p=void 0===f?null:f,v=e.forceReRender,y=void 0===v?[]:v,m=c(e,["className","disabled","children","forceReRender"]),h=i(null),b=i(null),P=R()[0],g=P.isResolved,w=P.options,E=u(null),S=E[0],A=E[1],O=u(!0),k=O[0],M=O[1],L=u(null)[1];function N(){null!==b.current&&b.current.close().catch((function(){}))}a((function(){if(!1===g)return N;var e=j(w["data-namespace"]);if(void 0===e||void 0===e.Buttons)return L((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],o="Unable to render <PayPalButtons /> because window."+(void 0===r?"paypal":r)+".Buttons is undefined.";if(n.length&&!n.includes("buttons")){o+="\nTo fix the issue, add 'buttons' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n+",buttons")+"'}}>`."}return o}(w))})),N;return b.current=e.Buttons(s(s({},m),{onInit:function(e,t){A(t),"function"==typeof m.onInit&&m.onInit(e,t)}})),!1===b.current.isEligible()?(M(!1),N):(null===h.current||b.current.render(h.current).catch((function(e){null!==h.current&&0!==h.current.children.length&&L((function(){throw new Error("Failed to render <PayPalButtons /> component. "+e)}))})),N)}),l(l([g],y),[m.fundingSource])),a((function(){null!==S&&(!0===d?S.disable().catch((function(){})):S.enable().catch((function(){})))}),[d,S]);var T=d?{opacity:.38}:{},I=(r+" "+(d?"paypal-buttons-disabled":"")).trim();return!1===k?p:t.createElement("div",{ref:h,style:T,className:I})};var L=function(e){var n=e.className,r=void 0===n?"":n,o=c(e,["className"]),l=R()[0],d=l.isResolved,f=l.options,p=i(null),v=i(null),y=u(null)[1];return a((function(){if(!1!==d&&null===v.current){var e=j(f["data-namespace"]);void 0!==e&&void 0!==e.Marks?(v.current=e.Marks(s({},o)),!1!==v.current.isEligible()&&null!==p.current&&v.current.render(p.current).catch((function(e){null!==p.current&&0!==p.current.children.length&&y((function(){throw new Error("Failed to render <PayPalMarks /> component. "+e)}))}))):y((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],o="Unable to render <PayPalMarks /> because window."+(void 0===r?"paypal":r)+".Marks is undefined.";if(!n.includes("marks")){o+="\nTo fix the issue, add 'marks' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n?n+",marks":"marks")+"'}}>`."}return o}(f))}))}}),[d,o.fundingSource]),t.createElement("div",{ref:p,className:r})};var N=function(e){var n=e.className,r=void 0===n?"":n,o=e.forceReRender,d=void 0===o?[]:o,f=c(e,["className","forceReRender"]),p=R()[0],v=p.isResolved,y=p.options,m=i(null),h=i(null),b=u(null)[1];return a((function(){if(!1!==v){var e=j(y["data-namespace"]);void 0!==e&&void 0!==e.Messages?(h.current=e.Messages(s({},f)),null!==m.current&&h.current.render(m.current).catch((function(e){null!==m.current&&0!==m.current.children.length&&b((function(){throw new Error("Failed to render <PayPalMessages /> component. "+e)}))}))):b((function(){throw new Error(function(e){var t=e.components,n=void 0===t?"":t,r=e["data-namespace"],o="Unable to render <PayPalMessages /> because window."+(void 0===r?"paypal":r)+".Messages is undefined.";if(!n.includes("messages")){o+="\nTo fix the issue, add 'messages' to the list of components passed to the parent PayPalScriptProvider:\n`<PayPalScriptProvider options={{ components: '"+(n?n+",messages":"messages")+"'}}>`."}return o}(y))}))}}),l([v],d)),t.createElement("div",{ref:m,className:r})};var T={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{T as FUNDING,M as PayPalButtons,L as PayPalMarks,N as PayPalMessages,k as PayPalScriptProvider,R as usePayPalScriptReducer};

package.json

 {
     "name": "@paypal/react-paypal-js",
-    "version": "7.1.2",
+    "version": "7.2.0",
     "description": "React components for the PayPal JS SDK",
@@ -17,3 +17,3 @@ "keywords": [
     "module": "dist/esm/react-paypal-js.js",
-    "types": "dist/index.d.ts",
+    "types": "dist/types/index.d.ts",
     "scripts": {
@@ -24,2 +24,3 @@ "build": "rollup --config",
         "_postinstall": "husky install",
+        "prepack": "rimraf dist && npm run build && npm run type-declarations",
         "prepublishOnly": "pinst --disable",
@@ -34,2 +35,3 @@ "postpublish": "pinst --enable",
         "typecheck": "tsc --noEmit",
+        "type-declarations": "tsc --emitDeclarationOnly --outDir dist/types --project tsconfig.declarations.json",
         "validate": "npm run typecheck && npm run build && npm run lint && npm test -- --coverage"
@@ -47,3 +49,3 @@ },
     "dependencies": {
-        "@paypal/paypal-js": "^4.0.2",
+        "@paypal/paypal-js": "^4.0.6",
         "@paypal/sdk-constants": "^1.0.107"
@@ -62,9 +64,9 @@ },
         "@rollup/plugin-typescript": "^8.2.1",
-        "@storybook/addon-actions": "^6.3.2",
-        "@storybook/addon-essentials": "^6.3.2",
-        "@storybook/addon-links": "^6.3.2",
-        "@storybook/react": "^6.3.2",
+        "@storybook/addon-actions": "^6.3.4",
+        "@storybook/addon-essentials": "^6.3.4",
+        "@storybook/addon-links": "^6.3.4",
+        "@storybook/react": "^6.3.4",
         "@storybook/storybook-deployer": "^2.8.10",
         "@testing-library/react": "^12.0.0",
-        "@types/react": "^17.0.13",
+        "@types/react": "^17.0.14",
         "@typescript-eslint/eslint-plugin": "^4.28.2",
@@ -77,3 +79,3 @@ "@typescript-eslint/parser": "^4.28.2",
         "eslint-plugin-react": "^7.24.0",
-        "husky": "^7.0.0",
+        "husky": "^7.0.1",
         "jest": "^27.0.6",
@@ -86,3 +88,4 @@ "lint-staged": "^11.0.0",
         "react-is": "^17.0.2",
-        "rollup": "^2.52.7",
+        "rimraf": "^3.0.2",
+        "rollup": "^2.53.0",
         "rollup-plugin-cleanup": "^3.2.1",
@@ -89,0 +92,0 @@ "rollup-plugin-terser": "^7.0.2",

New alerts

License Policy Violation

License

This 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 risk

Package 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

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

103841

decreased by-42.24%

Dev dependency count

39

increased by2.63%

Number of package files

15

decreased by-34.78%

Lines of code

1461

decreased by-58.6%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• Updated@paypal/paypal-js@^4.0.6