From 6e60d24f48e0b088f935f418a9c95a1bac25ccaa Mon Sep 17 00:00:00 2001
From: Guilherme Ribeiro <guilhermemrr@gmail.com>
Date: Fri, 16 Jun 2023 10:21:09 +0200
Subject: [PATCH] PayPal - Adding isExpress flag (#2220)

---
 .changeset/strong-snakes-attack.md                 | 5 +++++
 packages/lib/src/components/PayPal/Paypal.test.ts  | 5 +++++
 packages/lib/src/components/PayPal/Paypal.tsx      | 4 +++-
 packages/lib/src/components/PayPal/defaultProps.ts | 2 ++
 packages/lib/src/components/PayPal/types.ts        | 6 ++++++
 5 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/strong-snakes-attack.md

diff --git a/.changeset/strong-snakes-attack.md b/.changeset/strong-snakes-attack.md
new file mode 100644
index 00000000..00169061
--- /dev/null
+++ b/.changeset/strong-snakes-attack.md
@@ -0,0 +1,5 @@
+---
+'@adyen/adyen-web': minor
+---
+
+Added isExpress configuration to PayPal component
diff --git a/packages/lib/src/components/PayPal/Paypal.test.ts b/packages/lib/src/components/PayPal/Paypal.test.ts
index 67f4f2eb..185be59e 100644
--- a/packages/lib/src/components/PayPal/Paypal.test.ts
+++ b/packages/lib/src/components/PayPal/Paypal.test.ts
@@ -6,6 +6,11 @@ describe('Paypal', () => {
         expect(paypal.data).toEqual({ clientStateDataIndicator: true, paymentMethod: { subtype: 'sdk', type: 'paypal' } });
     });
 
+    test('should return subtype express if isExpress flag is set', () => {
+        const paypal = new Paypal({ isExpress: true });
+        expect(paypal.data).toEqual({ clientStateDataIndicator: true, paymentMethod: { subtype: 'express', type: 'paypal' } });
+    });
+
     test('Is always valid', () => {
         const paypal = new Paypal({});
         expect(paypal.isValid).toBe(true);
diff --git a/packages/lib/src/components/PayPal/Paypal.tsx b/packages/lib/src/components/PayPal/Paypal.tsx
index 66c2e12d..0c4e8080 100644
--- a/packages/lib/src/components/PayPal/Paypal.tsx
+++ b/packages/lib/src/components/PayPal/Paypal.tsx
@@ -49,10 +49,12 @@ class PaypalElement extends UIElement<PayPalElementProps> {
      * Formats the component data output
      */
     protected formatData() {
+        const { isExpress } = this.props;
+
         return {
             paymentMethod: {
                 type: PaypalElement.type,
-                subtype: PaypalElement.subtype
+                subtype: isExpress ? 'express' : PaypalElement.subtype
             }
         };
     }
diff --git a/packages/lib/src/components/PayPal/defaultProps.ts b/packages/lib/src/components/PayPal/defaultProps.ts
index fcd40e8b..9cb71b64 100644
--- a/packages/lib/src/components/PayPal/defaultProps.ts
+++ b/packages/lib/src/components/PayPal/defaultProps.ts
@@ -49,6 +49,8 @@ const defaultProps: PayPalElementProps = {
 
     blockPayPalVenmoButton: false,
 
+    isExpress: 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
index 86508957..65f2e96a 100644
--- a/packages/lib/src/components/PayPal/types.ts
+++ b/packages/lib/src/components/PayPal/types.ts
@@ -149,6 +149,12 @@ interface PayPalCommonProps {
      * @see {@link https://developer.paypal.com/docs/business/javascript-sdk/javascript-sdk-reference/#onshippingchange}
      */
     onShippingChange?: (data, actions) => void;
+
+    /**
+     *  Identifies if the payment is Express.
+     *  @defaultValue false
+     */
+    isExpress?: boolean;
 }
 
 export interface PayPalConfig {