From dd0a42696e0e2712780d9b5f5bb6799ff65bace3 Mon Sep 17 00:00:00 2001 From: tjliu-stripe Date: Tue, 4 Aug 2026 16:27:36 -0400 Subject: [PATCH 1/2] bump prettier version (#693) --- examples/hooks/14-Issuing-Elements.tsx | 34 +++---- package.json | 2 +- src/checkout/components/CheckoutContext.tsx | 4 +- .../CheckoutElementsProvider.test.tsx | 36 +++----- .../components/CheckoutElementsProvider.tsx | 6 +- .../components/CheckoutFormProvider.test.tsx | 6 +- .../components/CheckoutFormProvider.tsx | 6 +- src/checkout/index.ts | 18 ++-- src/checkout/types/index.ts | 25 +++--- src/components/Elements.tsx | 7 +- src/components/EmbeddedCheckoutProvider.tsx | 11 ++- src/components/FinancialAccountDisclosure.tsx | 23 +++-- src/components/IssuingDisclosure.tsx | 14 +-- .../createElementComponent.test.tsx | 49 ++++------ src/components/createElementComponent.tsx | 14 ++- src/index.ts | 90 +++++++------------ src/types/index.ts | 75 +++++++--------- yarn.lock | 8 +- 18 files changed, 166 insertions(+), 262 deletions(-) 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 = ({ 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 = ({ }; // Type-safe options for each copy button variant - const toCopyValues: Array = [ - 'number', - 'cvc', - 'expiry', - 'pin', - ]; + const toCopyValues: Array< + StripeIssuingCardCopyButtonElementOptions['toCopy'] + > = ['number', 'cvc', 'expiry', 'pin']; return (
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> = (({ +export const CheckoutElementsProvider: FunctionComponent< + PropsWithChildren +> = (({ 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> = (({ +export const CheckoutFormProvider: FunctionComponent< + PropsWithChildren +> = (({ 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; 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; 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; export type PaymentElementProps = Omit & { 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; 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; 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> = (({ 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(() => ({ 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( - null -); +const EmbeddedCheckoutContext = + React.createContext(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> = ({ +export const EmbeddedCheckoutProvider: FunctionComponent< + PropsWithChildren +> = ({ 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 = ({ - 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(null); - const parsed = React.useMemo(() => parseStripeProp(rawStripeProp), [ - rawStripeProp, - ]); + const parsed = React.useMemo( + () => parseStripeProp(rawStripeProp), + [rawStripeProp] + ); const [stripeState, setStripeState] = React.useState( parsed.tag === 'sync' ? parsed.stripe : null ); @@ -93,10 +91,9 @@ export const FinancialAccountDisclosure: FunctionComponent = ({ const learnMoreLink = options?.learnMoreLink; const containerRef = React.useRef(null); - const parsed = React.useMemo(() => parseStripeProp(rawStripeProp), [ - rawStripeProp, - ]); + const parsed = React.useMemo( + () => parseStripeProp(rawStripeProp), + [rawStripeProp] + ); const [stripeState, setStripeState] = React.useState( parsed.tag === 'sync' ? parsed.stripe : null ); @@ -96,10 +97,9 @@ export const IssuingDisclosure: FunctionComponent = ({ 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; 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; 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; 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; 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; /** * Requires beta access: @@ -474,9 +469,8 @@ export interface ExpressCheckoutElementProps extends ElementProps { ) => any; } -export type ExpressCheckoutElementComponent = FunctionComponent< - ExpressCheckoutElementProps ->; +export type ExpressCheckoutElementComponent = + FunctionComponent; 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; 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; export interface PaymentMethodMessagingElementProps { /** @@ -602,9 +594,8 @@ export interface PaymentMethodMessagingElementProps { onReady?: (element: stripeJs.StripePaymentMethodMessagingElement) => any; } -export type PaymentMethodMessagingElementComponent = FunctionComponent< - PaymentMethodMessagingElementProps ->; +export type PaymentMethodMessagingElementComponent = + FunctionComponent; 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; 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; 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; 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; 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; 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; /** * 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" From 6149600e6c691b9d02da08ff3a28d31a3cebe331 Mon Sep 17 00:00:00 2001 From: maxwelly-stripe <139278188+maxwelly-stripe@users.noreply.github.com> Date: Tue, 4 Aug 2026 15:36:50 -0700 Subject: [PATCH 2/2] Update Demos to move from Payment Intents -> Checkout Sessions emphasis (#695) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Steer agents to CheckoutElementsProvider; audit links - Replace minimal hooks example with CheckoutElementsProvider + useCheckoutElements (EwCS, Stripe's recommended custom checkout integration) - Add agent steer note above the code snippet pointing to Checkout Sessions docs - Rename 'Using class components' → 'Using PaymentElement directly' with a brief intro clarifying it's for existing/lower-level integrations - Update deprecated ReactDOM.render → createRoot in both examples - Update 'Learn how to accept a payment' link → /docs/payments/custom-checkout Co-Authored-By: Claude Sonnet 4.6 Committed-By-Agent: claude * Run prettier Co-Authored-By: Claude Sonnet 4.6 Committed-By-Agent: claude * Fix broken docs link; use Checkout Sessions API wording Co-Authored-By: Claude Sonnet 4.6 Committed-By-Agent: claude * Clarify EwCS README example server and key requirements Document ui_mode: 'elements' when creating the Checkout Session and replace the generic test publishable key with a placeholder so the example matches account-scoped client secrets. Co-authored-by: Cursor Committed-By-Agent: cursor * Add Checkout Session server snippet to EwCS README example Show checkout.sessions.create with ui_mode: 'elements' so agents do not infer PaymentIntent creation from the client-side fetch comment alone. Co-authored-by: Cursor Committed-By-Agent: cursor --------- Co-authored-by: Claude Sonnet 4.6 Co-authored-by: Cursor --- README.md | 131 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 68 insertions(+), 63 deletions(-) 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
{result.error.message}
; + } + return (
- - {/* Show error message to your customers */} {errorMessage &&
{errorMessage}
} ); }; -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 = () => ( - - - -); + return ( + + + + ); +}; -ReactDOM.render(, document.body); +createRoot(document.getElementById('root')).render(); ``` -#### 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 = () => ( ); -ReactDOM.render(, document.body); +createRoot(document.getElementById('root')).render(); ``` ### TypeScript support