From 92abd0cd3d229b3be03c6890febb46827850f4ae Mon Sep 17 00:00:00 2001
From: Robin van Tienhoven
 <40362967+RobinvanTienhoven@users.noreply.github.com>
Date: Fri, 14 Sep 2018 18:52:53 +0200
Subject: [PATCH] StripeJS Typings fix (Typings were not imported correctly)
 (#28854)

* Quick fix

+ Element was not included so the native Element was used instead. This caused a warning when trying to use the StripeJS functions with the StripeJS Element object

* Element fix

+ Renamed Element to StripeElement in order to avoid confusion with the native 'Element' object.
+ Fixed unit test where the Native Element was used instead of the 'StripeElement' object
---
 types/stripejs/element.d.ts      | 4 ++--
 types/stripejs/index.d.ts        | 6 +++---
 types/stripejs/stripejs-tests.ts | 5 +++--
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/types/stripejs/element.d.ts b/types/stripejs/element.d.ts
index 82317b9adf..9a1b8b17e2 100644
--- a/types/stripejs/element.d.ts
+++ b/types/stripejs/element.d.ts
@@ -33,7 +33,7 @@ export interface ElementFactory {
     create(
         type: ElementType,
         options: CardElementOptions | IBANElementOptions | IdealBankOptions | PaymentButtonOptions
-    ): Element;
+    ): StripeElement;
 }
 
 export interface ElementCreatorOptions {
@@ -107,7 +107,7 @@ export interface FontConfigElement {
 }
 
 // --- ELEMENT --- //
-export interface Element {
+export interface StripeElement {
     /**
      * Mount the element to the DOM
      * @see https://stripe.com/docs/stripe-js/reference#element-mount
diff --git a/types/stripejs/index.d.ts b/types/stripejs/index.d.ts
index ed4f8686bf..f2a7ab21aa 100644
--- a/types/stripejs/index.d.ts
+++ b/types/stripejs/index.d.ts
@@ -4,7 +4,7 @@
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.1
 
-import { ElementCreatorOptions, ElementFactory } from './element';
+import { StripeElement, ElementCreatorOptions, ElementFactory } from './element';
 import { StripePaymentOptions, StripePaymentRequest } from './payment';
 import { BankTokenData, PiiTokenData, TokenData, IBANTokenData, TokenResult } from './token';
 import { SourceData, SourceResult } from './source';
@@ -60,7 +60,7 @@ export interface StripeJS {
      *
      * @return an object containing the generated token or an error
      */
-    createToken(element: Element, data?: TokenData | IBANTokenData): Promise<TokenResult>;
+    createToken(element: StripeElement, data?: TokenData | IBANTokenData): Promise<TokenResult>;
     createToken(type: 'bank_account', data: BankTokenData): Promise<TokenResult>;
     createToken(type: 'pii', data: PiiTokenData): Promise<TokenResult>;
 
@@ -75,7 +75,7 @@ export interface StripeJS {
      *
      * @return an object containing the generated Source or an error
      */
-    createSource(element: Element, data: SourceData): Promise<SourceResult>;
+    createSource(element: StripeElement, data: SourceData): Promise<SourceResult>;
     createSource(data: SourceData): Promise<SourceResult>;
 
     /**
diff --git a/types/stripejs/stripejs-tests.ts b/types/stripejs/stripejs-tests.ts
index 7c705e6ec0..06799c2df5 100644
--- a/types/stripejs/stripejs-tests.ts
+++ b/types/stripejs/stripejs-tests.ts
@@ -1,4 +1,5 @@
 import { StripeJS } from "stripejs";
+import { StripeElement } from "stripejs/element";
 import { CanMakePaymentResult, StripePaymentResponse } from "stripejs/payment";
 import { BankTokenData, IBANTokenData, TokenData, TokenResult } from "stripejs/token";
 import { SourceData, SourceResult } from "stripejs/source";
@@ -52,7 +53,7 @@ describe('StripeJS', () => {
     });
 
     it('Should be possible to create a token', () => {
-        const element: Element = {} as any;
+        const element: StripeElement = {} as any;
         const data: TokenData = {
             name: '',
             currency: 'eur',
@@ -83,7 +84,7 @@ describe('StripeJS', () => {
     });
 
     it('Should be possible to create a source object', () => {
-        const element: Element = {} as any;
+        const element: StripeElement = {} as any;
         const data: SourceData = {
             type: 'alipay',
             flow: 'none',