Add PBE component

Author: awalker-stripe

src/components/createElementComponent.tsx

@@ -34,6 +34,10 @@ interface PrivateElementProps {
   onNetworksChange?: UnknownCallback;
   onCheckout?: UnknownCallback;
   onLineItemClick?: UnknownCallback;
+  onConfirm?: UnknownCallback;
+  onCancel?: UnknownCallback;
+  onShippingAddressChange?: UnknownCallback;
+  onShippingRateChange?: UnknownCallback;
   options?: UnknownOptions;
 }
 
@@ -62,6 +66,10 @@ const createElementComponent = (
     onNetworksChange = noop,
     onCheckout = noop,
     onLineItemClick = noop,
+    onConfirm = noop,
+    onCancel = noop,
+    onShippingAddressChange = noop,
+    onShippingRateChange = noop,
   }) => {
     const {elements} = useElementsContextWithUseCase(`mounts <${displayName}>`);
     const elementRef = React.useRef<stripeJs.StripeElement | null>(null);
@@ -82,6 +90,12 @@ const createElementComponent = (
     const callOnNetworksChange = useCallbackReference(onNetworksChange);
     const callOnCheckout = useCallbackReference(onCheckout);
     const callOnLineItemClick = useCallbackReference(onLineItemClick);
+    const callOnConfirm = useCallbackReference(onConfirm);
+    const callOnCancel = useCallbackReference(onCancel);
+    const callOnShippingAddressChange = useCallbackReference(
+      onShippingAddressChange
+    );
+    const callOnShippingRateChange = useCallbackReference(onShippingRateChange);
 
     React.useLayoutEffect(() => {
       if (elementRef.current == null && elements && domNode.current != null) {
@@ -174,6 +188,29 @@ const createElementComponent = (
         // just as they could listen for the `lineitemclick` event on any Element,
         // but only certain Elements will trigger the event.
         (element as any).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 as any).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 as any).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 as any).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 as any).on('shippingratechange', callOnShippingRateChange);
       }
     });
 
@@ -229,6 +266,10 @@ const createElementComponent = (
     onNetworksChange: PropTypes.func,
     onCheckout: PropTypes.func,
     onLineItemClick: PropTypes.func,
+    onConfirm: PropTypes.func,
+    onCancel: PropTypes.func,
+    onShippingAddressChange: PropTypes.func,
+    onShippingRateChange: PropTypes.func,
     options: PropTypes.object as any,
   };
 

src/index.ts

@@ -19,6 +19,7 @@ import {
   AffirmMessageElementComponent,
   AfterpayClearpayMessageElementComponent,
   PaymentMethodMessagingElementComponent,
+  PayButtonElementComponent,
 } from './types';
 
 export * from './types';
@@ -122,6 +123,17 @@ export const PaymentElement: PaymentElementComponent = createElementComponent(
   isServer
 );
 
+/**
+ * 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
  */

src/types/index.ts

@@ -431,6 +431,62 @@ export interface PaymentElementProps extends ElementProps {
 
 export type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
 
+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.
+   * Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
+   */
+  onReady?: (element: stripeJs.StripePayButtonElement) => 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 {
   /**
    * An object containing [Element configuration options](https://stripe.com/docs/js/elements_object/create_element?type=paymentRequestButton).
@@ -707,17 +763,29 @@ declare module '@stripe/stripe-js' {
     ): stripeJs.StripeEpsBankElement | null;
 
     /**
-     * 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.
      * Returns `null` if no `PaymentRequestButtonElement` is rendered in the current `Elements` provider tree.