[pull] master from stripe:master

package.json

@@ -93,7 +93,7 @@
     "@rollup/plugin-replace": "^5.0.5",
     "@rollup/plugin-terser": "^0.4.4",
     "@storybook/react": "^6.5.0-beta.8",
-    "@stripe/stripe-js": "^9.9.0",
+    "@stripe/stripe-js": "^9.10.0",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.1.1",
     "@testing-library/react-hooks": "^8.0.0",

src/checkout/index.ts

@@ -24,6 +24,7 @@ import {
   ExpressCheckoutElementComponent,
   TaxIdElementComponent,
   ContactDetailsElementComponent,
+  TermsElementComponent,
 } from './types';
 
 export const CurrencySelectorElement: CurrencySelectorElementComponent = createElementComponent(
@@ -74,3 +75,12 @@ export const ShippingAddressElement: ShippingAddressElementComponent = ((
   const merged = {...options, mode: 'shipping'};
   return React.createElement(AddressElementBase, {...rest, options: merged});
 }) as ShippingAddressElementComponent;
+
+/**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ */
+export const TermsElement: TermsElementComponent = createElementComponent(
+  'terms',
+  isServer
+);

src/checkout/types/index.ts

@@ -106,3 +106,13 @@ export interface ContactDetailsElementProps extends ElementProps {
 export type ContactDetailsElementComponent = FunctionComponent<
   ContactDetailsElementProps
 >;
+
+export interface TermsElementProps extends ElementProps {
+  options?: stripeJs.StripeCheckoutTermsElementOptions;
+  onReady?: (element: stripeJs.StripeTermsElement) => any;
+  onEscape?: () => any;
+  onLoadError?: (event: {elementType: 'terms'; error: StripeError}) => any;
+  onLoaderStart?: (event: {elementType: 'terms'}) => any;
+}
+
+export type TermsElementComponent = FunctionComponent<TermsElementProps>;

src/components/createElementComponent.tsx

@@ -183,6 +183,11 @@ const createElementComponent = (
             case 'contactDetails':
               newElement = elementsSdk.createContactDetailsElement();
               break;
+            case 'terms':
+              newElement = elementsSdk.createTermsElement(
+                options as stripeJs.StripeCheckoutTermsElementOptions
+              );
+              break;
             default:
               throw new Error(
                 `<${displayName}> is not supported inside a checkout provider. Use an <Elements> provider instead.`

src/index.ts

@@ -21,6 +21,7 @@ import {
   PaymentMethodMessagingElementComponent,
   TaxIdElementComponent,
   CurrencySelectorElementComponent,
+  TermsElementComponent,
 } from './types';
 import {isServer} from './utils/isServer';
 
@@ -206,3 +207,12 @@ export const IssuingCardCopyButtonElement: IssuingCardCopyButtonElementComponent
   'issuingCardCopyButton',
   isServer
 );
+
+/**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ */
+export const TermsElement: TermsElementComponent = createElementComponent(
+  'terms',
+  isServer
+);

src/types/index.ts

@@ -936,3 +936,37 @@ export interface IssuingCardCopyButtonElementProps extends ElementProps {
 export type IssuingCardCopyButtonElementComponent = FunctionComponent<
   IssuingCardCopyButtonElementProps
 >;
+
+/**
+ * Requires beta access:
+ * Contact [Stripe support](https://support.stripe.com/) for more information.
+ */
+export interface TermsElementProps extends ElementProps {
+  /**
+   * An object containing Element configuration options.
+   */
+  options?: stripeJs.StripeTermsElementOptions;
+
+  /**
+   * 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.StripeTermsElement) => any;
+
+  /**
+   * Triggered when the escape key is pressed within the Element.
+   */
+  onEscape?: () => any;
+
+  /**
+   * Triggered when the Element fails to load.
+   */
+  onLoadError?: (event: {elementType: 'terms'; error: StripeError}) => any;
+
+  /**
+   * Triggered when the [loader](https://stripe.com/docs/js/elements_object/create#stripe_elements-options-loader) UI is mounted to the DOM and ready to be displayed.
+   */
+  onLoaderStart?: (event: {elementType: 'terms'}) => any;
+}
+
+export type TermsElementComponent = FunctionComponent<TermsElementProps>;

test/mocks.js

@@ -116,6 +116,13 @@ export const mockCheckoutSdk = () => {
     getContactDetailsElement: jest.fn(() => {
       return elements.contactDetails || null;
     }),
+    createTermsElement: jest.fn(() => {
+      elements.terms = mockElement();
+      return elements.terms;
+    }),
+    getTermsElement: jest.fn(() => {
+      return elements.terms || null;
+    }),
 
     on: jest.fn((event, callback) => {
       if (event === 'change') {

yarn.lock

@@ -2424,10 +2424,10 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
-"@stripe/stripe-js@^9.9.0":
-  version "9.9.0"
-  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-9.9.0.tgz#47cbf1cab003e52b3fe2acfecc703090fcd00bda"
-  integrity sha512-Vwqe6Q5cU4i82tPyAv2BpaW/fQSNdOSO4/J8EeDLPp5/oIZiMmdB+Hgh863zFH+rtoxpuWGvD1L7QPh8k1Rdvw==
+"@stripe/stripe-js@^9.10.0":
+  version "9.10.0"
+  resolved "https://registry.yarnpkg.com/@stripe/stripe-js/-/stripe-js-9.10.0.tgz#58f73aae3d07685f39870def2c94daca47684aec"
+  integrity sha512-rxkKgWLAWtjvJhqEynPJ5zPXoKx5cK4eIUunnMGxwUJDRHKv3MlpA1mCCXdeiXzui5YZNWJKUJBTpe7m30jhOA==
 
 "@testing-library/dom@^8.5.0":
   version "8.13.0"