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.
Adyen · Nov 25, 2021 · 56dba55 · 56dba55
1 parent 9439a4b
commit 56dba55
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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;
 }