Paypal PayLater button (#1420)

* feat: paypal pay later * fix: test
Adyen · Dec 16, 2021 · df629ef · df629ef
1 parent ebe7980
commit df629ef
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 6 deletions.
diff --git a/packages/lib/src/components/PayPal/components/PaypalButtons.test.tsx b/packages/lib/src/components/PayPal/components/PaypalButtons.test.tsx
@@ -8,7 +8,8 @@ const render = jest.fn(() => Promise.resolve());
 const paypalRefMock = {
     FUNDING: {
         PAYPAL: 'paypal',
-        CREDIT: 'credit'
+        CREDIT: 'credit',
+        PAYLATER: 'paylater'
     },
     Buttons: jest.fn(() => ({ isEligible, render }))
 };
@@ -19,12 +20,12 @@ describe('PaypalButtons', () => {
     test('Calls to paypalRef.Buttons', async () => {
         jest.clearAllMocks();
         getWrapper();
-        expect(paypalRefMock.Buttons).toHaveBeenCalledTimes(2);
+        expect(paypalRefMock.Buttons).toHaveBeenCalledTimes(3);
     });
 
     test('Calls to paypalRef.Buttons().render', async () => {
         jest.clearAllMocks();
         getWrapper();
-        expect(paypalRefMock.Buttons().render).toHaveBeenCalledTimes(2);
+        expect(paypalRefMock.Buttons().render).toHaveBeenCalledTimes(3);
     });
 });
diff --git a/packages/lib/src/components/PayPal/components/PaypalButtons.tsx b/packages/lib/src/components/PayPal/components/PaypalButtons.tsx
@@ -6,8 +6,9 @@ import { getStyle } from '../utils';
 export default function PaypalButtons(props: PayPalButtonsProps) {
     const { onInit, onComplete, onClick, onCancel, onError, onShippingChange, onSubmit, paypalRef, style } = props;
     const isTokenize = props.configuration?.intent === 'tokenize';
-    const paypalButtonRef = useRef(null);
-    const creditButtonRef = useRef(null);
+    const paypalButtonRef = useRef<HTMLDivElement>(null);
+    const creditButtonRef = useRef<HTMLDivElement>(null);
+    const payLaterButtonRef = useRef<HTMLDivElement>(null);
 
     const createButton = (fundingSource: FundingSource, buttonRef) => {
         const button = paypalRef.Buttons({
@@ -31,15 +32,17 @@ export default function PaypalButtons(props: PayPalButtonsProps) {
     };
 
     useEffect(() => {
-        const { PAYPAL, CREDIT } = paypalRef.FUNDING;
+        const { PAYPAL, CREDIT, PAYLATER } = paypalRef.FUNDING;
         createButton(PAYPAL, paypalButtonRef);
         if (!props.blockPayPalCreditButton) createButton(CREDIT, creditButtonRef);
+        if (!props.blockPayPalPayLaterButton) createButton(PAYLATER, payLaterButtonRef);
     }, []);
 
     return (
         <div className="adyen-checkout__paypal__buttons">
             <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>
     );
 }
diff --git a/packages/lib/src/components/PayPal/defaultProps.ts b/packages/lib/src/components/PayPal/defaultProps.ts
@@ -43,6 +43,8 @@ const defaultProps: PayPalElementProps = {
 
     blockPayPalCreditButton: false,
 
+    blockPayPalPayLaterButton: false,
+
     configuration: {
         /**
          * @see {@link https://developer.paypal.com/docs/checkout/reference/customize-sdk/#merchant-id}

diff --git a/packages/lib/src/components/PayPal/types.ts b/packages/lib/src/components/PayPal/types.ts
@@ -74,6 +74,12 @@ interface PayPalCommonProps {
 
     blockPayPalCreditButton?: boolean;
 
+    /**
+     * Set to true to force the UI to not render PayPal Pay Later button
+     * @defaultValue false
+     */
+    blockPayPalPayLaterButton?: boolean;
+
     /**
      * @see {@link https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-configuration/#csp-nonce}
      */