From 0807fca4d5dad4073aa5a338c0b469c284628324 Mon Sep 17 00:00:00 2001
From: Todd Brannam <tbrannam@casualpenguin.com>
Date: Thu, 17 Sep 2020 21:40:06 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20Merge=20PR=20#47746=20braintree-?=
 =?UTF-8?q?web:=20paypal=20tokenize=20promise=20return=20type=20by=20@tbra?=
 =?UTF-8?q?nnam?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: paypal tokenize promise return type

The promise returning version of `tokenize` returns a different type than the callback version.

Additionally, included specialization of `tokenize` callback interface to reflect the payload type of callback.

* fix: paypal tokenize promise return type

The promise returning version of `tokenize` returns a different type than the callback version.

Additionally, included specialization of `tokenize` callback interface to reflect the payload type of callback.
---
 types/braintree-web/modules/core.d.ts   |  2 +-
 types/braintree-web/modules/paypal.d.ts |  6 +--
 types/braintree-web/test/web.ts         | 55 ++++++++++++++++++++++++-
 3 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/types/braintree-web/modules/core.d.ts b/types/braintree-web/modules/core.d.ts
index 00460f6922..9bf5c7f3af 100644
--- a/types/braintree-web/modules/core.d.ts
+++ b/types/braintree-web/modules/core.d.ts
@@ -3,7 +3,7 @@
  */
 export const VERSION: string;
 
-export type callback = (err?: BraintreeError, data?: any) => void;
+export type callback<T = any> = (err?: BraintreeError, data?: T) => void;
 
 /**
  * Enum for {@link BraintreeError} types.
diff --git a/types/braintree-web/modules/paypal.d.ts b/types/braintree-web/modules/paypal.d.ts
index be3ea3fd03..1b904806ef 100644
--- a/types/braintree-web/modules/paypal.d.ts
+++ b/types/braintree-web/modules/paypal.d.ts
@@ -63,7 +63,7 @@ export interface PayPal {
      * });
      */
     create(options: { client: Client }): Promise<PayPal>;
-    create(options: { client: Client }, callback: callback): void;
+    create(options: { client: Client }, callback: callback<PayPal>): void;
 
     VERSION: string;
 
@@ -150,7 +150,7 @@ export interface PayPal {
         shippingAddressOverride?: PayPalShippingAddress;
         shippingAddressEditable?: boolean;
         billingAgreementDescription?: string;
-    }): Promise<PayPalTokenizeReturn>;
+    }): Promise<PayPalTokenizePayload>;
     tokenize(
         options: {
             flow: string;
@@ -166,7 +166,7 @@ export interface PayPal {
             shippingAddressEditable?: boolean;
             billingAgreementDescription?: string;
         },
-        callback: callback,
+        callback: callback<PayPalTokenizePayload>,
     ): PayPalTokenizeReturn;
 
     /**
diff --git a/types/braintree-web/test/web.ts b/types/braintree-web/test/web.ts
index 53b2b5233a..2427c9ea96 100644
--- a/types/braintree-web/test/web.ts
+++ b/types/braintree-web/test/web.ts
@@ -386,7 +386,7 @@ braintree.client.create(
             {
                 client: clientInstance,
             },
-            (createErr, paypalInstance) => {
+            (createErr, paypalInstance: braintree.PayPal) => {
                 if (createErr) {
                     if (createErr.code === 'PAYPAL_BROWSER_NOT_SUPPORTED') {
                         console.error('This browser is not supported.');
@@ -439,6 +439,59 @@ braintree.client.create(
             },
         );
 
+        braintree.paypal.create(
+            {
+                client: clientInstance,
+            },
+            (createErr, paypalInstance) => {
+                if (createErr) {
+                    if (createErr.code === 'PAYPAL_BROWSER_NOT_SUPPORTED') {
+                        console.error('This browser is not supported.');
+                    } else {
+                        console.error('Error!', createErr);
+                    }
+                }
+
+                const button = new HTMLButtonElement();
+
+                button.addEventListener('click', async () => {
+                    // Disable the button so that we don't attempt to open multiple popups.
+                    button.setAttribute('disabled', 'disabled');
+
+                    // Because PayPal tokenization opens a popup, this must be called
+                    // as a result of a user action, such as a button click.
+                    try {
+                        const payload = await paypalInstance.tokenize({
+                            flow: 'vault', // Required
+                            // Any other tokenization options
+                        });
+                        payload.nonce;
+                        // Submit payload.nonce to your server
+                    } catch (tokenizeErr /*braintree.BraintreeError*/) {
+                        // Handle tokenization errors or premature flow closure
+                        switch (tokenizeErr.code) {
+                            case 'PAYPAL_POPUP_CLOSED':
+                                console.error('Customer closed PayPal popup.');
+                                break;
+                            case 'PAYPAL_ACCOUNT_TOKENIZATION_FAILED':
+                                console.error('PayPal tokenization failed. See details:', tokenizeErr.details);
+                                break;
+                            case 'PAYPAL_FLOW_FAILED':
+                                console.error(
+                                    'Unable to initialize PayPal flow. Are your options correct?',
+                                    tokenizeErr.details,
+                                );
+                                break;
+                            default:
+                                console.error('Error!', tokenizeErr);
+                        }
+                    } finally {
+                        button.removeAttribute('disabled');
+                    }
+                });
+            },
+        );
+
         braintree.paypalCheckout.create(
             {
                 client: clientInstance,