From 56dba556070fe649550c0a6cdcc138c9abd3400e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pablo=20Igarz=C3=A1bal?= <pablo.igarzabal@adyen.com>
Date: Thu, 25 Nov 2021 12:49:35 +0100
Subject: [PATCH] Add support for the PayPal intent tokenize (#1311)

Add support for the PayPal intent tokenize.

Remove the onShippingChange event when doing a payment with intent "tokenize" (also refered as 0-auth payment) in order to get the payerID property in the PayPal SDK response.
---
 packages/lib/src/components/PayPal/Paypal.tsx        | 12 ++++++++++++
 .../components/PayPal/components/PaypalButtons.tsx   |  8 ++++++--
 packages/lib/src/components/PayPal/types.ts          |  5 +++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/packages/lib/src/components/PayPal/Paypal.tsx b/packages/lib/src/components/PayPal/Paypal.tsx
index d5b953b6f1..1c22d0815b 100644
--- a/packages/lib/src/components/PayPal/Paypal.tsx
+++ b/packages/lib/src/components/PayPal/Paypal.tsx
@@ -28,6 +28,18 @@ class PaypalElement extends UIElement<PayPalElementProps> {
         this.submit = this.submit.bind(this);
     }
 
+    protected formatProps(props) {
+        const isZeroAuth = props.amount?.value === 0;
+        return {
+            ...props,
+            vault: isZeroAuth || props.vault,
+            configuration: {
+                ...props.configuration,
+                intent: isZeroAuth ? 'tokenize' : props.configuration.intent
+            }
+        };
+    }
+
     /**
      * Formats the component data output
      */
diff --git a/packages/lib/src/components/PayPal/components/PaypalButtons.tsx b/packages/lib/src/components/PayPal/components/PaypalButtons.tsx
index 42f3e76b7e..a806f1e03c 100644
--- a/packages/lib/src/components/PayPal/components/PaypalButtons.tsx
+++ b/packages/lib/src/components/PayPal/components/PaypalButtons.tsx
@@ -5,19 +5,23 @@ 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 createButton = (fundingSource: FundingSource, buttonRef) => {
         const button = paypalRef.Buttons({
+            ...(isTokenize && { createBillingAgreement: onSubmit }),
+            ...(!isTokenize && {
+                createOrder: onSubmit,
+                onShippingChange
+            }),
             fundingSource,
             style: getStyle(fundingSource, style),
             onInit,
             onClick,
             onCancel,
             onError,
-            onShippingChange,
-            createOrder: onSubmit,
             onApprove: onComplete
         });
 
diff --git a/packages/lib/src/components/PayPal/types.ts b/packages/lib/src/components/PayPal/types.ts
index f6a1c3c719..3bf9966840 100644
--- a/packages/lib/src/components/PayPal/types.ts
+++ b/packages/lib/src/components/PayPal/types.ts
@@ -14,7 +14,7 @@ declare global {
  * The intent for the transaction. This determines whether the funds are captured immediately, or later.
  * @see {@link https://developer.paypal.com/docs/checkout/reference/customize-sdk/#intent}
  */
-type Intent = 'sale' | 'capture' | 'authorize' | 'order';
+type Intent = 'sale' | 'capture' | 'authorize' | 'order' | 'tokenize';
 
 export type FundingSource = 'paypal' | 'credit';
 
@@ -57,6 +57,8 @@ interface PayPalCommonProps {
      */
     amount?: PaymentAmount;
 
+    configuration?: PayPalConfig;
+
     /**
      * A two-letter ISO 3166 country code which will be passed to the PayPal SDK as the buyer-country.
      * @see {@link https://developer.paypal.com/docs/checkout/reference/customize-sdk/#buyer-country}
@@ -146,7 +148,6 @@ export interface PayPalElementProps extends PayPalCommonProps, UIElementProps {
     onCancel?: (state: any, element: UIElement) => void;
     onError?: (state: any, element?: UIElement) => void;
     paymentMethods?: PaymentMethod[];
-    configuration?: PayPalConfig;
     showPayButton?: boolean;
 }