Skip to content

Commit 204f271

Browse files
alanyan-stripealanyan-stripe
authored
[breaking] split out custom checkout imports (#609)
* move CheckoutProvider, useCheckout, CurrencySelectorElement * ece + payment element * add billing + shipping address element run prettier add root proxies clean up rm onClick check * add checkout specific props for PE & ECE run prettier rm Checkout prefix, add TaxIdElement run prettier omit additional ECE prop fields run prettier * add typesVersions
1 parent 53799b1 commit 204f271

File tree

13 files changed

+198
-58
lines changed

13 files changed

+198
-58
lines changed

‎checkout.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './dist/checkout';

‎checkout.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
'use strict';
2+
module.exports = require('./dist/checkout.js');

‎package.json

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,25 @@
88
"browser:min": "dist/react-stripe.umd.min.js",
99
"browser": "dist/react-stripe.umd.js",
1010
"types": "dist/react-stripe.d.ts",
11+
"exports": {
12+
".": {
13+
"require": "./dist/react-stripe.js",
14+
"import": "./dist/react-stripe.esm.mjs",
15+
"default": "./dist/react-stripe.esm.mjs",
16+
"types": "./dist/react-stripe.d.ts"
17+
},
18+
"./checkout": {
19+
"require": "./dist/checkout.js",
20+
"import": "./dist/checkout.esm.mjs",
21+
"default": "./dist/checkout.esm.mjs",
22+
"types": "./dist/checkout.d.ts"
23+
}
24+
},
25+
"typesVersions": {
26+
"*": {
27+
"checkout": ["dist/checkout.d.ts"]
28+
}
29+
},
1130
"scripts": {
1231
"test": "yarn run lint && yarn run lint:prettier && yarn run test:unit && yarn test:package-types && yarn run typecheck",
1332
"test:package-types": "attw --pack .",
@@ -36,7 +55,9 @@
3655
},
3756
"files": [
3857
"dist",
39-
"src"
58+
"src",
59+
"checkout.js",
60+
"checkout.d.ts"
4061
],
4162
"jest": {
4263
"preset": "ts-jest/presets/js-with-ts",

‎rollup.config.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,16 @@ export default [
3030
],
3131
plugins: PLUGINS,
3232
},
33+
// Checkout subpath build
34+
{
35+
input: 'src/checkout/index.ts',
36+
external: ['react', 'prop-types'],
37+
output: [
38+
{file: 'dist/checkout.js', format: 'cjs'},
39+
{file: 'dist/checkout.esm.mjs', format: 'es'},
40+
],
41+
plugins: PLUGINS,
42+
},
3343
// UMD build with inline PropTypes
3444
{
3545
input: 'src/index.ts',

‎src/components/CheckoutProvider.test.tsx renamed to ‎src/checkout/components/CheckoutProvider.test.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import {render, act, waitFor} from '@testing-library/react';
33
import {renderHook} from '@testing-library/react-hooks';
44

55
import {CheckoutProvider, useCheckout} from './CheckoutProvider';
6-
import {Elements} from './Elements';
7-
import {useStripe} from './useStripe';
8-
import * as mocks from '../../test/mocks';
9-
import makeDeferred from '../../test/makeDeferred';
6+
import {Elements} from '../../components/Elements';
7+
import {useStripe} from '../../components/useStripe';
8+
import * as mocks from '../../../test/mocks';
9+
import makeDeferred from '../../../test/makeDeferred';
1010

1111
describe('CheckoutProvider', () => {
1212
let mockStripe: any;

‎src/components/CheckoutProvider.tsx renamed to ‎src/checkout/components/CheckoutProvider.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import * as stripeJs from '@stripe/stripe-js';
44
import React from 'react';
55
import PropTypes from 'prop-types';
66

7-
import {parseStripeProp} from '../utils/parseStripeProp';
8-
import {usePrevious} from '../utils/usePrevious';
9-
import {isEqual} from '../utils/isEqual';
7+
import {parseStripeProp} from '../../utils/parseStripeProp';
8+
import {usePrevious} from '../../utils/usePrevious';
9+
import {isEqual} from '../../utils/isEqual';
1010
import {
1111
ElementsContext,
1212
ElementsContextValue,
1313
parseElementsContext,
14-
} from './Elements';
15-
import {registerWithStripeJs} from '../utils/registerWithStripeJs';
14+
} from '../../components/Elements';
15+
import {registerWithStripeJs} from '../../utils/registerWithStripeJs';
1616

1717
export type CheckoutValue = StripeCheckoutActions &
1818
stripeJs.StripeCheckoutSession;

‎src/checkout/index.ts

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
export {
2+
useCheckout,
3+
CheckoutProvider,
4+
CheckoutState,
5+
} from './components/CheckoutProvider';
6+
export * from './types';
7+
import React from 'react';
8+
import createElementComponent from '../components/createElementComponent';
9+
import {isServer} from '../utils/isServer';
10+
import {
11+
CurrencySelectorElementComponent,
12+
BillingAddressElementComponent,
13+
ShippingAddressElementComponent,
14+
PaymentElementComponent,
15+
ExpressCheckoutElementComponent,
16+
TaxIdElementComponent,
17+
} from './types';
18+
19+
/**
20+
* Requires beta access:
21+
* Contact [Stripe support](https://support.stripe.com/) for more information.
22+
*/
23+
export const CurrencySelectorElement: CurrencySelectorElementComponent = createElementComponent(
24+
'currencySelector',
25+
isServer
26+
);
27+
28+
export const PaymentElement: PaymentElementComponent = createElementComponent(
29+
'payment',
30+
isServer
31+
);
32+
33+
export const ExpressCheckoutElement: ExpressCheckoutElementComponent = createElementComponent(
34+
'expressCheckout',
35+
isServer
36+
);
37+
38+
export const TaxIdElement: TaxIdElementComponent = createElementComponent(
39+
'taxId',
40+
isServer
41+
);
42+
43+
export const BillingAddressElement: BillingAddressElementComponent = ((
44+
props
45+
) => {
46+
const Component = createElementComponent('address', isServer) as any;
47+
const {options, ...rest} = props as any;
48+
const merged = {...options, mode: 'billing'};
49+
return React.createElement(Component, {...rest, options: merged});
50+
}) as BillingAddressElementComponent;
51+
52+
export const ShippingAddressElement: ShippingAddressElementComponent = ((
53+
props
54+
) => {
55+
const Component = createElementComponent('address', isServer) as any;
56+
const {options, ...rest} = props as any;
57+
const merged = {...options, mode: 'shipping'};
58+
return React.createElement(Component, {...rest, options: merged});
59+
}) as ShippingAddressElementComponent;

‎src/checkout/types/index.ts

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import {FunctionComponent} from 'react';
2+
import * as stripeJs from '@stripe/stripe-js';
3+
import {StripeError} from '@stripe/stripe-js';
4+
import {
5+
ElementProps,
6+
PaymentElementProps as RootPaymentElementProps,
7+
ExpressCheckoutElementProps as RootExpressCheckoutElementProps,
8+
} from '../../types';
9+
10+
export interface CurrencySelectorElementProps extends ElementProps {
11+
/**
12+
* Triggered when the Element is fully rendered and can accept imperative `element.focus()` calls.
13+
* Called with a reference to the underlying [Element instance](https://stripe.com/docs/js/element).
14+
*/
15+
onReady?: (element: stripeJs.StripeCurrencySelectorElement) => any;
16+
17+
/**
18+
* Triggered when the escape key is pressed within the Element.
19+
*/
20+
onEscape?: () => any;
21+
22+
/**
23+
* Triggered when the Element fails to load.
24+
*/
25+
onLoadError?: (event: {
26+
elementType: 'currencySelector';
27+
error: StripeError;
28+
}) => any;
29+
30+
/**
31+
* 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.
32+
*/
33+
onLoaderStart?: (event: {elementType: 'currencySelector'}) => any;
34+
}
35+
36+
export type CurrencySelectorElementComponent = FunctionComponent<
37+
CurrencySelectorElementProps
38+
>;
39+
40+
export interface BillingAddressElementProps extends ElementProps {
41+
options?: stripeJs.StripeCheckoutAddressElementOptions;
42+
onReady?: (element: stripeJs.StripeAddressElement) => any;
43+
onEscape?: () => any;
44+
onLoadError?: (event: {elementType: 'address'; error: StripeError}) => any;
45+
onLoaderStart?: (event: {elementType: 'address'}) => any;
46+
}
47+
48+
export type BillingAddressElementComponent = FunctionComponent<
49+
BillingAddressElementProps
50+
>;
51+
52+
export interface ShippingAddressElementProps extends ElementProps {
53+
options?: stripeJs.StripeCheckoutAddressElementOptions;
54+
onReady?: (element: stripeJs.StripeAddressElement) => any;
55+
onEscape?: () => any;
56+
onLoadError?: (event: {elementType: 'address'; error: StripeError}) => any;
57+
onLoaderStart?: (event: {elementType: 'address'}) => any;
58+
}
59+
60+
export type ShippingAddressElementComponent = FunctionComponent<
61+
ShippingAddressElementProps
62+
>;
63+
64+
export type PaymentElementProps = Omit<RootPaymentElementProps, 'options'> & {
65+
options?: stripeJs.StripeCheckoutPaymentElementOptions;
66+
};
67+
68+
export type PaymentElementComponent = FunctionComponent<PaymentElementProps>;
69+
70+
export type ExpressCheckoutElementProps = Omit<
71+
RootExpressCheckoutElementProps,
72+
| 'options'
73+
| 'onClick'
74+
| 'onCancel'
75+
| 'onShippingAddressChange'
76+
| 'onShippingRateChange'
77+
> & {options?: stripeJs.StripeCheckoutExpressCheckoutElementOptions};
78+
79+
export type ExpressCheckoutElementComponent = FunctionComponent<
80+
ExpressCheckoutElementProps
81+
>;
82+
83+
export interface TaxIdElementProps extends ElementProps {
84+
options: stripeJs.StripeTaxIdElementOptions;
85+
onChange?: (event: stripeJs.StripeTaxIdElementChangeEvent) => any;
86+
onReady?: (element: stripeJs.StripeTaxIdElement) => any;
87+
onEscape?: () => any;
88+
onLoadError?: (event: {elementType: 'taxId'; error: StripeError}) => any;
89+
onLoaderStart?: (event: {elementType: 'taxId'}) => any;
90+
}
91+
92+
export type TaxIdElementComponent = FunctionComponent<TaxIdElementProps>;

‎src/components/createElementComponent.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {StrictMode} from 'react';
22
import {render, act, waitFor} from '@testing-library/react';
33

44
import * as ElementsModule from './Elements';
5-
import * as CheckoutModule from './CheckoutProvider';
5+
import * as CheckoutModule from '../checkout/components/CheckoutProvider';
66
import createElementComponent from './createElementComponent';
77
import * as mocks from '../../test/mocks';
88
import {

‎src/components/createElementComponent.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
extractAllowedOptionsUpdates,
1414
UnknownOptions,
1515
} from '../utils/extractAllowedOptionsUpdates';
16-
import {useElementsOrCheckoutContextWithUseCase} from './CheckoutProvider';
16+
import {useElementsOrCheckoutContextWithUseCase} from '../checkout/components/CheckoutProvider';
1717

1818
type UnknownCallback = (...args: unknown[]) => any;
1919

0 commit comments

Comments
 (0)