Add React bindings for paymentMethodMessaging Element

package.json

@@ -62,7 +62,7 @@
     "@babel/preset-env": "^7.7.1",
     "@babel/preset-react": "^7.7.0",
     "@storybook/react": "^6.5.0-beta.8",
-    "@stripe/stripe-js": "^1.37.0",
+    "@stripe/stripe-js": "^1.38.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",
@@ -106,7 +106,7 @@
     "@types/react": "18.0.5"
   },
   "peerDependencies": {
-    "@stripe/stripe-js": "^1.37.0",
+    "@stripe/stripe-js": "^1.38.1",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   }

src/index.ts

@@ -17,6 +17,7 @@ import {
   AddressElementComponent,
   AffirmMessageElementComponent,
   AfterpayClearpayMessageElementComponent,
+  PaymentMethodMessagingElementComponent,
 } from './types';
 
 export * from './types';
@@ -159,6 +160,14 @@ export const ShippingAddressElement: ShippingAddressElementComponent = createEle
   isServer
 );
 
+/**
+ * @docs https://stripe.com/docs/stripe-js/react#element-components
+ */
+export const PaymentMethodMessagingElement: PaymentMethodMessagingElementComponent = createElementComponent(
+  'paymentMethodMessaging',
+  isServer
+);
+
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */

src/types/index.ts

@@ -483,6 +483,33 @@ export type ShippingAddressElementComponent = FunctionComponent<
   ShippingAddressElementProps
 >;
 
+export interface PaymentMethodMessagingElementProps {
+  /**
+   * 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.StripePaymentMethodMessagingElementOptions;
+
+  /**
+   * 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.StripePaymentMethodMessagingElement) => any;
+}
+
+export type PaymentMethodMessagingElementComponent = FunctionComponent<
+  PaymentMethodMessagingElementProps
+>;
+
 export interface AffirmMessageElementProps {
   /**
    * Passes through to the [Element’s container](https://stripe.com/docs/js/element/the_element_container).
@@ -659,16 +686,24 @@ declare module '@stripe/stripe-js' {
     ): stripeJs.StripeShippingAddressElement | 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.
+     * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=paymentMethodMessaging) for the `PaymentMethodMessagingElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+     * Returns `null` if no `PaymentMethodMessagingElement` is rendered in the current `Elements` provider tree.
+     */
+    getElement(
+      component: PaymentMethodMessagingElementComponent
+    ): stripeJs.StripePaymentMethodMessagingElement | null;
+
+    /**
+     * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `AffirmMessageElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+     * Returns `null` if no `AffirmMessageElement` is rendered in the current `Elements` provider tree.
      */
     getElement(
       component: AffirmMessageElementComponent
     ): stripeJs.StripeAffirmMessageElement | 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.
+     * Returns the underlying [element instance](https://stripe.com/docs/js/elements_object/create_element?type=card) for the `AfterpayClearpayMessageElement` component in the current [Elements](https://stripe.com/docs/stripe-js/react#elements-provider) provider tree.
+     * Returns `null` if no `AfterpayClearpayMessageElement` is rendered in the current `Elements` provider tree.
      */
     getElement(
       component: AfterpayClearpayMessageElementComponent

yarn.lock

@@ -2130,10 +2130,10 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@stripe/stripe-js@^1.37.0":
-  version "1.37.0"
-  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.37.0.tgz#e7dc688122186aedb611810f30fbe89feb50af7a"
-  integrity sha512-khoaEqpvQUwEz/PyeKiiOGfzzhX8i009BJNTXjkkUpT2uCjnemo2JyFPCyHGszViqTSpDbFXeNIGIv+dtvd+9g==
+"@stripe/stripe-js@^1.38.1":
+  version "1.38.1"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-1.38.1.tgz#67a27380f021931f6e44abeee2b011b8d7f524de"
+  integrity sha512-v0hF65jEs7tw33JE70E5puJ2fFhpiS2XYwmayupEdjKWavJivycYcZgZKYXAQhTiMgtDgN9YPzqUr86VzVc3Ew==
 
 "@testing-library/dom@^8.5.0":
   version "8.13.0"