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

Comparing version 1.2.2 to 1.3.0

dist/react-stripe.d.ts

@@ -205,2 +205,22 @@ import { FunctionComponent, ReactNode } from "react";
 type PaymentRequestButtonElementComponent = FunctionComponent<PaymentRequestButtonElementProps>;
+interface AfterpayClearpayMessageElementProps {
+    /**
+     * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+     */
+    id?: string;
+    /**
+     * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+     */
+    className?: string;
+    /**
+     * An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_element?type=afterpayClearpayMessage).
+     */
+    options?: stripeJs.StripeAfterpayClearpayMessageElementOptions;
+    /**
+     * Triggered when the Element has been fully loaded, after initial method calls have been fired.
+     * Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
+     */
+    onReady?: (element: stripeJs.StripeAfterpayClearpayMessageElement) => any;
+}
+type AfterpayClearpayMessageElementComponent = FunctionComponent<AfterpayClearpayMessageElementProps>;
 declare module "@stripe/stripe-js" {
@@ -256,2 +276,7 @@ interface StripeElements {
         getElement(component: PaymentRequestButtonElementComponent): stripeJs.StripePaymentRequestButtonElement | null;
+        /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.
+         */
+        getElement(component: AfterpayClearpayMessageElementComponent): stripeJs.StripeAfterpayClearpayMessageElement | null;
     }
@@ -343,2 +368,6 @@ }
 declare const PaymentRequestButtonElement: PaymentRequestButtonElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement };
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };

dist/react-stripe.esm.d.ts

@@ -205,2 +205,22 @@ import { FunctionComponent, ReactNode } from "react";
 type PaymentRequestButtonElementComponent = FunctionComponent<PaymentRequestButtonElementProps>;
+interface AfterpayClearpayMessageElementProps {
+    /**
+     * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+     */
+    id?: string;
+    /**
+     * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+     */
+    className?: string;
+    /**
+     * An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_element?type=afterpayClearpayMessage).
+     */
+    options?: stripeJs.StripeAfterpayClearpayMessageElementOptions;
+    /**
+     * Triggered when the Element has been fully loaded, after initial method calls have been fired.
+     * Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
+     */
+    onReady?: (element: stripeJs.StripeAfterpayClearpayMessageElement) => any;
+}
+type AfterpayClearpayMessageElementComponent = FunctionComponent<AfterpayClearpayMessageElementProps>;
 declare module "@stripe/stripe-js" {
@@ -256,2 +276,7 @@ interface StripeElements {
         getElement(component: PaymentRequestButtonElementComponent): stripeJs.StripePaymentRequestButtonElement | null;
+        /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.
+         */
+        getElement(component: AfterpayClearpayMessageElementComponent): stripeJs.StripeAfterpayClearpayMessageElement | null;
     }
@@ -343,2 +368,6 @@ }
 declare const PaymentRequestButtonElement: PaymentRequestButtonElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement };
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };

dist/react-stripe.esm.js

@@ -303,3 +303,3 @@ import React from 'react';
       name: 'react-stripe-js',
-      version: "1.2.2"
+      version: "1.3.0"
     });
@@ -538,3 +538,8 @@ }, [ctx.stripe]);
 var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
-export { AuBankAccountElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, Elements, ElementsConsumer, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement, useElements, useStripe };
+var AfterpayClearpayMessageElement = createElementComponent('afterpayClearpayMessage', isServer);
+
+export { AfterpayClearpayMessageElement, AuBankAccountElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, Elements, ElementsConsumer, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement, useElements, useStripe };

dist/react-stripe.js

@@ -309,3 +309,3 @@ 'use strict';
       name: 'react-stripe-js',
-      version: "1.2.2"
+      version: "1.3.0"
     });
@@ -544,3 +544,9 @@ }, [ctx.stripe]);
 var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 
+var AfterpayClearpayMessageElement = createElementComponent('afterpayClearpayMessage', isServer);
+
+exports.AfterpayClearpayMessageElement = AfterpayClearpayMessageElement;
 exports.AuBankAccountElement = AuBankAccountElement;
@@ -547,0 +553,0 @@ exports.CardCvcElement = CardCvcElement;

dist/react-stripe.umd.d.ts

@@ -205,2 +205,22 @@ import { FunctionComponent, ReactNode } from "react";
 type PaymentRequestButtonElementComponent = FunctionComponent<PaymentRequestButtonElementProps>;
+interface AfterpayClearpayMessageElementProps {
+    /**
+     * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+     */
+    id?: string;
+    /**
+     * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+     */
+    className?: string;
+    /**
+     * An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_element?type=afterpayClearpayMessage).
+     */
+    options?: stripeJs.StripeAfterpayClearpayMessageElementOptions;
+    /**
+     * Triggered when the Element has been fully loaded, after initial method calls have been fired.
+     * Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
+     */
+    onReady?: (element: stripeJs.StripeAfterpayClearpayMessageElement) => any;
+}
+type AfterpayClearpayMessageElementComponent = FunctionComponent<AfterpayClearpayMessageElementProps>;
 declare module "@stripe/stripe-js" {
@@ -256,2 +276,7 @@ interface StripeElements {
         getElement(component: PaymentRequestButtonElementComponent): stripeJs.StripePaymentRequestButtonElement | null;
+        /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.
+         */
+        getElement(component: AfterpayClearpayMessageElementComponent): stripeJs.StripeAfterpayClearpayMessageElement | null;
     }
@@ -343,2 +368,6 @@ }
 declare const PaymentRequestButtonElement: PaymentRequestButtonElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement };
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };

dist/react-stripe.umd.js

@@ -386,3 +386,3 @@ (function (global, factory) {
         name: 'react-stripe-js',
-        version: "1.2.2"
+        version: "1.3.0"
       });
@@ -621,3 +621,9 @@ }, [ctx.stripe]);
   var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);
+  /**
+   * @docs https://stripe.com/docs/stripe-js/react#element-components
+   */
 
+  var AfterpayClearpayMessageElement = createElementComponent('afterpayClearpayMessage', isServer);
+
+  exports.AfterpayClearpayMessageElement = AfterpayClearpayMessageElement;
   exports.AuBankAccountElement = AuBankAccountElement;
@@ -624,0 +630,0 @@ exports.CardCvcElement = CardCvcElement;

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

@@ -205,2 +205,22 @@ import { FunctionComponent, ReactNode } from "react";
 type PaymentRequestButtonElementComponent = FunctionComponent<PaymentRequestButtonElementProps>;
+interface AfterpayClearpayMessageElementProps {
+    /**
+     * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+     */
+    id?: string;
+    /**
+     * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+     */
+    className?: string;
+    /**
+     * An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_element?type=afterpayClearpayMessage).
+     */
+    options?: stripeJs.StripeAfterpayClearpayMessageElementOptions;
+    /**
+     * Triggered when the Element has been fully loaded, after initial method calls have been fired.
+     * Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
+     */
+    onReady?: (element: stripeJs.StripeAfterpayClearpayMessageElement) => any;
+}
+type AfterpayClearpayMessageElementComponent = FunctionComponent<AfterpayClearpayMessageElementProps>;
 declare module "@stripe/stripe-js" {
@@ -256,2 +276,7 @@ interface StripeElements {
         getElement(component: PaymentRequestButtonElementComponent): stripeJs.StripePaymentRequestButtonElement | null;
+        /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.
+         */
+        getElement(component: AfterpayClearpayMessageElementComponent): stripeJs.StripeAfterpayClearpayMessageElement | null;
     }
@@ -343,2 +368,6 @@ }
 declare const PaymentRequestButtonElement: PaymentRequestButtonElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement };
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, PaymentRequestButtonElement, AfterpayClearpayMessageElement };

dist/react-stripe.umd.min.js

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

package.json

 {
   "name": "@stripe/react-stripe-js",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "React components for Stripe.js and Stripe Elements",
@@ -69,3 +69,3 @@ "main": "dist/react-stripe.js",
     "@storybook/react": "^5.2.6",
-    "@stripe/stripe-js": "^1.2.0",
+    "@stripe/stripe-js": "^1.13.0",
     "@testing-library/jest-dom": "^5.11.8",
@@ -111,3 +111,3 @@ "@testing-library/react": "^11.2.3",
   "peerDependencies": {
-    "@stripe/stripe-js": "^1.2.0",
+    "@stripe/stripe-js": "^1.13.0",
     "react": "^16.8.0 || ^17.0.0",
@@ -114,0 +114,0 @@ "react-dom": "^16.8.0 || ^17.0.0"

src/index.ts

@@ -12,2 +12,3 @@ import createElementComponent from './components/createElementComponent';
   PaymentRequestButtonElementComponent,
+  AfterpayClearpayMessageElementComponent,
 } from './types';
@@ -100,1 +101,9 @@
 );
+
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+export const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent = createElementComponent(
+  'afterpayClearpayMessage',
+  isServer
+);

src/types/index.ts

@@ -266,2 +266,29 @@ import {FunctionComponent} from 'react';
 
+export interface AfterpayClearpayMessageElementProps {
+  /**
+   * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+   */
+  id?: string;
+
+  /**
+   * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
+   */
+  className?: string;
+
+  /**
+   * An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_element?type=afterpayClearpayMessage).
+   */
+  options?: stripeJs.StripeAfterpayClearpayMessageElementOptions;
+
+  /**
+   * Triggered when the Element has been fully loaded, after initial method calls have been fired.
+   * Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
+   */
+  onReady?: (element: stripeJs.StripeAfterpayClearpayMessageElement) => any;
+}
+
+export type AfterpayClearpayMessageElementComponent = FunctionComponent<
+  AfterpayClearpayMessageElementProps
+>;
+
 declare module '@stripe/stripe-js' {
@@ -343,3 +370,11 @@ interface StripeElements {
     ): stripeJs.StripePaymentRequestButtonElement | null;
+
+    /**
+     * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `PaymentRequestButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+     * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.
+     */
+    getElement(
+      component: AfterpayClearpayMessageElementComponent
+    ): stripeJs.StripeAfterpayClearpayMessageElement | null;
   }
 }

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

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

Improved metrics

Total package byte prevSize

212597

increased by4.79%

Lines of code

4509

increased by3.94%

No dependency changes