Add missing Elements props to react-stripe-elements

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

@@ -1,6 +1,7 @@
 // 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>
+//                 Santiago Doldan <https://github.com/santiagodoldan>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.3
 
@@ -37,7 +38,7 @@ export namespace ReactStripeElements {
 	}
 
 	interface InjectedStripeProps {
-		stripe: StripeProps;
+		stripe?: StripeProps;
 	}
 
 	interface ElementProps extends ElementsOptions {
@@ -58,7 +59,7 @@ export namespace ReactStripeElements {
 export class StripeProvider extends React.Component<ReactStripeElements.StripeProviderProps> {
 }
 
-export class Elements extends React.Component {
+export class Elements extends React.Component<stripe.elements.ElementsCreateOptions> {
 }
 
 export function injectStripe<P extends object>(

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

@@ -14,6 +14,7 @@ import InjectedStripeProps = ReactStripeElements.InjectedStripeProps;
 
 import ElementChangeResponse = stripe.elements.ElementChangeResponse;
 import ElementsOptions = stripe.elements.ElementsOptions;
+import ElementsCreateOptions = stripe.elements.ElementsCreateOptions;
 import PatchedTokenResponse = ReactStripeElements.PatchedTokenResponse;
 
 const cardElementProps: ElementsOptions = {
@@ -46,6 +47,22 @@ const cardElementProps: ElementsOptions = {
     hideIcon: true,
 };
 
+const fontElementsProps: ElementsCreateOptions = {
+  fonts: [
+    {
+      cssSrc: "https://fonts.googleapis.com/css?family=Dosis"
+    },
+    {
+      family: "Dosis, sanz",
+      src: "url(https://somewebsite.com/path/to/font.woff)",
+      style: "normal",
+      weight: "bold",
+      unicodeRange: "U+26"
+    }
+  ],
+  locale: "es"
+};
+
 const ElementsWithPropsTest: React.SFC = () => (
     <div>
         <CardElement
@@ -92,7 +109,7 @@ interface ComponentProps {
 
 class WrappedComponent extends React.Component<ComponentProps & InjectedStripeProps> {
     onSubmit = () => {
-        this.props.stripe.createToken({
+        this.props.stripe!.createToken({
             name: '',
             address_line1: '',
             address_line2: '',
@@ -133,7 +150,7 @@ class TestHOCs extends React.Component {
     render() {
         return (
             <StripeProvider apiKey="">
-                <Elements>
+                <Elements {...fontElementsProps}>
                     <MainComponent />
                 </Elements>
             </StripeProvider>