diff --git a/package.json b/package.json index d54c90c..1530697 100644 --- a/package.json +++ b/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" } diff --git a/src/index.ts b/src/index.ts index b139de7..1f0f6e2 100644 --- a/src/index.ts +++ b/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 */ diff --git a/src/types/index.ts b/src/types/index.ts index 154d7c6..107579c 100644 --- a/src/types/index.ts +++ b/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 diff --git a/yarn.lock b/yarn.lock index fd66a18..e00ccc6 100644 --- a/yarn.lock +++ b/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"