From 9e274b5be1609766d26ac3addfd14901dab658ba Mon Sep 17 00:00:00 2001 From: Saoud Rizwan Date: Thu, 20 Jun 2019 17:09:36 -0400 Subject: [PATCH] Add type definitions for braintree-web-drop-in (#35759) * Add type definitions for braintree-web-drop-in * Fix ts-lint errors * Add PaymentMethodPayload interface * Remove global.d.ts and replace `HTMLElement` with `any`; remove tslint rules * Add global types to braintree-web-drop-in and relevant tests * Fix typo in documentation for braintree-web-drop-in --- types/braintree-web-drop-in/index.d.ts | 130 ++++++++++++++++++ .../test/braintree-web-drop-in-global.test.ts | 98 +++++++++++++ .../test/braintree-web-drop-in-module.test.ts | 105 ++++++++++++++ types/braintree-web-drop-in/tsconfig.json | 24 ++++ types/braintree-web-drop-in/tslint.json | 3 + 5 files changed, 360 insertions(+) create mode 100644 types/braintree-web-drop-in/index.d.ts create mode 100644 types/braintree-web-drop-in/test/braintree-web-drop-in-global.test.ts create mode 100644 types/braintree-web-drop-in/test/braintree-web-drop-in-module.test.ts create mode 100644 types/braintree-web-drop-in/tsconfig.json create mode 100644 types/braintree-web-drop-in/tslint.json diff --git a/types/braintree-web-drop-in/index.d.ts b/types/braintree-web-drop-in/index.d.ts new file mode 100644 index 0000000000..f13ac539c1 --- /dev/null +++ b/types/braintree-web-drop-in/index.d.ts @@ -0,0 +1,130 @@ +// Type definitions for braintree-web-drop-in 1.18 +// Project: https://github.com/braintree/braintree-web-dropin +// Definitions by: Saoud Rizwan +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped +// TypeScript Version: 3.3 + +/* +USAGE: +import * as dropin from "braintree-web-drop-in" + +NOTE: +Some objects, such as as the payload returned from Dropin.requestPaymentMethod, can have various shapes. Review Braintree's documentation for more information about any types not covered in this file: +https://braintree.github.io/braintree-web-drop-in/docs/current/module-braintree-web-drop-in.html +*/ + +// Options + +export interface Options { + authorization: string; + container: any; + locale?: string; + translations?: object; + paymentOptionPriority?: string[]; + card?: boolean | cardCreateOptions; + paypal?: paypalCreateOptions; + paypalCredit?: paypalCreateOptions; + venmo?: venmoCreateOptions | boolean; + applePay?: applePayCreateOptions; + googlePay?: googlePayCreateOptions; + dataCollector?: dataCollectorOptions; + threeDSecure?: threeDSecureOptions; + vaultManager?: boolean; + preselectVaultedPaymentMethod?: boolean; +} + +export interface applePayCreateOptions { + buttonStyle?: string; + displayName: string; + applePaySessionVersion?: number; + paymentRequest: any; +} + +export interface cardCreateOptions { + cardholderName?: + | boolean + | { + required?: boolean; + }; + overrides: { + fields?: object; + styles?: object; + }; + clearFieldsAfterTokenization?: boolean; + vault?: { + allowVaultCardOverride?: boolean; + vaultCard?: boolean; + }; +} + +export interface dataCollectorOptions { + kount?: boolean; + paypal?: boolean; +} + +export interface googlePayCreateOptions { + merchantId: string; + googlePayVersion?: string; + transactionInfo: any; + button?: any; +} + +export interface paypalCreateOptions { + flow: "checkout" | "vault"; + amount?: string | number; + currency?: string; + buttonStyle?: string; + commit?: boolean; +} + +export interface threeDSecureOptions { + amount: string; +} + +export interface venmoCreateOptions { + allowNewBrowserTab?: boolean; +} + +// Dropin + +export interface Dropin { + clearSelectedPaymentMethod(): void; + isPaymentMethodRequestable(): boolean; + on(event: "noPaymentMethodRequestable", handler: () => void): void; + on( + event: "paymentMethodRequestable", + handler: (payload: { type: "CreditCard" | "PayPalAccount"; paymentMethodIsSelected: boolean }) => void + ): void; + on( + event: "paymentOptionSelected", + handler: (payload: { paymentOption: "card" | "paypal" | "paypalCredit" }) => void + ): void; + requestPaymentMethod(callback: (error: object | null, payload: PaymentMethodPayload | undefined) => void): void; + requestPaymentMethod(): Promise; + teardown(callback: (error: object | null | undefined) => void): void; + teardown(): Promise; +} + +export interface PaymentMethodPayload { + nonce: string; + details: object; + type: "CreditCard" | "PayPalAccount" | "VenmoAccount" | "AndroidPayCard" | "ApplePayCard"; + deviceData: string | null; + [key: string]: any; +} + +// Methods + +export function create(options: Options, callback: (error: object | null, dropin: Dropin | undefined) => void): void; +export function create(options: Options): Promise; + +// Global + +declare global { + const braintree: { + dropin: { + create(options: Options, callback: (error: object | null, dropin: Dropin | undefined) => void): void; + create(options: Options): Promise; + }; + }; +} diff --git a/types/braintree-web-drop-in/test/braintree-web-drop-in-global.test.ts b/types/braintree-web-drop-in/test/braintree-web-drop-in-global.test.ts new file mode 100644 index 0000000000..98e7cf498b --- /dev/null +++ b/types/braintree-web-drop-in/test/braintree-web-drop-in-global.test.ts @@ -0,0 +1,98 @@ +braintree.dropin.create({ authorization: "", container: "my-div" }, (error, myDropin) => { + if (error) { + return; + } + if (myDropin) { + myDropin.clearSelectedPaymentMethod(); + } +}); + +(async () => { + const myDropin = await braintree.dropin.create({ + authorization: "", + container: "my-div", + locale: "en-US", + translations: {}, + paymentOptionPriority: ["card", "paypal", "paypalCredit", "venmo", "applePay"], + card: { + cardholderName: { + required: false + }, + overrides: { + fields: {}, + styles: {} + }, + clearFieldsAfterTokenization: false, + vault: { + allowVaultCardOverride: false, + vaultCard: false + } + }, + paypal: { + flow: "checkout", + amount: 1, + currency: "USD", + buttonStyle: "red", + commit: false + }, + paypalCredit: undefined, + venmo: { + allowNewBrowserTab: false + }, + applePay: { + buttonStyle: "red", + displayName: "name", + applePaySessionVersion: 1, + paymentRequest: {} + }, + googlePay: { + merchantId: "", + googlePayVersion: "", + transactionInfo: {}, + button: {} + }, + dataCollector: { + kount: false, + paypal: false + }, + threeDSecure: { + amount: "1" + }, + vaultManager: false, + preselectVaultedPaymentMethod: false + }); + + myDropin.clearSelectedPaymentMethod(); + const myBool: boolean = myDropin.isPaymentMethodRequestable(); + + myDropin.on("noPaymentMethodRequestable", () => { + return; + }); + myDropin.on("paymentMethodRequestable", ({ type, paymentMethodIsSelected }) => { + const myType: "CreditCard" | "PayPalAccount" = type; + const myBool: boolean = paymentMethodIsSelected; + }); + myDropin.on("paymentOptionSelected", ({ paymentOption }) => { + const myPaymentOption: "card" | "paypal" | "paypalCredit" = paymentOption; + }); + + myDropin.requestPaymentMethod((error, payload) => { + if (error) { + return; + } + }); + + const myPayload = await myDropin.requestPaymentMethod(); + const details: object = myPayload.details; + const deviceData: string | null = myPayload.deviceData; + const nonce: string = myPayload.nonce; + const type: "CreditCard" | "PayPalAccount" | "VenmoAccount" | "AndroidPayCard" | "ApplePayCard" = myPayload.type; + const countryOfIssuance: string = myPayload.binData.countryOfIssuance; + + myDropin.teardown(error => { + if (error) { + return; + } + }); + await myDropin.teardown(); +})(); diff --git a/types/braintree-web-drop-in/test/braintree-web-drop-in-module.test.ts b/types/braintree-web-drop-in/test/braintree-web-drop-in-module.test.ts new file mode 100644 index 0000000000..7e3740816e --- /dev/null +++ b/types/braintree-web-drop-in/test/braintree-web-drop-in-module.test.ts @@ -0,0 +1,105 @@ +import * as dropin from "braintree-web-drop-in"; + +dropin.create({ authorization: "", container: "my-div" }, (error, myDropin) => { + if (error) { + return; + } + if (myDropin) { + myDropin.clearSelectedPaymentMethod(); + } +}); + +(async () => { + const myOptions: dropin.Options = { + authorization: "", + container: "my-div", + locale: "en-US", + translations: {}, + paymentOptionPriority: ["card", "paypal", "paypalCredit", "venmo", "applePay"], + card: { + cardholderName: { + required: false + }, + overrides: { + fields: {}, + styles: {} + }, + clearFieldsAfterTokenization: false, + vault: { + allowVaultCardOverride: false, + vaultCard: false + } + }, + paypal: { + flow: "checkout", + amount: 1, + currency: "USD", + buttonStyle: "red", + commit: false + }, + paypalCredit: undefined, + venmo: { + allowNewBrowserTab: false + }, + applePay: { + buttonStyle: "red", + displayName: "name", + applePaySessionVersion: 1, + paymentRequest: {} + }, + googlePay: { + merchantId: "", + googlePayVersion: "", + transactionInfo: {}, + button: {} + }, + dataCollector: { + kount: false, + paypal: false + }, + threeDSecure: { + amount: "1" + }, + vaultManager: false, + preselectVaultedPaymentMethod: false + }; + const myDropin = await dropin.create(myOptions); + + myDropin.clearSelectedPaymentMethod(); + const myBool: boolean = myDropin.isPaymentMethodRequestable(); + + myDropin.on("noPaymentMethodRequestable", () => { + return; + }); + myDropin.on("paymentMethodRequestable", ({ type, paymentMethodIsSelected }) => { + const myType: "CreditCard" | "PayPalAccount" = type; + const myBool: boolean = paymentMethodIsSelected; + }); + myDropin.on("paymentOptionSelected", ({ paymentOption }) => { + const myPaymentOption: "card" | "paypal" | "paypalCredit" = paymentOption; + }); + + myDropin.requestPaymentMethod((error, payload) => { + if (error) { + return; + } + }); + + const myPayload = await myDropin.requestPaymentMethod(); + const details: object = myPayload.details; + const deviceData: string | null = myPayload.deviceData; + const nonce: string = myPayload.nonce; + const type: "CreditCard" | "PayPalAccount" | "VenmoAccount" | "AndroidPayCard" | "ApplePayCard" = myPayload.type; + const countryOfIssuance: string = myPayload.binData.countryOfIssuance; + + myDropin.teardown(error => { + if (error) { + return; + } + }); + await myDropin.teardown(); +})(); + +function customFunction(options: dropin.Options) { + return; +} diff --git a/types/braintree-web-drop-in/tsconfig.json b/types/braintree-web-drop-in/tsconfig.json new file mode 100644 index 0000000000..976ab1cf75 --- /dev/null +++ b/types/braintree-web-drop-in/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "module": "commonjs", + "lib": [ + "es6" + ], + "noImplicitAny": true, + "noImplicitThis": true, + "strictNullChecks": true, + "strictFunctionTypes": true, + "baseUrl": "../", + "typeRoots": [ + "../" + ], + "types": [], + "noEmit": true, + "forceConsistentCasingInFileNames": true + }, + "files": [ + "index.d.ts", + "test/braintree-web-drop-in-global.test.ts", + "test/braintree-web-drop-in-module.test.ts" + ] +} diff --git a/types/braintree-web-drop-in/tslint.json b/types/braintree-web-drop-in/tslint.json new file mode 100644 index 0000000000..f93cf8562a --- /dev/null +++ b/types/braintree-web-drop-in/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "dtslint/dt.json" +}