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

Comparing version 1.14.2 to 1.15.0

dist/react-stripe.d.ts

@@ -354,2 +354,47 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
 type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
+interface PayButtonElementProps extends ElementProps {
+    /**
+     * An object containing Element configuration options.
+     */
+    options?: stripeJs.StripePayButtonElementOptions;
+    /**
+     * Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
+     * The list of payment methods that could possibly show in the element, or undefined if no payment methods can show.
+     */
+    onReady?: (event: stripeJs.StripePayButtonElementReadyEvent) => any;
+    /**
+     * Triggered when the escape key is pressed within the Element.
+     */
+    onEscape?: () => any;
+    /**
+     * Triggered when the Element fails to load.
+     */
+    onLoadError?: (event: {
+        elementType: "payButton";
+        error: StripeError;
+    }) => any;
+    /**
+     * Triggered when a button on the Element is clicked.
+     */
+    onClick?: (event: stripeJs.StripePayButtonElementClickEvent) => any;
+    /**
+     * Triggered when a buyer authorizes a payment within a supported payment method.
+     */
+    onConfirm: (event: stripeJs.StripePayButtonElementConfirmEvent) => any;
+    /**
+     * Triggered when a payment interface is dismissed (e.g., a buyer closes the payment interface)
+     */
+    onCancel?: (event: {
+        elementType: "payButton";
+    }) => any;
+    /**
+     * Triggered when a buyer selects a different shipping address.
+     */
+    onShippingAddressChange?: (event: stripeJs.StripePayButtonElementShippingAddressChangeEvent) => any;
+    /**
+     * Triggered when a buyer selects a different shipping rate.
+     */
+    onShippingRateChange?: (event: stripeJs.StripePayButtonElementShippingRateChangeEvent) => any;
+}
+type PayButtonElementComponent = FunctionComponent<PayButtonElementProps>;
 interface PaymentRequestButtonElementProps extends ElementProps {
@@ -560,8 +605,17 @@ /**
         /**
-         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_link_authentication_element) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
          * Returns `null` if no `LinkAuthenticationElement` is rendered in the current `Elements` provider tree.
          */
         getElement(component: LinkAuthenticationElementComponent): stripeJs.StripeLinkAuthenticationElement | null;
+        /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_payment_element) for the `PaymentElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PaymentElement` is rendered in the current `Elements` provider tree.
+         */
         getElement(component: PaymentElementComponent): stripeJs.StripeElement | null;
         /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_pay_button_element) for the `PayButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PayButtonElement` is rendered in the current `Elements` provider tree.
+         */
+        getElement(component: PayButtonElementComponent): stripeJs.StripeElement | 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.
@@ -696,4 +750,11 @@ * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.
 /**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
+declare const PayButtonElement: PayButtonElementComponent;
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 declare const PaymentRequestButtonElement: PaymentRequestButtonElementComponent;
@@ -740,2 +801,2 @@ /**
 declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PayButtonElementProps, PayButtonElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PayButtonElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };

dist/react-stripe.esm.d.ts

@@ -354,2 +354,47 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
 type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
+interface PayButtonElementProps extends ElementProps {
+    /**
+     * An object containing Element configuration options.
+     */
+    options?: stripeJs.StripePayButtonElementOptions;
+    /**
+     * Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
+     * The list of payment methods that could possibly show in the element, or undefined if no payment methods can show.
+     */
+    onReady?: (event: stripeJs.StripePayButtonElementReadyEvent) => any;
+    /**
+     * Triggered when the escape key is pressed within the Element.
+     */
+    onEscape?: () => any;
+    /**
+     * Triggered when the Element fails to load.
+     */
+    onLoadError?: (event: {
+        elementType: "payButton";
+        error: StripeError;
+    }) => any;
+    /**
+     * Triggered when a button on the Element is clicked.
+     */
+    onClick?: (event: stripeJs.StripePayButtonElementClickEvent) => any;
+    /**
+     * Triggered when a buyer authorizes a payment within a supported payment method.
+     */
+    onConfirm: (event: stripeJs.StripePayButtonElementConfirmEvent) => any;
+    /**
+     * Triggered when a payment interface is dismissed (e.g., a buyer closes the payment interface)
+     */
+    onCancel?: (event: {
+        elementType: "payButton";
+    }) => any;
+    /**
+     * Triggered when a buyer selects a different shipping address.
+     */
+    onShippingAddressChange?: (event: stripeJs.StripePayButtonElementShippingAddressChangeEvent) => any;
+    /**
+     * Triggered when a buyer selects a different shipping rate.
+     */
+    onShippingRateChange?: (event: stripeJs.StripePayButtonElementShippingRateChangeEvent) => any;
+}
+type PayButtonElementComponent = FunctionComponent<PayButtonElementProps>;
 interface PaymentRequestButtonElementProps extends ElementProps {
@@ -560,8 +605,17 @@ /**
         /**
-         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_link_authentication_element) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
          * Returns `null` if no `LinkAuthenticationElement` is rendered in the current `Elements` provider tree.
          */
         getElement(component: LinkAuthenticationElementComponent): stripeJs.StripeLinkAuthenticationElement | null;
+        /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_payment_element) for the `PaymentElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PaymentElement` is rendered in the current `Elements` provider tree.
+         */
         getElement(component: PaymentElementComponent): stripeJs.StripeElement | null;
         /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_pay_button_element) for the `PayButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PayButtonElement` is rendered in the current `Elements` provider tree.
+         */
+        getElement(component: PayButtonElementComponent): stripeJs.StripeElement | 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.
@@ -696,4 +750,11 @@ * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.
 /**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
+declare const PayButtonElement: PayButtonElementComponent;
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 declare const PaymentRequestButtonElement: PaymentRequestButtonElementComponent;
@@ -740,2 +801,2 @@ /**
 declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PayButtonElementProps, PayButtonElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PayButtonElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };

dist/react-stripe.esm.js

@@ -376,3 +376,3 @@ import React from 'react';
       name: 'react-stripe-js',
-      version: "1.14.2"
+      version: "1.15.0"
     });
@@ -382,3 +382,3 @@
       name: 'react-stripe-js',
-      version: "1.14.2",
+      version: "1.15.0",
       url: 'https://stripe.com/docs/stripe-js/react'
@@ -511,3 +511,11 @@ });
         _ref$onLineItemClick = _ref.onLineItemClick,
-        onLineItemClick = _ref$onLineItemClick === void 0 ? noop : _ref$onLineItemClick;
+        onLineItemClick = _ref$onLineItemClick === void 0 ? noop : _ref$onLineItemClick,
+        _ref$onConfirm = _ref.onConfirm,
+        onConfirm = _ref$onConfirm === void 0 ? noop : _ref$onConfirm,
+        _ref$onCancel = _ref.onCancel,
+        onCancel = _ref$onCancel === void 0 ? noop : _ref$onCancel,
+        _ref$onShippingAddres = _ref.onShippingAddressChange,
+        onShippingAddressChange = _ref$onShippingAddres === void 0 ? noop : _ref$onShippingAddres,
+        _ref$onShippingRateCh = _ref.onShippingRateChange,
+        onShippingRateChange = _ref$onShippingRateCh === void 0 ? noop : _ref$onShippingRateCh;
 
@@ -535,2 +543,6 @@ var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
     var callOnLineItemClick = useCallbackReference(onLineItemClick);
+    var callOnConfirm = useCallbackReference(onConfirm);
+    var callOnCancel = useCallbackReference(onCancel);
+    var callOnShippingAddressChange = useCallbackReference(onShippingAddressChange);
+    var callOnShippingRateChange = useCallbackReference(onShippingRateChange);
     React.useLayoutEffect(function () {
@@ -558,2 +570,4 @@ if (elementRef.current == null && elements && domNode.current != null) {
             callOnReady(event);
+          } else if (type === 'payButton') {
+            callOnReady(event);
           } else {
@@ -615,3 +629,19 @@ callOnReady(element);
 
-        element.on('lineitemclick', callOnLineItemClick);
+        element.on('lineitemclick', callOnLineItemClick); // Users can pass an onConfirm prop on any Element component
+        // just as they could listen for the `confirm` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('confirm', callOnConfirm); // Users can pass an onCancel prop on any Element component
+        // just as they could listen for the `cancel` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('cancel', callOnCancel); // Users can pass an onShippingAddressChange prop on any Element component
+        // just as they could listen for the `shippingaddresschange` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('shippingaddresschange', callOnShippingAddressChange); // Users can pass an onShippingRateChange prop on any Element component
+        // just as they could listen for the `shippingratechange` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('shippingratechange', callOnShippingRateChange);
       }
@@ -674,2 +704,6 @@ });
     onLineItemClick: PropTypes.func,
+    onConfirm: PropTypes.func,
+    onCancel: PropTypes.func,
+    onShippingAddressChange: PropTypes.func,
+    onShippingRateChange: PropTypes.func,
     options: PropTypes.object
@@ -738,5 +772,13 @@ };
 /**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
 
+var PayButtonElement = createElementComponent('payButton', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
 var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);
@@ -791,2 +833,2 @@ /**
 
-export { AddressElement, AffirmMessageElement, AfterpayClearpayMessageElement, AuBankAccountElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CartElement, Elements, ElementsConsumer, EpsBankElement, FpxBankElement, IbanElement, IdealBankElement, LinkAuthenticationElement, P24BankElement, PaymentElement, PaymentMethodMessagingElement, PaymentRequestButtonElement, ShippingAddressElement, useCartElement, useCartElementState, useElements, useStripe };
+export { AddressElement, AffirmMessageElement, AfterpayClearpayMessageElement, AuBankAccountElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CartElement, Elements, ElementsConsumer, EpsBankElement, FpxBankElement, IbanElement, IdealBankElement, LinkAuthenticationElement, P24BankElement, PayButtonElement, PaymentElement, PaymentMethodMessagingElement, PaymentRequestButtonElement, ShippingAddressElement, useCartElement, useCartElementState, useElements, useStripe };

dist/react-stripe.js

@@ -382,3 +382,3 @@ 'use strict';
       name: 'react-stripe-js',
-      version: "1.14.2"
+      version: "1.15.0"
     });
@@ -388,3 +388,3 @@
       name: 'react-stripe-js',
-      version: "1.14.2",
+      version: "1.15.0",
       url: 'https://stripe.com/docs/stripe-js/react'
@@ -517,3 +517,11 @@ });
         _ref$onLineItemClick = _ref.onLineItemClick,
-        onLineItemClick = _ref$onLineItemClick === void 0 ? noop : _ref$onLineItemClick;
+        onLineItemClick = _ref$onLineItemClick === void 0 ? noop : _ref$onLineItemClick,
+        _ref$onConfirm = _ref.onConfirm,
+        onConfirm = _ref$onConfirm === void 0 ? noop : _ref$onConfirm,
+        _ref$onCancel = _ref.onCancel,
+        onCancel = _ref$onCancel === void 0 ? noop : _ref$onCancel,
+        _ref$onShippingAddres = _ref.onShippingAddressChange,
+        onShippingAddressChange = _ref$onShippingAddres === void 0 ? noop : _ref$onShippingAddres,
+        _ref$onShippingRateCh = _ref.onShippingRateChange,
+        onShippingRateChange = _ref$onShippingRateCh === void 0 ? noop : _ref$onShippingRateCh;
 
@@ -541,2 +549,6 @@ var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
     var callOnLineItemClick = useCallbackReference(onLineItemClick);
+    var callOnConfirm = useCallbackReference(onConfirm);
+    var callOnCancel = useCallbackReference(onCancel);
+    var callOnShippingAddressChange = useCallbackReference(onShippingAddressChange);
+    var callOnShippingRateChange = useCallbackReference(onShippingRateChange);
     React.useLayoutEffect(function () {
@@ -564,2 +576,4 @@ if (elementRef.current == null && elements && domNode.current != null) {
             callOnReady(event);
+          } else if (type === 'payButton') {
+            callOnReady(event);
           } else {
@@ -621,3 +635,19 @@ callOnReady(element);
 
-        element.on('lineitemclick', callOnLineItemClick);
+        element.on('lineitemclick', callOnLineItemClick); // Users can pass an onConfirm prop on any Element component
+        // just as they could listen for the `confirm` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('confirm', callOnConfirm); // Users can pass an onCancel prop on any Element component
+        // just as they could listen for the `cancel` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('cancel', callOnCancel); // Users can pass an onShippingAddressChange prop on any Element component
+        // just as they could listen for the `shippingaddresschange` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('shippingaddresschange', callOnShippingAddressChange); // Users can pass an onShippingRateChange prop on any Element component
+        // just as they could listen for the `shippingratechange` event on any Element,
+        // but only certain Elements will trigger the event.
+
+        element.on('shippingratechange', callOnShippingRateChange);
       }
@@ -680,2 +710,6 @@ });
     onLineItemClick: PropTypes.func,
+    onConfirm: PropTypes.func,
+    onCancel: PropTypes.func,
+    onShippingAddressChange: PropTypes.func,
+    onShippingRateChange: PropTypes.func,
     options: PropTypes.object
@@ -744,5 +778,13 @@ };
 /**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
 
+var PayButtonElement = createElementComponent('payButton', isServer);
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+
 var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);
@@ -814,2 +856,3 @@ /**
 exports.P24BankElement = P24BankElement;
+exports.PayButtonElement = PayButtonElement;
 exports.PaymentElement = PaymentElement;
@@ -816,0 +859,0 @@ exports.PaymentMethodMessagingElement = PaymentMethodMessagingElement;

dist/react-stripe.umd.d.ts

@@ -354,2 +354,47 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
 type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
+interface PayButtonElementProps extends ElementProps {
+    /**
+     * An object containing Element configuration options.
+     */
+    options?: stripeJs.StripePayButtonElementOptions;
+    /**
+     * Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
+     * The list of payment methods that could possibly show in the element, or undefined if no payment methods can show.
+     */
+    onReady?: (event: stripeJs.StripePayButtonElementReadyEvent) => any;
+    /**
+     * Triggered when the escape key is pressed within the Element.
+     */
+    onEscape?: () => any;
+    /**
+     * Triggered when the Element fails to load.
+     */
+    onLoadError?: (event: {
+        elementType: "payButton";
+        error: StripeError;
+    }) => any;
+    /**
+     * Triggered when a button on the Element is clicked.
+     */
+    onClick?: (event: stripeJs.StripePayButtonElementClickEvent) => any;
+    /**
+     * Triggered when a buyer authorizes a payment within a supported payment method.
+     */
+    onConfirm: (event: stripeJs.StripePayButtonElementConfirmEvent) => any;
+    /**
+     * Triggered when a payment interface is dismissed (e.g., a buyer closes the payment interface)
+     */
+    onCancel?: (event: {
+        elementType: "payButton";
+    }) => any;
+    /**
+     * Triggered when a buyer selects a different shipping address.
+     */
+    onShippingAddressChange?: (event: stripeJs.StripePayButtonElementShippingAddressChangeEvent) => any;
+    /**
+     * Triggered when a buyer selects a different shipping rate.
+     */
+    onShippingRateChange?: (event: stripeJs.StripePayButtonElementShippingRateChangeEvent) => any;
+}
+type PayButtonElementComponent = FunctionComponent<PayButtonElementProps>;
 interface PaymentRequestButtonElementProps extends ElementProps {
@@ -560,8 +605,17 @@ /**
         /**
-         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_link_authentication_element) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
          * Returns `null` if no `LinkAuthenticationElement` is rendered in the current `Elements` provider tree.
          */
         getElement(component: LinkAuthenticationElementComponent): stripeJs.StripeLinkAuthenticationElement | null;
+        /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_payment_element) for the `PaymentElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PaymentElement` is rendered in the current `Elements` provider tree.
+         */
         getElement(component: PaymentElementComponent): stripeJs.StripeElement | null;
         /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_pay_button_element) for the `PayButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PayButtonElement` is rendered in the current `Elements` provider tree.
+         */
+        getElement(component: PayButtonElementComponent): stripeJs.StripeElement | 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.
@@ -696,4 +750,11 @@ * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.
 /**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
+declare const PayButtonElement: PayButtonElementComponent;
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 declare const PaymentRequestButtonElement: PaymentRequestButtonElementComponent;
@@ -740,2 +801,2 @@ /**
 declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PayButtonElementProps, PayButtonElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PayButtonElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };

dist/react-stripe.umd.js

@@ -459,3 +459,3 @@ (function (global, factory) {
 	      name: 'react-stripe-js',
-	      version: "1.14.2"
+	      version: "1.15.0"
 	    });
@@ -465,3 +465,3 @@
 	      name: 'react-stripe-js',
-	      version: "1.14.2",
+	      version: "1.15.0",
 	      url: 'https://stripe.com/docs/stripe-js/react'
@@ -594,3 +594,11 @@ });
 	        _ref$onLineItemClick = _ref.onLineItemClick,
-	        onLineItemClick = _ref$onLineItemClick === void 0 ? noop : _ref$onLineItemClick;
+	        onLineItemClick = _ref$onLineItemClick === void 0 ? noop : _ref$onLineItemClick,
+	        _ref$onConfirm = _ref.onConfirm,
+	        onConfirm = _ref$onConfirm === void 0 ? noop : _ref$onConfirm,
+	        _ref$onCancel = _ref.onCancel,
+	        onCancel = _ref$onCancel === void 0 ? noop : _ref$onCancel,
+	        _ref$onShippingAddres = _ref.onShippingAddressChange,
+	        onShippingAddressChange = _ref$onShippingAddres === void 0 ? noop : _ref$onShippingAddres,
+	        _ref$onShippingRateCh = _ref.onShippingRateChange,
+	        onShippingRateChange = _ref$onShippingRateCh === void 0 ? noop : _ref$onShippingRateCh;
 
@@ -618,2 +626,6 @@ var _useElementsContextWi = useElementsContextWithUseCase("mounts <".concat(displayName, ">")),
 	    var callOnLineItemClick = useCallbackReference(onLineItemClick);
+	    var callOnConfirm = useCallbackReference(onConfirm);
+	    var callOnCancel = useCallbackReference(onCancel);
+	    var callOnShippingAddressChange = useCallbackReference(onShippingAddressChange);
+	    var callOnShippingRateChange = useCallbackReference(onShippingRateChange);
 	    React.useLayoutEffect(function () {
@@ -641,2 +653,4 @@ if (elementRef.current == null && elements && domNode.current != null) {
 	            callOnReady(event);
+	          } else if (type === 'payButton') {
+	            callOnReady(event);
 	          } else {
@@ -698,3 +712,19 @@ callOnReady(element);
 
-	        element.on('lineitemclick', callOnLineItemClick);
+	        element.on('lineitemclick', callOnLineItemClick); // Users can pass an onConfirm prop on any Element component
+	        // just as they could listen for the `confirm` event on any Element,
+	        // but only certain Elements will trigger the event.
+
+	        element.on('confirm', callOnConfirm); // Users can pass an onCancel prop on any Element component
+	        // just as they could listen for the `cancel` event on any Element,
+	        // but only certain Elements will trigger the event.
+
+	        element.on('cancel', callOnCancel); // Users can pass an onShippingAddressChange prop on any Element component
+	        // just as they could listen for the `shippingaddresschange` event on any Element,
+	        // but only certain Elements will trigger the event.
+
+	        element.on('shippingaddresschange', callOnShippingAddressChange); // Users can pass an onShippingRateChange prop on any Element component
+	        // just as they could listen for the `shippingratechange` event on any Element,
+	        // but only certain Elements will trigger the event.
+
+	        element.on('shippingratechange', callOnShippingRateChange);
 	      }
@@ -757,2 +787,6 @@ });
 	    onLineItemClick: propTypes.func,
+	    onConfirm: propTypes.func,
+	    onCancel: propTypes.func,
+	    onShippingAddressChange: propTypes.func,
+	    onShippingRateChange: propTypes.func,
 	    options: propTypes.object
@@ -821,5 +855,13 @@ };
 	/**
+	 * Requires beta access:
+	 * Contact [Stripe support](https://support.stripe.com/) for more information.
+	 *
 	 * @docs https://stripe.com/docs/stripe-js/react#element-components
 	 */
 
+	var PayButtonElement = createElementComponent('payButton', isServer);
+	/**
+	 * @docs https://stripe.com/docs/stripe-js/react#element-components
+	 */
+
 	var PaymentRequestButtonElement = createElementComponent('paymentRequestButton', isServer);
@@ -891,2 +933,3 @@ /**
 	exports.P24BankElement = P24BankElement;
+	exports.PayButtonElement = PayButtonElement;
 	exports.PaymentElement = PaymentElement;
@@ -893,0 +936,0 @@ exports.PaymentMethodMessagingElement = PaymentMethodMessagingElement;

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

@@ -354,2 +354,47 @@ import { FunctionComponent, PropsWithChildren, ReactNode } from "react";
 type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
+interface PayButtonElementProps extends ElementProps {
+    /**
+     * An object containing Element configuration options.
+     */
+    options?: stripeJs.StripePayButtonElementOptions;
+    /**
+     * Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
+     * The list of payment methods that could possibly show in the element, or undefined if no payment methods can show.
+     */
+    onReady?: (event: stripeJs.StripePayButtonElementReadyEvent) => any;
+    /**
+     * Triggered when the escape key is pressed within the Element.
+     */
+    onEscape?: () => any;
+    /**
+     * Triggered when the Element fails to load.
+     */
+    onLoadError?: (event: {
+        elementType: "payButton";
+        error: StripeError;
+    }) => any;
+    /**
+     * Triggered when a button on the Element is clicked.
+     */
+    onClick?: (event: stripeJs.StripePayButtonElementClickEvent) => any;
+    /**
+     * Triggered when a buyer authorizes a payment within a supported payment method.
+     */
+    onConfirm: (event: stripeJs.StripePayButtonElementConfirmEvent) => any;
+    /**
+     * Triggered when a payment interface is dismissed (e.g., a buyer closes the payment interface)
+     */
+    onCancel?: (event: {
+        elementType: "payButton";
+    }) => any;
+    /**
+     * Triggered when a buyer selects a different shipping address.
+     */
+    onShippingAddressChange?: (event: stripeJs.StripePayButtonElementShippingAddressChangeEvent) => any;
+    /**
+     * Triggered when a buyer selects a different shipping rate.
+     */
+    onShippingRateChange?: (event: stripeJs.StripePayButtonElementShippingRateChangeEvent) => any;
+}
+type PayButtonElementComponent = FunctionComponent<PayButtonElementProps>;
 interface PaymentRequestButtonElementProps extends ElementProps {
@@ -560,8 +605,17 @@ /**
         /**
-         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_link_authentication_element) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
          * Returns `null` if no `LinkAuthenticationElement` is rendered in the current `Elements` provider tree.
          */
         getElement(component: LinkAuthenticationElementComponent): stripeJs.StripeLinkAuthenticationElement | null;
+        /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_payment_element) for the `PaymentElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PaymentElement` is rendered in the current `Elements` provider tree.
+         */
         getElement(component: PaymentElementComponent): stripeJs.StripeElement | null;
         /**
+         * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_pay_button_element) for the `PayButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+         * Returns `null` if no `PayButtonElement` is rendered in the current `Elements` provider tree.
+         */
+        getElement(component: PayButtonElementComponent): stripeJs.StripeElement | 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.
@@ -696,4 +750,11 @@ * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.
 /**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
+declare const PayButtonElement: PayButtonElementComponent;
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 declare const PaymentRequestButtonElement: PaymentRequestButtonElementComponent;
@@ -740,2 +801,2 @@ /**
 declare const AfterpayClearpayMessageElement: AfterpayClearpayMessageElementComponent;
-export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, AfterpayClearpayMessageElement };
+export { ElementProps, AuBankAccountElementProps, AuBankAccountElementComponent, CardElementProps, CardElementComponent, CardNumberElementProps, CardNumberElementComponent, CardExpiryElementProps, CardExpiryElementComponent, CardCvcElementProps, CardCvcElementComponent, CartElementProps, CartElementComponent, FpxBankElementProps, FpxBankElementComponent, IbanElementProps, IbanElementComponent, IdealBankElementProps, IdealBankElementComponent, P24BankElementProps, LinkAuthenticationElementProps, LinkAuthenticationElementComponent, P24BankElementComponent, EpsBankElementProps, EpsBankElementComponent, PaymentElementProps, PaymentElementComponent, PayButtonElementProps, PayButtonElementComponent, PaymentRequestButtonElementProps, PaymentRequestButtonElementComponent, AddressElementProps, AddressElementComponent, ShippingAddressElementProps, ShippingAddressElementComponent, PaymentMethodMessagingElementProps, PaymentMethodMessagingElementComponent, AffirmMessageElementProps, AffirmMessageElementComponent, AfterpayClearpayMessageElementProps, AfterpayClearpayMessageElementComponent, useElements, useStripe, useCartElement, useCartElementState, Elements, ElementsConsumer, AuBankAccountElement, CardElement, CardNumberElement, CardExpiryElement, CardCvcElement, FpxBankElement, IbanElement, IdealBankElement, P24BankElement, EpsBankElement, PaymentElement, PayButtonElement, PaymentRequestButtonElement, LinkAuthenticationElement, AddressElement, ShippingAddressElement, CartElement, PaymentMethodMessagingElement, AffirmMessageElement, 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";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function n(){}function r(){}r.resetWarningCache=n;var o=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,a){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==a){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var o={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:n};return o.PropTypes=o,o}()}));function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(e){return(u="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 i(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,o,a=[],c=!0,u=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);c=!0);}catch(e){u=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(u)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return l(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 l(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 l(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}var f=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},p=function(e){return null!==e&&"object"===u(e)},m=function(e,t,n){return p(e)?Object.keys(e).reduce((function(r,o){var a=!p(t)||!function e(t,n){if(!p(t)||!p(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 t===n;var a=Object.keys(t),c=Object.keys(n);if(a.length!==c.length)return!1;for(var u={},i=0;i<a.length;i+=1)u[a[i]]=!0;for(var s=0;s<c.length;s+=1)u[c[s]]=!0;var l=Object.keys(u);if(l.length!==a.length)return!1;var f=t,m=n;return l.every((function(t){return e(f[t],m[t])}))}(e[o],t[o]);return n.includes(o)?(a&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),r):a?c(c({},r||{}),{},i({},o,e[o])):r}),null):null},y=function(e){if(null===e||p(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.")},d=function(e){if(function(e){return p(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(y)};var t=y(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},v=t.createContext(null);v.displayName="ElementsContext";var h=t.createContext(null);h.displayName="CartElementContext";var E=function(e){var n=e.stripe,r=e.options,o=e.children,a=t.useMemo((function(){return d(n)}),[n]),c=s(t.useState(null),2),u=c[0],i=c[1],l=s(t.useState(null),2),p=l[0],y=l[1],E=s(t.useState((function(){return{stripe:"sync"===a.tag?a.stripe:null,elements:"sync"===a.tag?a.stripe.elements(r):null}})),2),b=E[0],g=E[1];t.useEffect((function(){var e=!0,t=function(e){g((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==a.tag||b.stripe?"sync"!==a.tag||b.stripe||t(a.stripe):a.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[a,b,r]);var C=f(n);t.useEffect((function(){null!==C&&C!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[C,n]);var O=f(r);return t.useEffect((function(){if(b.elements){var e=m(r,O,["clientSecret","fonts"]);e&&b.elements.update(e)}}),[r,O,b.elements]),t.useEffect((function(){var e=b.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"1.14.2"}),e.registerAppInfo({name:"react-stripe-js",version:"1.14.2",url:"https://stripe.com/docs/stripe-js/react"}))}),[b.stripe]),t.createElement(v.Provider,{value:b},t.createElement(h.Provider,{value:{cart:u,setCart:i,cartState:p,setCartState:y}},o))};E.propTypes={stripe:o.any,options:o.object};var b=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(v),e)},g=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(h),e)},C=function(e){return(0,e.children)(b("mounts <ElementsConsumer>"))};C.propTypes={children:o.func.isRequired};var O=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},j=function(){},S=function(e,n){var r,a="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=n?function(e){b("mounts <".concat(a,">")),g("mounts <".concat(a,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,o=n.className,c=n.options,u=void 0===c?{}:c,i=n.onBlur,s=void 0===i?j:i,l=n.onFocus,p=void 0===l?j:l,y=n.onReady,d=void 0===y?j:y,v=n.onChange,h=void 0===v?j:v,E=n.onEscape,C=void 0===E?j:E,S=n.onClick,k=void 0===S?j:S,w=n.onLoadError,P=void 0===w?j:w,A=n.onLoaderStart,x=void 0===A?j:A,R=n.onNetworksChange,T=void 0===R?j:R,B=n.onCheckout,_=void 0===B?j:B,I=n.onLineItemClick,N=void 0===I?j:I,M=b("mounts <".concat(a,">")).elements,L=t.useRef(null),q=t.useRef(null),D=g("mounts <".concat(a,">")),U=D.setCart,W=D.setCartState,F=O(d),Y=O(s),H=O(p),V=O(k),$=O(h),z=O(C),G=O(P),J=O(x),K=O(T),Q=O(_),X=O(N);t.useLayoutEffect((function(){if(null==L.current&&M&&null!=q.current){var t=M.create(e,u);"cart"===e&&U&&U(t),L.current=t,t.mount(q.current),t.on("ready",(function(n){"cart"===e?(W&&W(n),F(n)):F(t)})),t.on("change",(function(t){"cart"===e&&W&&W(t),$(t)})),t.on("blur",Y),t.on("focus",H),t.on("escape",z),t.on("loaderror",G),t.on("loaderstart",J),t.on("networkschange",K),t.on("click",V),t.on("checkout",(function(t){"cart"===e&&W&&W(t),Q(t)})),t.on("lineitemclick",X)}}));var Z=f(u);return t.useEffect((function(){if(L.current){var e=m(u,Z,["paymentRequest"]);e&&L.current.update(e)}}),[u,Z]),t.useLayoutEffect((function(){return function(){L.current&&(L.current.destroy(),L.current=null)}}),[]),t.createElement("div",{id:r,className:o,ref:q})};return c.propTypes={id:o.string,className:o.string,onChange:o.func,onBlur:o.func,onFocus:o.func,onReady:o.func,onEscape:o.func,onClick:o.func,onLoadError:o.func,onLoaderStart:o.func,onNetworksChange:o.func,onCheckout:o.func,onLineItemClick:o.func,options:o.object},c.displayName=a,c.__elementType=e,c},k="undefined"==typeof window,w=S("auBankAccount",k),P=S("card",k),A=S("cardNumber",k),x=S("cardExpiry",k),R=S("cardCvc",k),T=S("fpxBank",k),B=S("iban",k),_=S("idealBank",k),I=S("p24Bank",k),N=S("epsBank",k),M=S("payment",k),L=S("paymentRequestButton",k),q=S("linkAuthentication",k),D=S("address",k),U=S("shippingAddress",k),W=S("cart",k),F=S("paymentMethodMessaging",k),Y=S("affirmMessage",k),H=S("afterpayClearpayMessage",k);e.AddressElement=D,e.AffirmMessageElement=Y,e.AfterpayClearpayMessageElement=H,e.AuBankAccountElement=w,e.CardCvcElement=R,e.CardElement=P,e.CardExpiryElement=x,e.CardNumberElement=A,e.CartElement=W,e.Elements=E,e.ElementsConsumer=C,e.EpsBankElement=N,e.FpxBankElement=T,e.IbanElement=B,e.IdealBankElement=_,e.LinkAuthenticationElement=q,e.P24BankElement=I,e.PaymentElement=M,e.PaymentMethodMessagingElement=F,e.PaymentRequestButtonElement=L,e.ShippingAddressElement=U,e.useCartElement=function(){return g("calls useCartElement()").cart},e.useCartElementState=function(){return g("calls useCartElementState()").cartState},e.useElements=function(){return b("calls useElements()").elements},e.useStripe=function(){return b("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";t=t&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t;function n(){}function r(){}r.resetWarningCache=n;var o=function(e,t){return e(t={exports:{}},t.exports),t.exports}((function(e){e.exports=function(){function e(e,t,n,r,o,a){if("SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"!==a){var c=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw c.name="Invariant Violation",c}}function t(){return e}e.isRequired=e;var o={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:r,resetWarningCache:n};return o.PropTypes=o,o}()}));function a(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function c(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){u(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e){return(i="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 u(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function s(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=e&&("undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"]);if(null==n)return;var r,o,a=[],c=!0,i=!1;try{for(n=n.call(e);!(c=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);c=!0);}catch(e){i=!0,o=e}finally{try{c||null==n.return||n.return()}finally{if(i)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return l(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 l(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 l(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}var p=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),n.current},f=function(e){return null!==e&&"object"===i(e)},m=function(e,t,n){return f(e)?Object.keys(e).reduce((function(r,o){var a=!f(t)||!function e(t,n){if(!f(t)||!f(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 t===n;var a=Object.keys(t),c=Object.keys(n);if(a.length!==c.length)return!1;for(var i={},u=0;u<a.length;u+=1)i[a[u]]=!0;for(var s=0;s<c.length;s+=1)i[c[s]]=!0;var l=Object.keys(i);if(l.length!==a.length)return!1;var p=t,m=n;return l.every((function(t){return e(p[t],m[t])}))}(e[o],t[o]);return n.includes(o)?(a&&console.warn("Unsupported prop change: options.".concat(o," is not a mutable property.")),r):a?c(c({},r||{}),{},u({},o,e[o])):r}),null):null},y=function(e){if(null===e||f(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.")},d=function(e){if(function(e){return f(e)&&"function"==typeof e.then}(e))return{tag:"async",stripePromise:Promise.resolve(e).then(y)};var t=y(e);return null===t?{tag:"empty"}:{tag:"sync",stripe:t}},h=t.createContext(null);h.displayName="ElementsContext";var v=t.createContext(null);v.displayName="CartElementContext";var g=function(e){var n=e.stripe,r=e.options,o=e.children,a=t.useMemo((function(){return d(n)}),[n]),c=s(t.useState(null),2),i=c[0],u=c[1],l=s(t.useState(null),2),f=l[0],y=l[1],g=s(t.useState((function(){return{stripe:"sync"===a.tag?a.stripe:null,elements:"sync"===a.tag?a.stripe.elements(r):null}})),2),E=g[0],b=g[1];t.useEffect((function(){var e=!0,t=function(e){b((function(t){return t.stripe?t:{stripe:e,elements:e.elements(r)}}))};return"async"!==a.tag||E.stripe?"sync"!==a.tag||E.stripe||t(a.stripe):a.stripePromise.then((function(n){n&&e&&t(n)})),function(){e=!1}}),[a,E,r]);var C=p(n);t.useEffect((function(){null!==C&&C!==n&&console.warn("Unsupported prop change on Elements: You cannot change the `stripe` prop after setting it.")}),[C,n]);var O=p(r);return t.useEffect((function(){if(E.elements){var e=m(r,O,["clientSecret","fonts"]);e&&E.elements.update(e)}}),[r,O,E.elements]),t.useEffect((function(){var e=E.stripe;e&&e._registerWrapper&&e.registerAppInfo&&(e._registerWrapper({name:"react-stripe-js",version:"1.15.0"}),e.registerAppInfo({name:"react-stripe-js",version:"1.15.0",url:"https://stripe.com/docs/stripe-js/react"}))}),[E.stripe]),t.createElement(h.Provider,{value:E},t.createElement(v.Provider,{value:{cart:i,setCart:u,cartState:f,setCartState:y}},o))};g.propTypes={stripe:o.any,options:o.object};var E=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(h),e)},b=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(v),e)},C=function(e){return(0,e.children)(E("mounts <ElementsConsumer>"))};C.propTypes={children:o.func.isRequired};var O=function(e){var n=t.useRef(e);return t.useEffect((function(){n.current=e}),[e]),function(){n.current&&n.current.apply(n,arguments)}},S=function(){},j=function(e,n){var r,a="".concat((r=e).charAt(0).toUpperCase()+r.slice(1),"Element"),c=n?function(e){E("mounts <".concat(a,">")),b("mounts <".concat(a,">"));var n=e.id,r=e.className;return t.createElement("div",{id:n,className:r})}:function(n){var r=n.id,o=n.className,c=n.options,i=void 0===c?{}:c,u=n.onBlur,s=void 0===u?S:u,l=n.onFocus,f=void 0===l?S:l,y=n.onReady,d=void 0===y?S:y,h=n.onChange,v=void 0===h?S:h,g=n.onEscape,C=void 0===g?S:g,j=n.onClick,k=void 0===j?S:j,w=n.onLoadError,P=void 0===w?S:w,A=n.onLoaderStart,x=void 0===A?S:A,R=n.onNetworksChange,B=void 0===R?S:R,T=n.onCheckout,_=void 0===T?S:T,I=n.onLineItemClick,N=void 0===I?S:I,M=n.onConfirm,L=void 0===M?S:M,q=n.onCancel,D=void 0===q?S:q,U=n.onShippingAddressChange,W=void 0===U?S:U,F=n.onShippingRateChange,Y=void 0===F?S:F,H=E("mounts <".concat(a,">")).elements,V=t.useRef(null),$=t.useRef(null),z=b("mounts <".concat(a,">")),G=z.setCart,J=z.setCartState,K=O(d),Q=O(s),X=O(f),Z=O(k),ee=O(v),te=O(C),ne=O(P),re=O(x),oe=O(B),ae=O(_),ce=O(N),ie=O(L),ue=O(D),se=O(W),le=O(Y);t.useLayoutEffect((function(){if(null==V.current&&H&&null!=$.current){var t=H.create(e,i);"cart"===e&&G&&G(t),V.current=t,t.mount($.current),t.on("ready",(function(n){"cart"===e?(J&&J(n),K(n)):K("payButton"===e?n:t)})),t.on("change",(function(t){"cart"===e&&J&&J(t),ee(t)})),t.on("blur",Q),t.on("focus",X),t.on("escape",te),t.on("loaderror",ne),t.on("loaderstart",re),t.on("networkschange",oe),t.on("click",Z),t.on("checkout",(function(t){"cart"===e&&J&&J(t),ae(t)})),t.on("lineitemclick",ce),t.on("confirm",ie),t.on("cancel",ue),t.on("shippingaddresschange",se),t.on("shippingratechange",le)}}));var pe=p(i);return t.useEffect((function(){if(V.current){var e=m(i,pe,["paymentRequest"]);e&&V.current.update(e)}}),[i,pe]),t.useLayoutEffect((function(){return function(){V.current&&(V.current.destroy(),V.current=null)}}),[]),t.createElement("div",{id:r,className:o,ref:$})};return c.propTypes={id:o.string,className:o.string,onChange:o.func,onBlur:o.func,onFocus:o.func,onReady:o.func,onEscape:o.func,onClick:o.func,onLoadError:o.func,onLoaderStart:o.func,onNetworksChange:o.func,onCheckout:o.func,onLineItemClick:o.func,onConfirm:o.func,onCancel:o.func,onShippingAddressChange:o.func,onShippingRateChange:o.func,options:o.object},c.displayName=a,c.__elementType=e,c},k="undefined"==typeof window,w=j("auBankAccount",k),P=j("card",k),A=j("cardNumber",k),x=j("cardExpiry",k),R=j("cardCvc",k),B=j("fpxBank",k),T=j("iban",k),_=j("idealBank",k),I=j("p24Bank",k),N=j("epsBank",k),M=j("payment",k),L=j("payButton",k),q=j("paymentRequestButton",k),D=j("linkAuthentication",k),U=j("address",k),W=j("shippingAddress",k),F=j("cart",k),Y=j("paymentMethodMessaging",k),H=j("affirmMessage",k),V=j("afterpayClearpayMessage",k);e.AddressElement=U,e.AffirmMessageElement=H,e.AfterpayClearpayMessageElement=V,e.AuBankAccountElement=w,e.CardCvcElement=R,e.CardElement=P,e.CardExpiryElement=x,e.CardNumberElement=A,e.CartElement=F,e.Elements=g,e.ElementsConsumer=C,e.EpsBankElement=N,e.FpxBankElement=B,e.IbanElement=T,e.IdealBankElement=_,e.LinkAuthenticationElement=D,e.P24BankElement=I,e.PayButtonElement=L,e.PaymentElement=M,e.PaymentMethodMessagingElement=Y,e.PaymentRequestButtonElement=q,e.ShippingAddressElement=W,e.useCartElement=function(){return b("calls useCartElement()").cart},e.useCartElementState=function(){return b("calls useCartElementState()").cartState},e.useElements=function(){return E("calls useElements()").elements},e.useStripe=function(){return E("calls useStripe()").stripe},Object.defineProperty(e,"__esModule",{value:!0})}));

package.json

 {
   "name": "@stripe/react-stripe-js",
-  "version": "1.14.2",
+  "version": "1.15.0",
   "description": "React components for Stripe.js and Stripe Elements",
@@ -65,3 +65,3 @@ "main": "dist/react-stripe.js",
     "@storybook/react": "^6.5.0-beta.8",
-    "@stripe/stripe-js": "^1.42.0",
+    "@stripe/stripe-js": "^1.44.1",
     "@testing-library/jest-dom": "^5.16.4",
@@ -110,3 +110,3 @@ "@testing-library/react": "^13.1.1",
   "peerDependencies": {
-    "@stripe/stripe-js": "^1.42.1",
+    "@stripe/stripe-js": "^1.44.1",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@@ -113,0 +113,0 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"

src/index.ts

@@ -22,2 +22,3 @@ import createElementComponent from './components/createElementComponent';
   PaymentMethodMessagingElementComponent,
+  PayButtonElementComponent,
 } from './types';
@@ -127,4 +128,15 @@
 /**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ *
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
+export const PayButtonElement: PayButtonElementComponent = createElementComponent(
+  'payButton',
+  isServer
+);
+
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
 export const PaymentRequestButtonElement: PaymentRequestButtonElementComponent = createElementComponent(
@@ -131,0 +143,0 @@ 'paymentRequestButton',

src/types/index.ts

@@ -434,2 +434,58 @@ import {FunctionComponent} from 'react';
 
+export interface PayButtonElementProps extends ElementProps {
+  /**
+   * An object containing Element configuration options.
+   */
+  options?: stripeJs.StripePayButtonElementOptions;
+
+  /**
+   * Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
+   * The list of payment methods that could possibly show in the element, or undefined if no payment methods can show.
+   */
+  onReady?: (event: stripeJs.StripePayButtonElementReadyEvent) => any;
+
+  /**
+   * Triggered when the escape key is pressed within the Element.
+   */
+  onEscape?: () => any;
+
+  /**
+   * Triggered when the Element fails to load.
+   */
+  onLoadError?: (event: {elementType: 'payButton'; error: StripeError}) => any;
+
+  /**
+   * Triggered when a button on the Element is clicked.
+   */
+  onClick?: (event: stripeJs.StripePayButtonElementClickEvent) => any;
+
+  /**
+   * Triggered when a buyer authorizes a payment within a supported payment method.
+   */
+  onConfirm: (event: stripeJs.StripePayButtonElementConfirmEvent) => any;
+
+  /**
+   * Triggered when a payment interface is dismissed (e.g., a buyer closes the payment interface)
+   */
+  onCancel?: (event: {elementType: 'payButton'}) => any;
+
+  /**
+   * Triggered when a buyer selects a different shipping address.
+   */
+  onShippingAddressChange?: (
+    event: stripeJs.StripePayButtonElementShippingAddressChangeEvent
+  ) => any;
+
+  /**
+   * Triggered when a buyer selects a different shipping rate.
+   */
+  onShippingRateChange?: (
+    event: stripeJs.StripePayButtonElementShippingRateChangeEvent
+  ) => any;
+}
+
+export type PayButtonElementComponent = FunctionComponent<
+  PayButtonElementProps
+>;
+
 export interface PaymentRequestButtonElementProps extends ElementProps {
@@ -711,3 +767,3 @@ /**
     /**
-     * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+     * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_link_authentication_element) for the `LinkAuthenticationElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
      * Returns `null` if no `LinkAuthenticationElement` is rendered in the current `Elements` provider tree.
@@ -719,2 +775,6 @@ */
 
+    /**
+     * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_payment_element) for the `PaymentElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+     * Returns `null` if no `PaymentElement` is rendered in the current `Elements` provider tree.
+     */
     getElement(
@@ -725,2 +785,10 @@ component: PaymentElementComponent
     /**
+     * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_pay_button_element) for the `PayButtonElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+     * Returns `null` if no `PayButtonElement` is rendered in the current `Elements` provider tree.
+     */
+    getElement(
+      component: PayButtonElementComponent
+    ): stripeJs.StripeElement | 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.
@@ -727,0 +795,0 @@ * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

388692

increased by7.75%

Lines of code

8155

increased by7.53%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes