mirror of
https://github.com/gosticks/DefinitelyTyped.git
synced 2026-08-11 12:30:18 +00:00
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
This commit is contained in:
Saoud Rizwan
committed by
Daniel Rosenwasser
Daniel Rosenwasser
parent
ffe3ed5296
commit
9e274b5be1
+130
@@ -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 <https://github.com/saoudrizwan>
|
||||
// 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<PaymentMethodPayload>;
|
||||
teardown(callback: (error: object | null | undefined) => void): void;
|
||||
teardown(): Promise<void>;
|
||||
}
|
||||
|
||||
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<Dropin>;
|
||||
|
||||
// Global
|
||||
|
||||
declare global {
|
||||
const braintree: {
|
||||
dropin: {
|
||||
create(options: Options, callback: (error: object | null, dropin: Dropin | undefined) => void): void;
|
||||
create(options: Options): Promise<Dropin>;
|
||||
};
|
||||
};
|
||||
}
|
||||
@@ -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();
|
||||
})();
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"extends": "dtslint/dt.json"
|
||||
}
|
||||
Reference in New Issue
Block a user