Merge pull request #19890 from dan-j/react-stripe-elements

Added definitions for 'react-stripe-elements'

types/react-stripe-elements/index.d.ts

@@ -0,0 +1,81 @@
+// Type definitions for react-stripe-elements 1.0
+// Project: https://github.com/stripe/react-stripe-elements#readme
+// Definitions by: dan-j <https://github.com/dan-j>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.3
+
+/// <reference types="stripe-v3" />
+import * as React from 'react';
+
+export namespace ReactStripeElements {
+	import ElementChangeResponse = stripe.elements.ElementChangeResponse;
+	import ElementsOptions = stripe.elements.ElementsOptions;
+	import TokenOptions = stripe.TokenOptions;
+	import TokenResponse = stripe.TokenResponse;
+
+	/**
+	 * There's a bug in @types/stripe which defines the property as
+	 * `declined_code` (with a 'd') but it's in fact `decline_code`
+	 */
+	type PatchedTokenResponse = TokenResponse & {
+		error?: { decline_code?: string };
+	};
+
+	interface StripeProviderProps {
+		apiKey: string;
+	}
+
+	interface StripeProps {
+		// I'm not sure what the definition for this is
+		createSource(): void;
+
+		createToken(options?: TokenOptions): Promise<PatchedTokenResponse>;
+	}
+
+	interface InjectOptions {
+		withRef?: boolean;
+	}
+
+	interface InjectedStripeProps {
+		stripe: StripeProps;
+	}
+
+	interface ElementProps extends ElementsOptions {
+		className?: string;
+
+		elementRef?(): void;
+
+		onChange?(event: ElementChangeResponse): void;
+
+		onBlur?(event: ElementChangeResponse): void;
+
+		onFocus?(event: ElementChangeResponse): void;
+
+		onReady?(): void;
+	}
+}
+
+export class StripeProvider extends React.Component<ReactStripeElements.StripeProviderProps> {
+}
+
+export class Elements extends React.Component {
+}
+
+export function injectStripe<P extends object>(
+    WrappedComponent: React.ComponentType<P & ReactStripeElements.InjectedStripeProps>,
+    componentOptions?: ReactStripeElements.InjectOptions): React.ComponentType<P>;
+
+export class CardElement extends React.Component<ReactStripeElements.ElementProps> {
+}
+
+export class CardNumberElement extends React.Component<ReactStripeElements.ElementProps> {
+}
+
+export class CardExpiryElement extends React.Component<ReactStripeElements.ElementProps> {
+}
+
+export class CardCVCElement extends React.Component<ReactStripeElements.ElementProps> {
+}
+
+export class PostalCodeElement extends React.Component<ReactStripeElements.ElementProps> {
+}

types/react-stripe-elements/react-stripe-elements-tests.tsx

@@ -0,0 +1,156 @@
+import * as React from 'react';
+import {
+    StripeProvider,
+    CardElement,
+    Elements,
+    injectStripe,
+    CardNumberElement,
+    CardExpiryElement,
+    CardCVCElement,
+    PostalCodeElement,
+    ReactStripeElements,
+} from 'react-stripe-elements';
+import InjectedStripeProps = ReactStripeElements.InjectedStripeProps;
+
+import ElementChangeResponse = stripe.elements.ElementChangeResponse;
+import ElementsOptions = stripe.elements.ElementsOptions;
+import PatchedTokenResponse = ReactStripeElements.PatchedTokenResponse;
+
+const cardElementProps: ElementsOptions = {
+    iconStyle: 'solid',
+    style: {
+        base: {
+            color: '#32325d',
+            lineHeight: '24px',
+            fontFamily: 'Roboto, "Helvetica Neue", sans-serif',
+            fontSmoothing: 'antialiased',
+            fontSize: '16px',
+            '::placeholder': {
+                color: '#aab7c4',
+            },
+        },
+        invalid: {
+            color: '#B71C1C',
+            iconColor: '#B71C1C',
+        },
+    },
+    hidePostalCode: true,
+    classes: {
+        base: 'field',
+        complete: 'complete',
+        empty: 'is-empty',
+        focus: 'is-focused',
+        invalid: 'is-invalid',
+        webkitAutofill: 'webkit-autofill',
+    },
+    hideIcon: true,
+};
+
+const ElementsWithPropsTest: React.SFC = () => (
+    <div>
+        <CardElement
+            {...cardElementProps}
+            onChange={(event: ElementChangeResponse) => void 0}
+            onBlur={(event: ElementChangeResponse) => void 0}
+            onReady={() => void 0}
+            onFocus={(event: ElementChangeResponse) => void 0}
+        />
+        <CardNumberElement
+            {...cardElementProps}
+            onChange={(event: ElementChangeResponse) => void 0}
+            onBlur={(event: ElementChangeResponse) => void 0}
+            onReady={() => void 0}
+            onFocus={(event: ElementChangeResponse) => void 0}
+        />
+        <CardExpiryElement
+            {...cardElementProps}
+            onChange={(event: ElementChangeResponse) => void 0}
+            onBlur={(event: ElementChangeResponse) => void 0}
+            onReady={() => void 0}
+            onFocus={(event: ElementChangeResponse) => void 0}
+        />
+        <CardCVCElement
+            {...cardElementProps}
+            onChange={(event: ElementChangeResponse) => void 0}
+            onBlur={(event: ElementChangeResponse) => void 0}
+            onReady={() => void 0}
+            onFocus={(event: ElementChangeResponse) => void 0}
+        />
+        <PostalCodeElement
+            {...cardElementProps}
+            onChange={(event: ElementChangeResponse) => void 0}
+            onBlur={(event: ElementChangeResponse) => void 0}
+            onReady={() => void 0}
+            onFocus={(event: ElementChangeResponse) => void 0}
+        />
+    </div>
+);
+
+interface ComponentProps {
+    tokenCallback(token: PatchedTokenResponse): void;
+}
+
+class WrappedComponent extends React.Component<ComponentProps & InjectedStripeProps> {
+    onSubmit = () => {
+        this.props.stripe.createToken({
+            name: '',
+            address_line1: '',
+            address_line2: '',
+            address_city: '',
+            address_state: '',
+            address_zip: '',
+            address_country: '',
+            currency: '',
+        }).then((response: PatchedTokenResponse) => this.props.tokenCallback(response));
+    }
+
+    isFormValid = () => {
+        // use onChange callbacks from *Element components to detect if form is valid for submission
+        return false;
+    }
+
+    render() {
+        return (
+            <form onSubmit={this.onSubmit}>
+                <ElementsWithPropsTest />
+                <button disabled={!this.isFormValid()} />
+            </form>
+        );
+    }
+}
+
+const ExportedComponent: React.ComponentType<ComponentProps> = injectStripe(WrappedComponent);
+
+class MainComponent extends React.Component {
+    onTokenReceived = (token: PatchedTokenResponse) => void 0;
+
+    render() {
+        return <ExportedComponent tokenCallback={this.onTokenReceived} />;
+    }
+}
+
+class TestHOCs extends React.Component {
+    render() {
+        return (
+            <StripeProvider apiKey="">
+                <Elements>
+                    <MainComponent />
+                </Elements>
+            </StripeProvider>
+        );
+    }
+}
+
+/**
+ * Just an extra test to check default props
+ * @constructor
+ */
+const ElementsDefaultPropsTest: React.SFC = () => (
+    <div>
+        <CardElement />
+        <CardNumberElement />
+        <CardExpiryElement />
+        <CardCVCElement />
+        <PostalCodeElement />
+    </div>
+);

types/react-stripe-elements/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "jsx": "react",
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "react-stripe-elements-tests.tsx"
+    ]
+}

types/react-stripe-elements/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }