paypal-checkout-components Updates (#46336)

* Remove duplicate payload interface

* Rename Button to ButtonRenderer and export it separately

There is an instance of the `ButtonRenderer` on the paypal namespace called `Button`, but since it was exporting the instance as Button, you couldn't pass it around as a type. Now it is exporting as a separate name.

* Add FundingOption

* Switch to AuthorizationTokenizePayload

This was in-use instead of the other one so it makes it less of a breaking change

* Update test to use the ButtonRenderer type

* Update interface names

types/paypal-checkout-components/index.d.ts

@@ -5,7 +5,7 @@
 // TypeScript Version: 3.1
 
 import {
-  Button
+  ButtonRenderer, FundingOption
 } from './modules/button';
 
 import {
@@ -20,7 +20,7 @@ import {
 import {
   Address,
   AuthorizationData,
-  AuthorizationTokenizePayload,
+  AuthorizationResponse,
   CancellationData,
   CreditFinancingOptions,
   FlowType,
@@ -29,16 +29,20 @@ import {
   LineItemKind,
   ShippingOption,
   ShippingOptionType,
-  TokenizePayload,
-  TokenizePayloadDetails,
+  AuthorizationResponseDetails,
 } from './modules/callback-data';
 
-export const Button: Button;
+export const Button: ButtonRenderer;
 
 export {
   Address,
   AuthorizationData,
-  AuthorizationTokenizePayload,
+  AuthorizationResponse,
+  AuthorizationResponse as AuthorizationTokenizePayload, // maintain backwards compatibility
+  AuthorizationResponse as TokenizePayload, // maintain backwards compatibility
+  AuthorizationResponseDetails,
+  AuthorizationResponseDetails as TokenizePayloadDetails, // maintain backwards compatibility
+  ButtonRenderer,
   ButtonColorOption,
   ButtonLabelOption,
   ButtonShapeOption,
@@ -48,13 +52,12 @@ export {
   CreditFinancingOptions,
   Environment,
   FlowType,
+  FundingOption as FUNDING,
   Intent,
   LineItem,
   LineItemKind,
   ShippingOption,
   ShippingOptionType,
-  TokenizePayload,
-  TokenizePayloadDetails,
 };
 
 export as namespace paypal;

types/paypal-checkout-components/modules/button.d.ts

@@ -1,8 +1,15 @@
 import { Environment, ButtonStyle } from './configuration';
 
-import { AuthorizationData, AuthorizationTokenizePayload, CancellationData } from './callback-data';
+import { AuthorizationData, AuthorizationResponse, CancellationData } from './callback-data';
 
-export interface Button {
+export enum FundingOption {
+    CREDIT,
+    CARD,
+    VENMO,
+    ELV
+}
+
+export interface ButtonRenderer {
     render(
         options: {
             env?: Environment;
@@ -10,7 +17,7 @@ export interface Button {
             locale?: string;
 
             payment?: () => Promise<string>;
-            onAuthorize: (data: AuthorizationData, actions: object) => Promise<AuthorizationTokenizePayload>;
+            onAuthorize: (data: AuthorizationData, actions: object) => Promise<AuthorizationResponse>;
             onCancel?: (data: CancellationData, actions: object) => void;
             onError?: (error: string) => void;
             onShippingChange?: () => void;
@@ -18,6 +25,11 @@ export interface Button {
             accessToken?: () => void;
             onClose?: () => void;
 
+            funding?: {
+                allowed?: FundingOption[];
+                disallowed?: FundingOption[];
+            };
+
             sessionID?: string;
             buttonSessionID?: string;
             meta?: object;

types/paypal-checkout-components/modules/callback-data.d.ts

@@ -178,7 +178,7 @@ export interface CreditFinancingOptions {
     cartAmountImmutable: boolean;
 }
 
-export interface TokenizePayloadDetails {
+export interface AuthorizationResponseDetails {
     email: string;
     payerId: string;
     firstName: string;
@@ -202,7 +202,7 @@ export interface TokenizePayloadDetails {
     creditFinancingOffered?: CreditFinancingOptions;
 }
 
-export interface TokenizePayload {
+export interface AuthorizationResponse {
     /**
      * The payment method nonce.
      */
@@ -216,7 +216,7 @@ export interface TokenizePayload {
     /**
      * Additional PayPal account details.
      */
-    details: TokenizePayloadDetails;
+    details: AuthorizationResponseDetails;
 }
 
 export enum FlowType {
@@ -266,20 +266,3 @@ export interface CancellationData {
     paymentID: string;
     paymentToken: string;
 }
-
-export interface AuthorizationTokenizePayload {
-    /**
-     * The payment method nonce.
-     */
-    nonce: string;
-
-    /**
-     * The payment method type, always `PayPalAccount`.
-     */
-    type: string;
-
-    /**
-     * Additional PayPal account details.
-     */
-    details: TokenizePayloadDetails;
-}

types/paypal-checkout-components/test/button.ts

@@ -1,6 +1,6 @@
-import * as paypal from 'paypal-checkout-components';
+const buttonRenderer: paypal.ButtonRenderer = paypal.Button;
 
-paypal.Button.render(
+buttonRenderer.render(
     {
         env: paypal.Environment.Production,
 
@@ -11,7 +11,7 @@ paypal.Button.render(
         onAuthorize: async (
             data: paypal.AuthorizationData,
             actions: object,
-        ): Promise<paypal.AuthorizationTokenizePayload> => {
+        ): Promise<paypal.AuthorizationResponse> => {
             console.log('onAuthorize', data, actions);
 
             return {
@@ -33,6 +33,11 @@ paypal.Button.render(
         onError: (error: string) => {
             console.error('checkout.js error', error);
         },
+
+        funding: {
+            allowed: [paypal.FUNDING.CARD],
+            disallowed: [paypal.FUNDING.VENMO]
+        }
     },
     '#paypal-button',
 );