PayPal - Adding support for Venmo (#2136)

* feat: adding venmo

* feat: added logging

* feat: venmo changes

* feat: removed logs

* feat: fixed tests

packages/lib/src/components/PayPal/components/PaypalButtons.test.tsx

@@ -20,12 +20,12 @@ describe('PaypalButtons', () => {
     test('Calls to paypalRef.Buttons', async () => {
         jest.clearAllMocks();
         getWrapper();
-        expect(paypalRefMock.Buttons).toHaveBeenCalledTimes(3);
+        expect(paypalRefMock.Buttons).toHaveBeenCalledTimes(4);
     });
 
     test('Calls to paypalRef.Buttons().render', async () => {
         jest.clearAllMocks();
         getWrapper();
-        expect(paypalRefMock.Buttons().render).toHaveBeenCalledTimes(3);
+        expect(paypalRefMock.Buttons().render).toHaveBeenCalledTimes(4);
     });
 });

packages/lib/src/components/PayPal/components/PaypalButtons.tsx

@@ -24,14 +24,13 @@ export default function PaypalButtons({
     const paypalButtonRef = useRef<HTMLDivElement>(null);
     const creditButtonRef = useRef<HTMLDivElement>(null);
     const payLaterButtonRef = useRef<HTMLDivElement>(null);
+    const venmoButtonRef = useRef<HTMLDivElement>(null);
 
     const createButton = (fundingSource: FundingSource, buttonRef) => {
-        const button = paypalRef.Buttons({
+        const configuration = {
             ...(isTokenize && { createBillingAgreement: onSubmit }),
-            ...(!isTokenize && {
-                createOrder: onSubmit,
-                onShippingChange
-            }),
+            ...(!isTokenize && { createOrder: onSubmit }),
+            ...(!isTokenize && fundingSource !== 'venmo' && { onShippingChange }),
             fundingSource,
             style: getStyle(fundingSource, style),
             onInit,
@@ -39,7 +38,9 @@ export default function PaypalButtons({
             onCancel,
             onError,
             onApprove
-        });
+        };
+
+        const button = paypalRef.Buttons(configuration);
 
         if (button.isEligible()) {
             button.render(buttonRef.current);
@@ -47,10 +48,12 @@ export default function PaypalButtons({
     };
 
     useEffect(() => {
-        const { PAYPAL, CREDIT, PAYLATER } = paypalRef.FUNDING;
+        const { PAYPAL, CREDIT, PAYLATER, VENMO } = paypalRef.FUNDING;
         createButton(PAYPAL, paypalButtonRef);
+
         if (!props.blockPayPalCreditButton) createButton(CREDIT, creditButtonRef);
         if (!props.blockPayPalPayLaterButton) createButton(PAYLATER, payLaterButtonRef);
+        if (!props.blockPayPalVenmoButton) createButton(VENMO, venmoButtonRef);
     }, []);
 
     return (
@@ -58,6 +61,7 @@ export default function PaypalButtons({
             <div className="adyen-checkout__paypal__button adyen-checkout__paypal__button--paypal" ref={paypalButtonRef} />
             <div className="adyen-checkout__paypal__button adyen-checkout__paypal__button--credit" ref={creditButtonRef} />
             <div className="adyen-checkout__paypal__button adyen-checkout__paypal__button--pay-later" ref={payLaterButtonRef} />
+            <div className="adyen-checkout__paypal__button adyen-checkout__paypal__button--venmo" ref={venmoButtonRef} />
 
             {isProcessingPayment && (
                 <div className="adyen-checkout__paypal">

packages/lib/src/components/PayPal/defaultProps.ts

@@ -47,6 +47,8 @@ const defaultProps: PayPalElementProps = {
 
     enableMessages: false,
 
+    blockPayPalVenmoButton: false,
+
     configuration: {
         /**
          * @see {@link https://developer.paypal.com/docs/checkout/reference/customize-sdk/#merchant-id}

packages/lib/src/components/PayPal/types.ts

@@ -16,7 +16,7 @@ declare global {
  */
 export type Intent = 'sale' | 'capture' | 'authorize' | 'order' | 'tokenize';
 
-export type FundingSource = 'paypal' | 'credit';
+export type FundingSource = 'paypal' | 'credit' | 'paylater' | 'venmo';
 
 export interface PayPalStyles {
     /**
@@ -81,6 +81,12 @@ interface PayPalCommonProps {
     blockPayPalPayLaterButton?: boolean;
 
     /**
+     * Set to true to force the UI to not render PayPal Venmo button
+     * @defaultValue false
+     */
+    blockPayPalVenmoButton?: boolean;
+
+    /*
      * Set to true to force the UI to load Paypal Messages Component
      * @defaultValue false
      */

packages/lib/src/components/PayPal/utils.ts

@@ -57,7 +57,7 @@ const getPaypalSettings = ({
         vault,
         'client-id': clientId,
         'integration-date': INTEGRATION_DATE,
-        'enable-funding': 'paylater',
+        'enable-funding': 'paylater,venmo',
         components
     };
 };