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

@@ -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

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>;
 
     /**

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',