diff --git a/README.md b/README.md
index 1c94adda..2b7e3edb 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ version, we recommend using legacy
 
 ## Getting started
 
-- [Learn how to accept a payment](https://stripe.com/docs/payments/accept-a-payment?platform=web&ui=elements)
+- [Build a custom payment form using the Checkout Sessions API](https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=checkout)
 - [Add React Stripe.js to your React app](https://stripe.com/docs/stripe-js/react#setup)
 - [Try it out using CodeSandbox](https://codesandbox.io/s/react-stripe-official-q1loc?fontsize=14&hidenavigation=1&theme=dark)
 
@@ -36,104 +36,109 @@ npm install @stripe/react-stripe-js @stripe/stripe-js
 
 #### Using hooks
 
+> **Building a custom payment form?** Use the
+> [Checkout Sessions API](https://docs.stripe.com/payments/accept-a-payment?payment-ui=elements&api-integration=checkout)
+> integration shown below — the recommended approach for most integrations.
+> Create a Checkout Session on your server with `ui_mode: 'elements'` and pass
+> its `clientSecret` to `CheckoutElementsProvider`.
+
+Your server endpoint should create a Checkout Session and return its client
+secret:
+
+```js
+// POST /create-checkout-session
+const session = await stripe.checkout.sessions.create({
+  ui_mode: 'elements',
+  mode: 'payment',
+  return_url: 'https://example.com/order/123/complete',
+  line_items: [
+    {
+      price_data: {
+        currency: 'usd',
+        product_data: {name: 'T-shirt'},
+        unit_amount: 1099,
+      },
+      quantity: 1,
+    },
+  ],
+});
+
+res.json({clientSecret: session.client_secret});
+```
+
+Client:
+
 ```jsx
 import React, {useState} from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {loadStripe} from '@stripe/stripe-js';
 import {
   PaymentElement,
-  Elements,
-  useStripe,
-  useElements,
-} from '@stripe/react-stripe-js';
+  CheckoutElementsProvider,
+  useCheckoutElements,
+} from '@stripe/react-stripe-js/checkout';
 
 const CheckoutForm = () => {
-  const stripe = useStripe();
-  const elements = useElements();
-
+  const result = useCheckoutElements();
   const [errorMessage, setErrorMessage] = useState(null);
 
   const handleSubmit = async (event) => {
     event.preventDefault();
 
-    if (elements == null) {
+    if (result.type !== 'success') {
       return;
     }
 
-    // Trigger form validation and wallet collection
-    const {error: submitError} = await elements.submit();
-    if (submitError) {
-      // Show error to your customer
-      setErrorMessage(submitError.message);
-      return;
-    }
-
-    // Create the PaymentIntent and obtain clientSecret from your server endpoint
-    const res = await fetch('/create-intent', {
-      method: 'POST',
-    });
-
-    const {client_secret: clientSecret} = await res.json();
-
-    const {error} = await stripe.confirmPayment({
-      //`Elements` instance that was used to create the Payment Element
-      elements,
-      clientSecret,
-      confirmParams: {
-        return_url: 'https://example.com/order/123/complete',
-      },
-    });
-
-    if (error) {
-      // This point will only be reached if there is an immediate error when
-      // confirming the payment. Show error to your customer (for example, payment
-      // details incomplete)
+    try {
+      await result.checkout.confirm({
+        returnUrl: 'https://example.com/order/123/complete',
+      });
+    } catch (error) {
       setErrorMessage(error.message);
-    } else {
-      // Your customer will be redirected to your `return_url`. For some payment
-      // methods like iDEAL, your customer will be redirected to an intermediate
-      // site first to authorize the payment, then redirected to the `return_url`.
     }
   };
 
+  if (result.type === 'error') {
+    return <div>{result.error.message}</div>;
+  }
+
   return (
     <form onSubmit={handleSubmit}>
       <PaymentElement />
-      <button type="submit" disabled={!stripe || !elements}>
+      <button type="submit" disabled={result.type !== 'success'}>
         Pay
       </button>
-      {/* Show error message to your customers */}
       {errorMessage && <div>{errorMessage}</div>}
     </form>
   );
 };
 
-const stripePromise = loadStripe('pk_test_6pRNASCoBOKtIshFeQd4XMUh');
+// Use the publishable key for the same account that created the Checkout Session.
+const stripePromise = loadStripe('pk_test_...');
 
-const options = {
-  mode: 'payment',
-  amount: 1099,
-  currency: 'usd',
-  // Fully customizable with appearance API.
-  appearance: {
-    /*...*/
-  },
-};
+const App = () => {
+  // Fetch clientSecret from your server when the page loads.
+  // e.g. POST /create-checkout-session → { clientSecret }
+  const clientSecret = '...';
 
-const App = () => (
-  <Elements stripe={stripePromise} options={options}>
-    <CheckoutForm />
-  </Elements>
-);
+  return (
+    <CheckoutElementsProvider stripe={stripePromise} options={{clientSecret}}>
+      <CheckoutForm />
+    </CheckoutElementsProvider>
+  );
+};
 
-ReactDOM.render(<App />, document.body);
+createRoot(document.getElementById('root')).render(<App />);
 ```
 
-#### Using class components
+#### Using PaymentElement directly
+
+For existing integrations or when you need fine-grained control over the
+PaymentIntents flow, use `Elements` with `PaymentElement`:
 
 ```jsx
 import React from 'react';
-import ReactDOM from 'react-dom';
+import {createRoot} from 'react-dom/client';
 import {loadStripe} from '@stripe/stripe-js';
 import {
   PaymentElement,
@@ -223,7 +228,7 @@ const App = () => (
   </Elements>
 );
 
-ReactDOM.render(<App />, document.body);
+createRoot(document.getElementById('root')).render(<App />);
 ```
 
 ### TypeScript support
diff --git a/examples/hooks/14-Issuing-Elements.tsx b/examples/hooks/14-Issuing-Elements.tsx
index 90674d12..4223b4ac 100644
--- a/examples/hooks/14-Issuing-Elements.tsx
+++ b/examples/hooks/14-Issuing-Elements.tsx
@@ -137,21 +137,16 @@ const IssuingElementsDemo: React.FC<IssuingElementsDemoProps> = ({
   const handleGetElement = useCallback(() => {
     if (!elements) return;
 
-    const numberEl: StripeIssuingCardNumberDisplayElement | null = elements.getElement(
-      IssuingCardNumberDisplayElement
-    );
-    const cvcEl: StripeIssuingCardCvcDisplayElement | null = elements.getElement(
-      IssuingCardCvcDisplayElement
-    );
-    const expiryEl: StripeIssuingCardExpiryDisplayElement | null = elements.getElement(
-      IssuingCardExpiryDisplayElement
-    );
-    const pinEl: StripeIssuingCardPinDisplayElement | null = elements.getElement(
-      IssuingCardPinDisplayElement
-    );
-    const copyEl: StripeIssuingCardCopyButtonElement | null = elements.getElement(
-      IssuingCardCopyButtonElement
-    );
+    const numberEl: StripeIssuingCardNumberDisplayElement | null =
+      elements.getElement(IssuingCardNumberDisplayElement);
+    const cvcEl: StripeIssuingCardCvcDisplayElement | null =
+      elements.getElement(IssuingCardCvcDisplayElement);
+    const expiryEl: StripeIssuingCardExpiryDisplayElement | null =
+      elements.getElement(IssuingCardExpiryDisplayElement);
+    const pinEl: StripeIssuingCardPinDisplayElement | null =
+      elements.getElement(IssuingCardPinDisplayElement);
+    const copyEl: StripeIssuingCardCopyButtonElement | null =
+      elements.getElement(IssuingCardCopyButtonElement);
 
     console.log('[getElement results]', {
       number: numberEl,
@@ -192,12 +187,9 @@ const IssuingElementsDemo: React.FC<IssuingElementsDemoProps> = ({
   };
 
   // Type-safe options for each copy button variant
-  const toCopyValues: Array<StripeIssuingCardCopyButtonElementOptions['toCopy']> = [
-    'number',
-    'cvc',
-    'expiry',
-    'pin',
-  ];
+  const toCopyValues: Array<
+    StripeIssuingCardCopyButtonElementOptions['toCopy']
+  > = ['number', 'cvc', 'expiry', 'pin'];
 
   return (
     <div>
diff --git a/package.json b/package.json
index 7bef33e6..a914fcde 100644
--- a/package.json
+++ b/package.json
@@ -116,7 +116,7 @@
     "eslint-plugin-react-hooks": "^1.7.0",
     "fork-ts-checker-webpack-plugin": "^4.0.3",
     "jest": "^25.1.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.8.8",
     "react": "18.1.0",
     "react-docgen-typescript-loader": "^3.6.0",
     "react-dom": "18.1.0",
diff --git a/src/checkout/components/CheckoutContext.tsx b/src/checkout/components/CheckoutContext.tsx
index 1f7c9f41..b1d0a09e 100644
--- a/src/checkout/components/CheckoutContext.tsx
+++ b/src/checkout/components/CheckoutContext.tsx
@@ -145,11 +145,11 @@ const mapStateToCheckoutResult = <
     const {getSession: _getSession, ...otherCheckoutActions} = checkoutActions;
     return {
       type: 'success',
-      checkout: ({
+      checkout: {
         ...session,
         ...sdkMethods,
         ...otherCheckoutActions,
-      } as unknown) as T,
+      } as unknown as T,
     };
   } else if (checkoutState.type === 'loading') {
     return {type: 'loading'};
diff --git a/src/checkout/components/CheckoutElementsProvider.test.tsx b/src/checkout/components/CheckoutElementsProvider.test.tsx
index c0de3ceb..718ebc08 100644
--- a/src/checkout/components/CheckoutElementsProvider.test.tsx
+++ b/src/checkout/components/CheckoutElementsProvider.test.tsx
@@ -129,10 +129,8 @@ describe('CheckoutElementsProvider', () => {
       );
 
       const {on: _on, loadActions: _loadActions, ...elementsMethods} = mockSdk;
-      const {
-        getSession: _getSession,
-        ...otherCheckoutActions
-      } = testMockCheckoutActions;
+      const {getSession: _getSession, ...otherCheckoutActions} =
+        testMockCheckoutActions;
 
       const expectedCheckout = {
         ...elementsMethods,
@@ -217,10 +215,8 @@ describe('CheckoutElementsProvider', () => {
       // Every action key from the SDK (except getSession, whose fields are
       // spread onto checkout as session data) must be a function. Derived
       // from the mock so this stays honest if the shared mock is updated.
-      const {
-        getSession: _getSession,
-        ...expectedActionKeys
-      } = testMockCheckoutActions;
+      const {getSession: _getSession, ...expectedActionKeys} =
+        testMockCheckoutActions;
       Object.keys(expectedActionKeys).forEach((key) => {
         expect(typeof (checkout as any)[key]).toBe('function');
       });
@@ -253,10 +249,8 @@ describe('CheckoutElementsProvider', () => {
       }
       const {checkout} = result.current;
 
-      const {
-        getSession: _getSession,
-        ...expectedActionKeys
-      } = testMockCheckoutActions;
+      const {getSession: _getSession, ...expectedActionKeys} =
+        testMockCheckoutActions;
       Object.keys(expectedActionKeys).forEach((key) => {
         expect(typeof (checkout as any)[key]).toBe('function');
       });
@@ -347,10 +341,8 @@ describe('CheckoutElementsProvider', () => {
       );
 
       const {on: _on, loadActions: _loadActions, ...elementsMethods} = mockSdk;
-      const {
-        getSession: _getSession,
-        ...otherCheckoutActions
-      } = testMockCheckoutActions;
+      const {getSession: _getSession, ...otherCheckoutActions} =
+        testMockCheckoutActions;
 
       const expectedCheckout = {
         ...elementsMethods,
@@ -397,10 +389,8 @@ describe('CheckoutElementsProvider', () => {
       );
 
       const {on: _on, loadActions: _loadActions, ...elementsMethods} = mockSdk;
-      const {
-        getSession: _getSession,
-        ...otherCheckoutActions
-      } = testMockCheckoutActions;
+      const {getSession: _getSession, ...otherCheckoutActions} =
+        testMockCheckoutActions;
 
       const expectedCheckout = {
         ...elementsMethods,
@@ -452,10 +442,8 @@ describe('CheckoutElementsProvider', () => {
       );
 
       const {on: _on, loadActions: _loadActions, ...elementsMethods} = mockSdk;
-      const {
-        getSession: _getSession,
-        ...otherCheckoutActions
-      } = testMockCheckoutActions;
+      const {getSession: _getSession, ...otherCheckoutActions} =
+        testMockCheckoutActions;
 
       const expectedCheckout = {
         ...elementsMethods,
diff --git a/src/checkout/components/CheckoutElementsProvider.tsx b/src/checkout/components/CheckoutElementsProvider.tsx
index c6329a0d..3cd02d31 100644
--- a/src/checkout/components/CheckoutElementsProvider.tsx
+++ b/src/checkout/components/CheckoutElementsProvider.tsx
@@ -40,9 +40,9 @@ const maybeSdk = (
   }
 };
 
-export const CheckoutElementsProvider: FunctionComponent<PropsWithChildren<
-  CheckoutElementsProviderProps
->> = (({
+export const CheckoutElementsProvider: FunctionComponent<
+  PropsWithChildren<CheckoutElementsProviderProps>
+> = (({
   stripe: rawStripeProp,
   options,
   children,
diff --git a/src/checkout/components/CheckoutFormProvider.test.tsx b/src/checkout/components/CheckoutFormProvider.test.tsx
index c37a1f43..065a6e1b 100644
--- a/src/checkout/components/CheckoutFormProvider.test.tsx
+++ b/src/checkout/components/CheckoutFormProvider.test.tsx
@@ -144,10 +144,8 @@ describe('CheckoutFormProvider', () => {
       );
 
       const {on: _on, loadActions: _loadActions, ...sdkMethods} = mockSdk;
-      const {
-        getSession: _getSession,
-        ...otherCheckoutActions
-      } = testMockCheckoutActions;
+      const {getSession: _getSession, ...otherCheckoutActions} =
+        testMockCheckoutActions;
 
       expect(result.current).toEqual({
         type: 'success',
diff --git a/src/checkout/components/CheckoutFormProvider.tsx b/src/checkout/components/CheckoutFormProvider.tsx
index 8a7b154d..54cefddd 100644
--- a/src/checkout/components/CheckoutFormProvider.tsx
+++ b/src/checkout/components/CheckoutFormProvider.tsx
@@ -33,9 +33,9 @@ interface PrivateCheckoutFormProviderProps {
 const INVALID_STRIPE_ERROR =
   'Invalid prop `stripe` supplied to `CheckoutFormProvider`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.';
 
-export const CheckoutFormProvider: FunctionComponent<PropsWithChildren<
-  CheckoutFormProviderProps
->> = (({
+export const CheckoutFormProvider: FunctionComponent<
+  PropsWithChildren<CheckoutFormProviderProps>
+> = (({
   stripe: rawStripeProp,
   options,
   children,
diff --git a/src/checkout/index.ts b/src/checkout/index.ts
index 029be270..a8157de3 100644
--- a/src/checkout/index.ts
+++ b/src/checkout/index.ts
@@ -27,10 +27,8 @@ import {
   TermsElementComponent,
 } from './types';
 
-export const CurrencySelectorElement: CurrencySelectorElementComponent = createElementComponent(
-  'currencySelector',
-  isServer
-);
+export const CurrencySelectorElement: CurrencySelectorElementComponent =
+  createElementComponent('currencySelector', isServer);
 
 export const PaymentElement: PaymentElementComponent = createElementComponent(
   'payment',
@@ -43,20 +41,16 @@ export const CheckoutForm: CheckoutFormComponent = createElementComponent(
   'CheckoutForm'
 );
 
-export const ExpressCheckoutElement: ExpressCheckoutElementComponent = createElementComponent(
-  'expressCheckout',
-  isServer
-);
+export const ExpressCheckoutElement: ExpressCheckoutElementComponent =
+  createElementComponent('expressCheckout', isServer);
 
 export const TaxIdElement: TaxIdElementComponent = createElementComponent(
   'taxId',
   isServer
 );
 
-export const ContactDetailsElement: ContactDetailsElementComponent = createElementComponent(
-  'contactDetails',
-  isServer
-);
+export const ContactDetailsElement: ContactDetailsElementComponent =
+  createElementComponent('contactDetails', isServer);
 
 const AddressElementBase = createElementComponent('address', isServer) as any;
 
diff --git a/src/checkout/types/index.ts b/src/checkout/types/index.ts
index 8122d947..dd13d03e 100644
--- a/src/checkout/types/index.ts
+++ b/src/checkout/types/index.ts
@@ -35,9 +35,8 @@ export interface CurrencySelectorElementProps extends ElementProps {
   onLoaderStart?: (event: {elementType: 'currencySelector'}) => any;
 }
 
-export type CurrencySelectorElementComponent = FunctionComponent<
-  CurrencySelectorElementProps
->;
+export type CurrencySelectorElementComponent =
+  FunctionComponent<CurrencySelectorElementProps>;
 
 export type BillingAddressElementProps = Omit<
   RootAddressElementProps,
@@ -46,9 +45,8 @@ export type BillingAddressElementProps = Omit<
   options?: stripeJs.StripeCheckoutAddressElementOptions;
 };
 
-export type BillingAddressElementComponent = FunctionComponent<
-  BillingAddressElementProps
->;
+export type BillingAddressElementComponent =
+  FunctionComponent<BillingAddressElementProps>;
 
 export type ShippingAddressElementProps = Omit<
   RootAddressElementProps,
@@ -57,9 +55,8 @@ export type ShippingAddressElementProps = Omit<
   options?: stripeJs.StripeCheckoutAddressElementOptions;
 };
 
-export type ShippingAddressElementComponent = FunctionComponent<
-  ShippingAddressElementProps
->;
+export type ShippingAddressElementComponent =
+  FunctionComponent<ShippingAddressElementProps>;
 
 export type PaymentElementProps = Omit<RootPaymentElementProps, 'options'> & {
   options?: stripeJs.StripeCheckoutPaymentElementOptions;
@@ -76,9 +73,8 @@ export type ExpressCheckoutElementProps = Omit<
   'options' | 'onClick' | 'onShippingAddressChange' | 'onShippingRateChange'
 > & {options?: stripeJs.StripeCheckoutExpressCheckoutElementOptions};
 
-export type ExpressCheckoutElementComponent = FunctionComponent<
-  ExpressCheckoutElementProps
->;
+export type ExpressCheckoutElementComponent =
+  FunctionComponent<ExpressCheckoutElementProps>;
 
 export interface TaxIdElementProps extends ElementProps {
   options: stripeJs.StripeTaxIdElementOptions;
@@ -103,9 +99,8 @@ export interface ContactDetailsElementProps extends ElementProps {
   onLoaderStart?: (event: {elementType: 'contactDetails'}) => any;
 }
 
-export type ContactDetailsElementComponent = FunctionComponent<
-  ContactDetailsElementProps
->;
+export type ContactDetailsElementComponent =
+  FunctionComponent<ContactDetailsElementProps>;
 
 export interface TermsElementProps extends ElementProps {
   options?: stripeJs.StripeCheckoutTermsElementOptions;
diff --git a/src/components/Elements.tsx b/src/components/Elements.tsx
index a042474c..b898445e 100644
--- a/src/components/Elements.tsx
+++ b/src/components/Elements.tsx
@@ -79,9 +79,10 @@ export const Elements: FunctionComponent<PropsWithChildren<ElementsProps>> = (({
   options,
   children,
 }: PrivateElementsProps) => {
-  const parsed = React.useMemo(() => parseStripeProp(rawStripeProp), [
-    rawStripeProp,
-  ]);
+  const parsed = React.useMemo(
+    () => parseStripeProp(rawStripeProp),
+    [rawStripeProp]
+  );
 
   // For a sync stripe instance, initialize into context
   const [ctx, setContext] = React.useState<ElementsContextValue>(() => ({
diff --git a/src/components/EmbeddedCheckoutProvider.tsx b/src/components/EmbeddedCheckoutProvider.tsx
index d2fafa86..1854db94 100644
--- a/src/components/EmbeddedCheckoutProvider.tsx
+++ b/src/components/EmbeddedCheckoutProvider.tsx
@@ -17,9 +17,8 @@ export type EmbeddedCheckoutContextValue = {
   embeddedCheckout: EmbeddedCheckoutPublicInterface | null;
 };
 
-const EmbeddedCheckoutContext = React.createContext<EmbeddedCheckoutContextValue | null>(
-  null
-);
+const EmbeddedCheckoutContext =
+  React.createContext<EmbeddedCheckoutContextValue | null>(null);
 EmbeddedCheckoutContext.displayName = 'EmbeddedCheckoutProviderContext';
 
 export const useEmbeddedCheckoutContext = (): EmbeddedCheckoutContextValue => {
@@ -71,9 +70,9 @@ interface PrivateEmbeddedCheckoutProviderProps {
 const INVALID_STRIPE_ERROR =
   'Invalid prop `stripe` supplied to `EmbeddedCheckoutProvider`. We recommend using the `loadStripe` utility from `@stripe/stripe-js`. See https://stripe.com/docs/stripe-js/react#elements-props-stripe for details.';
 
-export const EmbeddedCheckoutProvider: FunctionComponent<PropsWithChildren<
-  EmbeddedCheckoutProviderProps
->> = ({
+export const EmbeddedCheckoutProvider: FunctionComponent<
+  PropsWithChildren<EmbeddedCheckoutProviderProps>
+> = ({
   stripe: rawStripeProp,
   options,
   children,
diff --git a/src/components/FinancialAccountDisclosure.tsx b/src/components/FinancialAccountDisclosure.tsx
index e7fc147d..1ee2e273 100644
--- a/src/components/FinancialAccountDisclosure.tsx
+++ b/src/components/FinancialAccountDisclosure.tsx
@@ -37,19 +37,17 @@ interface FinancialAccountDisclosureProps {
   };
 }
 
-export const FinancialAccountDisclosure: FunctionComponent<FinancialAccountDisclosureProps> = ({
-  stripe: rawStripeProp,
-  onLoad,
-  onError,
-  options,
-}) => {
+export const FinancialAccountDisclosure: FunctionComponent<
+  FinancialAccountDisclosureProps
+> = ({stripe: rawStripeProp, onLoad, onError, options}) => {
   const businessName = options?.businessName;
   const learnMoreLink = options?.learnMoreLink;
 
   const containerRef = React.useRef<HTMLDivElement>(null);
-  const parsed = React.useMemo(() => parseStripeProp(rawStripeProp), [
-    rawStripeProp,
-  ]);
+  const parsed = React.useMemo(
+    () => parseStripeProp(rawStripeProp),
+    [rawStripeProp]
+  );
   const [stripeState, setStripeState] = React.useState<stripeJs.Stripe | null>(
     parsed.tag === 'sync' ? parsed.stripe : null
   );
@@ -93,10 +91,9 @@ export const FinancialAccountDisclosure: FunctionComponent<FinancialAccountDiscl
         return;
       }
 
-      const {
-        htmlElement: disclosureContent,
-        error,
-      } = await (stripeState as any).createFinancialAccountDisclosure({
+      const {htmlElement: disclosureContent, error} = await (
+        stripeState as any
+      ).createFinancialAccountDisclosure({
         businessName,
         learnMoreLink,
       });
diff --git a/src/components/IssuingDisclosure.tsx b/src/components/IssuingDisclosure.tsx
index 6b3b312f..98ffb891 100644
--- a/src/components/IssuingDisclosure.tsx
+++ b/src/components/IssuingDisclosure.tsx
@@ -50,9 +50,10 @@ export const IssuingDisclosure: FunctionComponent<IssuingDisclosureProps> = ({
   const learnMoreLink = options?.learnMoreLink;
 
   const containerRef = React.useRef<HTMLDivElement>(null);
-  const parsed = React.useMemo(() => parseStripeProp(rawStripeProp), [
-    rawStripeProp,
-  ]);
+  const parsed = React.useMemo(
+    () => parseStripeProp(rawStripeProp),
+    [rawStripeProp]
+  );
   const [stripeState, setStripeState] = React.useState<stripeJs.Stripe | null>(
     parsed.tag === 'sync' ? parsed.stripe : null
   );
@@ -96,10 +97,9 @@ export const IssuingDisclosure: FunctionComponent<IssuingDisclosureProps> = ({
         return;
       }
 
-      const {
-        htmlElement: disclosureContent,
-        error,
-      } = await (stripeState as any).createIssuingDisclosure({
+      const {htmlElement: disclosureContent, error} = await (
+        stripeState as any
+      ).createIssuingDisclosure({
         issuingProgramID,
         publicCardProgramName,
         learnMoreLink,
diff --git a/src/components/createElementComponent.test.tsx b/src/components/createElementComponent.test.tsx
index b4afca79..3ee469e7 100644
--- a/src/components/createElementComponent.test.tsx
+++ b/src/components/createElementComponent.test.tsx
@@ -164,10 +164,8 @@ describe('createElementComponent', () => {
       'card',
       false
     );
-    const PaymentRequestButtonElement: PaymentRequestButtonElementComponent = createElementComponent(
-      'card',
-      false
-    );
+    const PaymentRequestButtonElement: PaymentRequestButtonElementComponent =
+      createElementComponent('card', false);
     const PaymentElement: PaymentElementComponent = createElementComponent(
       'payment',
       false
@@ -177,10 +175,8 @@ describe('createElementComponent', () => {
       false
     );
 
-    const ExpressCheckoutElement: ExpressCheckoutElementComponent = createElementComponent(
-      'expressCheckout',
-      false
-    );
+    const ExpressCheckoutElement: ExpressCheckoutElementComponent =
+      createElementComponent('expressCheckout', false);
 
     const CheckoutForm = createElementComponent(
       'paymentForm',
@@ -1104,26 +1100,16 @@ describe('createElementComponent', () => {
     });
 
     describe('Issuing Elements', () => {
-      const IssuingCardNumberDisplayElement: IssuingCardNumberDisplayElementComponent = createElementComponent(
-        'issuingCardNumberDisplay',
-        false
-      );
-      const IssuingCardCvcDisplayElement: IssuingCardCvcDisplayElementComponent = createElementComponent(
-        'issuingCardCvcDisplay',
-        false
-      );
-      const IssuingCardExpiryDisplayElement: IssuingCardExpiryDisplayElementComponent = createElementComponent(
-        'issuingCardExpiryDisplay',
-        false
-      );
-      const IssuingCardPinDisplayElement: IssuingCardPinDisplayElementComponent = createElementComponent(
-        'issuingCardPinDisplay',
-        false
-      );
-      const IssuingCardCopyButtonElement: IssuingCardCopyButtonElementComponent = createElementComponent(
-        'issuingCardCopyButton',
-        false
-      );
+      const IssuingCardNumberDisplayElement: IssuingCardNumberDisplayElementComponent =
+        createElementComponent('issuingCardNumberDisplay', false);
+      const IssuingCardCvcDisplayElement: IssuingCardCvcDisplayElementComponent =
+        createElementComponent('issuingCardCvcDisplay', false);
+      const IssuingCardExpiryDisplayElement: IssuingCardExpiryDisplayElementComponent =
+        createElementComponent('issuingCardExpiryDisplay', false);
+      const IssuingCardPinDisplayElement: IssuingCardPinDisplayElementComponent =
+        createElementComponent('issuingCardPinDisplay', false);
+      const IssuingCardCopyButtonElement: IssuingCardCopyButtonElementComponent =
+        createElementComponent('issuingCardCopyButton', false);
 
       it.each([
         ['issuingCardNumberDisplay', IssuingCardNumberDisplayElement] as const,
@@ -1447,9 +1433,10 @@ describe('createElementComponent', () => {
           'issuingCardPinDisplay',
           displayOptions
         );
-        expect(
-          mockElements.create
-        ).toHaveBeenCalledWith('issuingCardCopyButton', {toCopy: 'number'});
+        expect(mockElements.create).toHaveBeenCalledWith(
+          'issuingCardCopyButton',
+          {toCopy: 'number'}
+        );
       });
     });
 
diff --git a/src/components/createElementComponent.tsx b/src/components/createElementComponent.tsx
index c2fc3152..81b3f5ce 100644
--- a/src/components/createElementComponent.tsx
+++ b/src/components/createElementComponent.tsx
@@ -151,13 +151,11 @@ const createElementComponent = (
               if ('mode' in options) {
                 const {mode, ...restOptions} = options;
                 if (mode === 'shipping') {
-                  newElement = elementsSdk.createShippingAddressElement(
-                    restOptions
-                  );
+                  newElement =
+                    elementsSdk.createShippingAddressElement(restOptions);
                 } else if (mode === 'billing') {
-                  newElement = elementsSdk.createBillingAddressElement(
-                    restOptions
-                  );
+                  newElement =
+                    elementsSdk.createBillingAddressElement(restOptions);
                 } else {
                   throw new Error(
                     "Invalid options.mode. mode must be 'billing' or 'shipping'."
@@ -170,9 +168,9 @@ const createElementComponent = (
               }
               break;
             case 'expressCheckout':
-              newElement = (elementsSdk.createExpressCheckoutElement(
+              newElement = elementsSdk.createExpressCheckoutElement(
                 options as stripeJs.StripeCheckoutExpressCheckoutElementOptions
-              ) as unknown) as stripeJs.StripeExpressCheckoutElement;
+              ) as unknown as stripeJs.StripeExpressCheckoutElement;
               break;
             case 'currencySelector':
               newElement = checkoutSdk.createCurrencySelectorElement();
diff --git a/src/index.ts b/src/index.ts
index 6e38e125..a8ddaaa2 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -41,10 +41,8 @@ export {useStripe} from './components/useStripe';
  *
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
-export const AuBankAccountElement: AuBankAccountElementComponent = createElementComponent(
-  'auBankAccount',
-  isServer
-);
+export const AuBankAccountElement: AuBankAccountElementComponent =
+  createElementComponent('auBankAccount', isServer);
 
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
@@ -57,18 +55,14 @@ export const CardElement: CardElementComponent = createElementComponent(
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
-export const CardNumberElement: CardNumberElementComponent = createElementComponent(
-  'cardNumber',
-  isServer
-);
+export const CardNumberElement: CardNumberElementComponent =
+  createElementComponent('cardNumber', isServer);
 
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
-export const CardExpiryElement: CardExpiryElementComponent = createElementComponent(
-  'cardExpiry',
-  isServer
-);
+export const CardExpiryElement: CardExpiryElementComponent =
+  createElementComponent('cardExpiry', isServer);
 
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
@@ -82,10 +76,8 @@ export const CardCvcElement: CardCvcElementComponent = createElementComponent(
  * Requires beta access:
  * Contact [Stripe support](https://support.stripe.com/) for more information.
  */
-export const CurrencySelectorElement: CurrencySelectorElementComponent = createElementComponent(
-  'currencySelector',
-  isServer
-);
+export const CurrencySelectorElement: CurrencySelectorElementComponent =
+  createElementComponent('currencySelector', isServer);
 
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
@@ -103,34 +95,26 @@ export const PaymentElement: PaymentElementComponent = createElementComponent(
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
-export const ExpressCheckoutElement: ExpressCheckoutElementComponent = createElementComponent(
-  'expressCheckout',
-  isServer
-);
+export const ExpressCheckoutElement: ExpressCheckoutElementComponent =
+  createElementComponent('expressCheckout', isServer);
 
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
-export const PaymentRequestButtonElement: PaymentRequestButtonElementComponent = createElementComponent(
-  'paymentRequestButton',
-  isServer
-);
+export const PaymentRequestButtonElement: PaymentRequestButtonElementComponent =
+  createElementComponent('paymentRequestButton', isServer);
 
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
-export const LinkAuthenticationElement: LinkAuthenticationElementComponent = createElementComponent(
-  'linkAuthentication',
-  isServer
-);
+export const LinkAuthenticationElement: LinkAuthenticationElementComponent =
+  createElementComponent('linkAuthentication', isServer);
 
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
-export const ContactDetailsElement: ContactDetailsElementComponent = createElementComponent(
-  'contactDetails',
-  isServer
-);
+export const ContactDetailsElement: ContactDetailsElementComponent =
+  createElementComponent('contactDetails', isServer);
 
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
@@ -146,18 +130,14 @@ export const AddressElement: AddressElementComponent = createElementComponent(
  *
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
-export const ShippingAddressElement: ShippingAddressElementComponent = createElementComponent(
-  'shippingAddress',
-  isServer
-);
+export const ShippingAddressElement: ShippingAddressElementComponent =
+  createElementComponent('shippingAddress', isServer);
 
 /**
  * @docs https://stripe.com/docs/stripe-js/react#element-components
  */
-export const PaymentMethodMessagingElement: PaymentMethodMessagingElementComponent = createElementComponent(
-  'paymentMethodMessaging',
-  isServer
-);
+export const PaymentMethodMessagingElement: PaymentMethodMessagingElementComponent =
+  createElementComponent('paymentMethodMessaging', isServer);
 
 /**
  * Requires beta access:
@@ -171,42 +151,32 @@ export const TaxIdElement: TaxIdElementComponent = createElementComponent(
 /**
  * @docs https://stripe.com/docs/issuing/elements
  */
-export const IssuingCardNumberDisplayElement: IssuingCardNumberDisplayElementComponent = createElementComponent(
-  'issuingCardNumberDisplay',
-  isServer
-);
+export const IssuingCardNumberDisplayElement: IssuingCardNumberDisplayElementComponent =
+  createElementComponent('issuingCardNumberDisplay', isServer);
 
 /**
  * @docs https://stripe.com/docs/issuing/elements
  */
-export const IssuingCardCvcDisplayElement: IssuingCardCvcDisplayElementComponent = createElementComponent(
-  'issuingCardCvcDisplay',
-  isServer
-);
+export const IssuingCardCvcDisplayElement: IssuingCardCvcDisplayElementComponent =
+  createElementComponent('issuingCardCvcDisplay', isServer);
 
 /**
  * @docs https://stripe.com/docs/issuing/elements
  */
-export const IssuingCardExpiryDisplayElement: IssuingCardExpiryDisplayElementComponent = createElementComponent(
-  'issuingCardExpiryDisplay',
-  isServer
-);
+export const IssuingCardExpiryDisplayElement: IssuingCardExpiryDisplayElementComponent =
+  createElementComponent('issuingCardExpiryDisplay', isServer);
 
 /**
  * @docs https://stripe.com/docs/issuing/elements
  */
-export const IssuingCardPinDisplayElement: IssuingCardPinDisplayElementComponent = createElementComponent(
-  'issuingCardPinDisplay',
-  isServer
-);
+export const IssuingCardPinDisplayElement: IssuingCardPinDisplayElementComponent =
+  createElementComponent('issuingCardPinDisplay', isServer);
 
 /**
  * @docs https://stripe.com/docs/issuing/elements
  */
-export const IssuingCardCopyButtonElement: IssuingCardCopyButtonElementComponent = createElementComponent(
-  'issuingCardCopyButton',
-  isServer
-);
+export const IssuingCardCopyButtonElement: IssuingCardCopyButtonElementComponent =
+  createElementComponent('issuingCardCopyButton', isServer);
 
 /**
  * Requires beta access:
diff --git a/src/types/index.ts b/src/types/index.ts
index 9bb3008a..ad264ed7 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -48,9 +48,8 @@ export interface AuBankAccountElementProps extends ElementProps {
   onEscape?: () => any;
 }
 
-export type AuBankAccountElementComponent = FunctionComponent<
-  AuBankAccountElementProps
->;
+export type AuBankAccountElementComponent =
+  FunctionComponent<AuBankAccountElementProps>;
 
 export interface CardElementProps extends ElementProps {
   /**
@@ -124,9 +123,8 @@ export interface CardNumberElementProps extends ElementProps {
   onLoadError?: (event: {elementType: 'cardNumber'; error: StripeError}) => any;
 }
 
-export type CardNumberElementComponent = FunctionComponent<
-  CardNumberElementProps
->;
+export type CardNumberElementComponent =
+  FunctionComponent<CardNumberElementProps>;
 
 export interface CardExpiryElementProps extends ElementProps {
   /**
@@ -152,9 +150,8 @@ export interface CardExpiryElementProps extends ElementProps {
   onEscape?: () => any;
 }
 
-export type CardExpiryElementComponent = FunctionComponent<
-  CardExpiryElementProps
->;
+export type CardExpiryElementComponent =
+  FunctionComponent<CardExpiryElementProps>;
 
 export interface CardCvcElementProps extends ElementProps {
   /**
@@ -247,9 +244,8 @@ export interface LinkAuthenticationElementProps extends ElementProps {
   onLoaderStart?: (event: {elementType: 'linkAuthentication'}) => any;
 }
 
-export type LinkAuthenticationElementComponent = FunctionComponent<
-  LinkAuthenticationElementProps
->;
+export type LinkAuthenticationElementComponent =
+  FunctionComponent<LinkAuthenticationElementProps>;
 
 export interface ContactDetailsElementProps extends ElementProps {
   /**
@@ -288,9 +284,8 @@ export interface ContactDetailsElementProps extends ElementProps {
   onLoaderStart?: (event: {elementType: 'contactDetails'}) => any;
 }
 
-export type ContactDetailsElementComponent = FunctionComponent<
-  ContactDetailsElementProps
->;
+export type ContactDetailsElementComponent =
+  FunctionComponent<ContactDetailsElementProps>;
 
 /**
  * Requires beta access:
@@ -474,9 +469,8 @@ export interface ExpressCheckoutElementProps extends ElementProps {
   ) => any;
 }
 
-export type ExpressCheckoutElementComponent = FunctionComponent<
-  ExpressCheckoutElementProps
->;
+export type ExpressCheckoutElementComponent =
+  FunctionComponent<ExpressCheckoutElementProps>;
 
 export interface PaymentRequestButtonElementProps extends ElementProps {
   /**
@@ -498,9 +492,8 @@ export interface PaymentRequestButtonElementProps extends ElementProps {
   onReady?: (element: stripeJs.StripePaymentRequestButtonElement) => any;
 }
 
-export type PaymentRequestButtonElementComponent = FunctionComponent<
-  PaymentRequestButtonElementProps
->;
+export type PaymentRequestButtonElementComponent =
+  FunctionComponent<PaymentRequestButtonElementProps>;
 
 export interface AddressElementProps extends ElementProps {
   /**
@@ -575,9 +568,8 @@ export interface ShippingAddressElementProps extends ElementProps {
   onLoaderStart?: (event: {elementType: 'shippingAddress'}) => any;
 }
 
-export type ShippingAddressElementComponent = FunctionComponent<
-  ShippingAddressElementProps
->;
+export type ShippingAddressElementComponent =
+  FunctionComponent<ShippingAddressElementProps>;
 
 export interface PaymentMethodMessagingElementProps {
   /**
@@ -602,9 +594,8 @@ export interface PaymentMethodMessagingElementProps {
   onReady?: (element: stripeJs.StripePaymentMethodMessagingElement) => any;
 }
 
-export type PaymentMethodMessagingElementComponent = FunctionComponent<
-  PaymentMethodMessagingElementProps
->;
+export type PaymentMethodMessagingElementComponent =
+  FunctionComponent<PaymentMethodMessagingElementProps>;
 
 export interface CurrencySelectorElementProps extends ElementProps {
   /**
@@ -632,9 +623,8 @@ export interface CurrencySelectorElementProps extends ElementProps {
   onLoaderStart?: (event: {elementType: 'currencySelector'}) => any;
 }
 
-export type CurrencySelectorElementComponent = FunctionComponent<
-  CurrencySelectorElementProps
->;
+export type CurrencySelectorElementComponent =
+  FunctionComponent<CurrencySelectorElementProps>;
 
 declare module '@stripe/stripe-js' {
   interface StripeElements {
@@ -860,9 +850,8 @@ export interface IssuingCardNumberDisplayElementProps extends ElementProps {
   onReady?: (element: stripeJs.StripeIssuingCardNumberDisplayElement) => any;
 }
 
-export type IssuingCardNumberDisplayElementComponent = FunctionComponent<
-  IssuingCardNumberDisplayElementProps
->;
+export type IssuingCardNumberDisplayElementComponent =
+  FunctionComponent<IssuingCardNumberDisplayElementProps>;
 
 export interface IssuingCardCvcDisplayElementProps extends ElementProps {
   /**
@@ -877,9 +866,8 @@ export interface IssuingCardCvcDisplayElementProps extends ElementProps {
   onReady?: (element: stripeJs.StripeIssuingCardCvcDisplayElement) => any;
 }
 
-export type IssuingCardCvcDisplayElementComponent = FunctionComponent<
-  IssuingCardCvcDisplayElementProps
->;
+export type IssuingCardCvcDisplayElementComponent =
+  FunctionComponent<IssuingCardCvcDisplayElementProps>;
 
 export interface IssuingCardExpiryDisplayElementProps extends ElementProps {
   /**
@@ -894,9 +882,8 @@ export interface IssuingCardExpiryDisplayElementProps extends ElementProps {
   onReady?: (element: stripeJs.StripeIssuingCardExpiryDisplayElement) => any;
 }
 
-export type IssuingCardExpiryDisplayElementComponent = FunctionComponent<
-  IssuingCardExpiryDisplayElementProps
->;
+export type IssuingCardExpiryDisplayElementComponent =
+  FunctionComponent<IssuingCardExpiryDisplayElementProps>;
 
 export interface IssuingCardPinDisplayElementProps extends ElementProps {
   /**
@@ -911,9 +898,8 @@ export interface IssuingCardPinDisplayElementProps extends ElementProps {
   onReady?: (element: stripeJs.StripeIssuingCardPinDisplayElement) => any;
 }
 
-export type IssuingCardPinDisplayElementComponent = FunctionComponent<
-  IssuingCardPinDisplayElementProps
->;
+export type IssuingCardPinDisplayElementComponent =
+  FunctionComponent<IssuingCardPinDisplayElementProps>;
 
 export interface IssuingCardCopyButtonElementProps extends ElementProps {
   /**
@@ -933,9 +919,8 @@ export interface IssuingCardCopyButtonElementProps extends ElementProps {
   onReady?: (element: stripeJs.StripeIssuingCardCopyButtonElement) => any;
 }
 
-export type IssuingCardCopyButtonElementComponent = FunctionComponent<
-  IssuingCardCopyButtonElementProps
->;
+export type IssuingCardCopyButtonElementComponent =
+  FunctionComponent<IssuingCardCopyButtonElementProps>;
 
 /**
  * Requires beta access:
diff --git a/yarn.lock b/yarn.lock
index 974d278b..d601fc53 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10316,10 +10316,10 @@ prettier-linter-helpers@^1.0.0:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18"
   integrity sha512-kXtO4s0Lz/DW/IJ9QdWhAf7/NmPWQXkFr/r/WkR3vyI+0v8amTDxiaQSLzs8NBlytfLWX/7uQUMIW677yLKl4w==
 
-prettier@^1.19.1:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
-  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
+prettier@^2.8.8:
+  version "2.8.8"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
+  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
 
 pretty-error@^2.1.1:
   version "2.1.2"