@paypal/checkout-components 5.0.298 → 5.0.299

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.298",
+  "version": "5.0.299",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {
@@ -29,7 +29,7 @@
     "release": "./scripts/publish.sh",
     "start": "npm run webpack -- --progress --watch",
     "test": "npm run format:check && npm run test:unit && npm run jest-ssr && npm run karma",
-    "test:unit": "vitest run",
+    "test:unit": "vitest run --coverage",
     "percy-screenshot": "npx playwright install && babel-node ./test/percy/server/createButtonConfigs.js && percy exec -- playwright test --config=./test/percy/playwright.config.js --reporter=dot --pass-with-no-tests",
     "typecheck": "npm run flow-typed && npm run flow",
     "version": "./scripts/version.sh",
@@ -74,6 +74,7 @@
     "@percy/cli": "1.27.2",
     "@percy/playwright": "^1.0.4",
     "@playwright/test": "^1.38.1",
+    "@vitest/coverage-v8": "^1.3.1",
     "babel-core": "^7.0.0-bridge.0",
     "bundlemon": "^1.1.0",
     "conventional-changelog-cli": "^2.0.34",
@@ -99,7 +100,7 @@
     "puppeteer": "^1.20.0",
     "serve": "^14.0.0",
     "vite": "^3.2.4",
-    "vitest": "^0.25.3"
+    "vitest": "^1.3.1"
   },
   "dependencies": {
     "@krakenjs/beaver-logger": "^5.7.0",

package/src/connect/interface.js

@@ -1,14 +1,10 @@
 /* @flow */
-/* eslint-disable eslint-comments/disable-enable-pair */
-/* eslint-disable no-restricted-globals, promise/no-native */
 
-import { memoize, type Memoized } from "@krakenjs/belter/src";
+import { memoize } from "@krakenjs/belter/src";
 
 import { getConnectComponent } from "./component";
 
 type MerchantProps = {||};
-// This needs to be typed, this is coming from the fastlane team i believe
-type FastlaneExternalComponent = {||};
 
 type ConnectComponent = (merchantProps: MerchantProps) => ConnectComponent;
 // $FlowFixMe
@@ -18,7 +14,8 @@ export const Connect: (merchantProps: MerchantProps) => ConnectComponent =
     return await getConnectComponent(merchantProps);
   });
 
-export const Fastlane = (
-  merchantProps: MerchantProps
-): Memoized<() => Promise<FastlaneExternalComponent>> =>
-  memoize(() => getConnectComponent(merchantProps));
+export const Fastlane: (merchantProps: MerchantProps) => ConnectComponent =
+  memoize(async (merchantProps: MerchantProps): ConnectComponent => {
+    // $FlowFixMe
+    return await getConnectComponent(merchantProps);
+  });

package/src/hosted-buttons/index.js

@@ -17,38 +17,40 @@ import type {
 
 export const getHostedButtonsComponent = (): HostedButtonsComponent => {
   function HostedButtons({
+    enableDPoP = false,
     hostedButtonId,
   }: HostedButtonsComponentProps): HostedButtonsInstance {
     const Buttons = getButtonsComponent();
-    const render = (selector) => {
+    const render = async (selector) => {
       const merchantId = getMerchantID();
+      const { html, htmlScript, style } = await getHostedButtonDetails({
+        hostedButtonId,
+      });
 
-      getHostedButtonDetails({ hostedButtonId }).then(
-        ({ html, htmlScript, style }) => {
-          const { onInit, onClick } = renderForm({
-            hostedButtonId,
-            html,
-            htmlScript,
-            selector,
-          });
+      const { onInit, onClick } = renderForm({
+        hostedButtonId,
+        html,
+        htmlScript,
+        selector,
+      });
 
-          // $FlowFixMe
-          Buttons({
-            hostedButtonId,
-            style,
-            onInit,
-            onClick,
-            createOrder: buildHostedButtonCreateOrder({
-              hostedButtonId,
-              merchantId,
-            }),
-            onApprove: buildHostedButtonOnApprove({
-              hostedButtonId,
-              merchantId,
-            }),
-          }).render(selector);
-        }
-      );
+      // $FlowFixMe
+      Buttons({
+        hostedButtonId,
+        style,
+        onInit,
+        onClick,
+        createOrder: buildHostedButtonCreateOrder({
+          enableDPoP,
+          hostedButtonId,
+          merchantId,
+        }),
+        onApprove: buildHostedButtonOnApprove({
+          enableDPoP,
+          hostedButtonId,
+          merchantId,
+        }),
+      }).render(selector);
     };
     return {
       render,

package/src/hosted-buttons/index.test.js

@@ -1,8 +1,8 @@
 /* @flow */
+/* eslint-disable no-restricted-globals, promise/no-native */
 
 import { describe, test, expect, vi } from "vitest";
 import { request } from "@krakenjs/belter/src";
-import { ZalgoPromise } from "@krakenjs/zalgo-promise";
 
 import { getButtonsComponent } from "../zoid/buttons";
 
@@ -61,16 +61,17 @@ const getHostedButtonDetailsResponse = {
 };
 
 describe("HostedButtons", () => {
-  test("paypal.Buttons calls getHostedButtonDetails and invokes v5 of the SDK", () => {
+  test("paypal.Buttons calls getHostedButtonDetails and invokes v5 of the SDK", async () => {
     const Buttons = vi.fn(() => ({ render: vi.fn() }));
     // $FlowIssue
     getButtonsComponent.mockImplementationOnce(() => Buttons);
     const HostedButtons = getHostedButtonsComponent();
     // $FlowIssue
     request.mockImplementationOnce(() =>
-      ZalgoPromise.resolve(getHostedButtonDetailsResponse)
+      // eslint-disable-next-line compat/compat
+      Promise.resolve(getHostedButtonDetailsResponse)
     );
-    HostedButtons({
+    await HostedButtons({
       hostedButtonId: "B1234567890",
     }).render("#example");
     expect(Buttons).toHaveBeenCalledWith(
@@ -81,3 +82,5 @@ describe("HostedButtons", () => {
     expect.assertions(1);
   });
 });
+
+/* eslint-enable no-restricted-globals, promise/no-native */

package/src/hosted-buttons/types.js

@@ -1,22 +1,22 @@
 /* @flow */
-
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+/* eslint-disable no-restricted-globals, promise/no-native */
 
 export type HostedButtonsComponentProps = {|
   hostedButtonId: string,
 |};
 
 export type GetCallbackProps = {|
+  enableDPoP?: boolean,
   hostedButtonId: string,
   merchantId?: string,
 |};
 
 export type HostedButtonsInstance = {|
-  render: (string | HTMLElement) => void,
+  render: (string | HTMLElement) => Promise<void>,
 |};
 
 export type HostedButtonDetailsParams =
-  (HostedButtonsComponentProps) => ZalgoPromise<{|
+  (HostedButtonsComponentProps) => Promise<{|
     html: string,
     htmlScript: string,
     style: {|
@@ -34,14 +34,17 @@ export type ButtonVariables = $ReadOnlyArray<{|
 
 export type CreateOrder = (data: {|
   paymentSource: string,
-|}) => ZalgoPromise<string | void>;
+|}) => Promise<string | void>;
 
 export type OnApprove = (data: {|
   orderID: string,
   paymentSource: string,
-|}) => ZalgoPromise<mixed>;
+|}) => Promise<mixed>;
 
-export type CreateAccessToken = (clientID: string) => ZalgoPromise<string>;
+export type CreateAccessToken = ({|
+  clientId: string,
+  enableDPoP?: boolean,
+|}) => Promise<{| accessToken: string, nonce: string |}>;
 
 export type HostedButtonsComponent =
   (HostedButtonsComponentProps) => HostedButtonsInstance;
@@ -55,3 +58,5 @@ export type RenderForm = ({|
   onInit: (data: mixed, actions: mixed) => void,
   onClick: (data: mixed, actions: mixed) => void,
 |};
+
+/* eslint-enable no-restricted-globals, promise/no-native */

package/src/hosted-buttons/utils.js

@@ -2,6 +2,7 @@
 
 import { request, memoize } from "@krakenjs/belter/src";
 import {
+  buildDPoPHeaders,
   getSDKHost,
   getClientID,
   getMerchantID as getSDKMerchantID,
@@ -39,41 +40,60 @@ export const getMerchantID = (): string | void => {
 };
 
 export const createAccessToken: CreateAccessToken = memoize<CreateAccessToken>(
-  (clientId) => {
-    return request({
-      url: `${apiUrl}/v1/oauth2/token`,
-      method: "POST",
+  async ({ clientId, enableDPoP }) => {
+    const url = `${apiUrl}/v1/oauth2/token`;
+    const method = "POST";
+    const DPoPHeaders = enableDPoP
+      ? await buildDPoPHeaders({
+          uri: url,
+          method,
+        })
+      : {};
+    const response = await request({
+      url,
+      method,
       body: "grant_type=client_credentials",
+      // $FlowIssue optional properties are not compatible with [key: string]: string
       headers: {
         Authorization: `Basic ${btoa(clientId)}`,
         "Content-Type": "application/json",
+        // $FlowIssue exponential-spread
+        ...DPoPHeaders,
       },
-    }).then((response) => response.body.access_token);
+    });
+    // $FlowIssue request returns ZalgoPromise
+    const { access_token: accessToken, nonce } = response.body;
+    return {
+      accessToken,
+      nonce,
+    };
   }
 );
 
 const getButtonVariable = (variables: ButtonVariables, key: string): string =>
   variables?.find((variable) => variable.name === key)?.value ?? "";
 
-export const getHostedButtonDetails: HostedButtonDetailsParams = ({
+export const getHostedButtonDetails: HostedButtonDetailsParams = async ({
   hostedButtonId,
 }) => {
-  return request({
+  const response = await request({
     url: `${baseUrl}/ncp/api/form-fields/${hostedButtonId}`,
     headers: getHeaders(),
-  }).then(({ body }) => {
-    const variables = body.button_details.link_variables;
-    return {
-      style: {
-        layout: getButtonVariable(variables, "layout"),
-        shape: getButtonVariable(variables, "shape"),
-        color: getButtonVariable(variables, "color"),
-        label: getButtonVariable(variables, "button_text"),
-      },
-      html: body.html,
-      htmlScript: body.html_script,
-    };
   });
+
+  // $FlowIssue request returns ZalgoPromise
+  const { body } = response;
+  const variables = body.button_details.link_variables;
+  return {
+    style: {
+      layout: getButtonVariable(variables, "layout"),
+      shape: getButtonVariable(variables, "shape"),
+      color: getButtonVariable(variables, "color"),
+      label: getButtonVariable(variables, "button_text"),
+    },
+    html: body.html,
+    htmlScript: body.html_script,
+  };
 };
 
 /**
@@ -106,47 +126,88 @@ export const renderForm: RenderForm = ({
 };
 
 export const buildHostedButtonCreateOrder = ({
+  enableDPoP,
   hostedButtonId,
   merchantId,
 }: GetCallbackProps): CreateOrder => {
-  return (data) => {
+  return async (data) => {
     const userInputs =
       window[`__pp_form_fields_${hostedButtonId}`]?.getUserInputs?.() || {};
     const onError = window[`__pp_form_fields_${hostedButtonId}`]?.onError;
-    return createAccessToken(getClientID()).then((accessToken) => {
-      return request({
-        url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/create-context`,
-        headers: getHeaders(accessToken),
-        method: "POST",
+    const { accessToken, nonce } = await createAccessToken({
+      clientId: getClientID(),
+      enableDPoP,
+    });
+    try {
+      const url = `${apiUrl}/v1/checkout/links/${hostedButtonId}/create-context`;
+      const method = "POST";
+      const DPoPHeaders = enableDPoP
+        ? await buildDPoPHeaders({
+            uri: url,
+            method,
+            accessToken,
+            nonce,
+          })
+        : {};
+      const response = await request({
+        url,
+        // $FlowIssue optional properties are not compatible with [key: string]: string
+        headers: {
+          ...getHeaders(accessToken),
+          // $FlowIssue exponential-spread
+          ...DPoPHeaders,
+        },
+        method,
         body: JSON.stringify({
           entry_point: entryPoint,
           funding_source: data.paymentSource.toUpperCase(),
           merchant_id: merchantId,
           ...userInputs,
         }),
-      })
-        .then(({ body }) => body.context_id || onError(body.name))
-        .catch(() => onError("REQUEST_FAILED"));
-    });
+      });
+      // $FlowIssue request returns ZalgoPromise
+      const { body } = response;
+      return body.context_id || onError(body.name);
+    } catch (e) {
+      return onError("REQUEST_FAILED");
+    }
   };
 };
 
 export const buildHostedButtonOnApprove = ({
+  enableDPoP,
   hostedButtonId,
   merchantId,
 }: GetCallbackProps): OnApprove => {
-  return (data) => {
-    return createAccessToken(getClientID()).then((accessToken) => {
-      return request({
-        url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/pay`,
-        headers: getHeaders(accessToken),
-        method: "POST",
-        body: JSON.stringify({
-          entry_point: entryPoint,
-          merchant_id: merchantId,
-          context_id: data.orderID,
-        }),
-      });
+  return async (data) => {
+    const { accessToken, nonce } = await createAccessToken({
+      clientId: getClientID(),
+      enableDPoP,
+    });
+    const url = `${apiUrl}/v1/checkout/links/${hostedButtonId}/pay`;
+    const method = "POST";
+    const DPoPHeaders = enableDPoP
+      ? await buildDPoPHeaders({
+          uri: url,
+          method,
+          accessToken,
+          nonce,
+        })
+      : {};
+    return request({
+      url,
+      // $FlowIssue optional properties are not compatible with [key: string]: string
+      headers: {
+        ...getHeaders(accessToken),
+        // $FlowIssue exponential-spread
+        ...DPoPHeaders,
+      },
+      method,
+      body: JSON.stringify({
+        entry_point: entryPoint,
+        merchant_id: merchantId,
+        context_id: data.orderID,
+      }),
     });
   };
 };

package/src/hosted-buttons/utils.test.js

@@ -1,12 +1,12 @@
 /* @flow */
-
+/* eslint-disable no-restricted-globals, promise/no-native */
 import { test, expect, vi } from "vitest";
 import { request } from "@krakenjs/belter/src";
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 
 import {
   buildHostedButtonCreateOrder,
   buildHostedButtonOnApprove,
+  createAccessToken,
   getHostedButtonDetails,
 } from "./utils";
 
@@ -26,9 +26,11 @@ vi.mock("@paypal/sdk-client/src", async () => {
   };
 });
 
+const accessToken = "AT1234567890";
 const hostedButtonId = "B1234567890";
 const merchantId = "M1234567890";
 const orderID = "EC-1234567890";
+const clientId = "C1234567890";
 
 const getHostedButtonDetailsResponse = {
   body: {
@@ -59,10 +61,19 @@ const getHostedButtonDetailsResponse = {
   },
 };
 
+const mockCreateAccessTokenRequest = () =>
+  // eslint-disable-next-line compat/compat
+  Promise.resolve({
+    body: {
+      access_token: accessToken,
+    },
+  });
+
 test("getHostedButtonDetails", async () => {
   // $FlowIssue
   request.mockImplementationOnce(() =>
-    ZalgoPromise.resolve(getHostedButtonDetailsResponse)
+    // eslint-disable-next-line compat/compat
+    Promise.resolve(getHostedButtonDetailsResponse)
   );
   await getHostedButtonDetails({
     hostedButtonId,
@@ -77,25 +88,100 @@ test("getHostedButtonDetails", async () => {
   expect.assertions(1);
 });
 
+describe("createAccessToken", () => {
+  test("basic functionality", async () => {
+    request
+      // $FlowIssue
+      .mockImplementationOnce(mockCreateAccessTokenRequest);
+    await createAccessToken({ clientId });
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: expect.stringContaining("Basic "),
+        }),
+      })
+    );
+    expect.assertions(1);
+  });
+  test("with DPoP enabled", async () => {
+    request
+      // $FlowIssue
+      .mockImplementationOnce(mockCreateAccessTokenRequest);
+    await createAccessToken({ clientId, enableDPoP: true });
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: expect.stringContaining("Basic "),
+          DPoP: expect.any(String),
+        }),
+      })
+    );
+    expect.assertions(1);
+  });
+});
+
 test("buildHostedButtonCreateOrder", async () => {
   const createOrder = buildHostedButtonCreateOrder({
     hostedButtonId,
     merchantId,
   });
 
-  // $FlowIssue
-  request.mockImplementation(() =>
-    ZalgoPromise.resolve({
-      body: {
-        link_id: hostedButtonId,
-        merchant_id: merchantId,
-        context_id: orderID,
-        status: "CREATED",
-      },
+  request
+    // $FlowIssue
+    .mockImplementationOnce(mockCreateAccessTokenRequest)
+    .mockImplementation(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
+        body: {
+          link_id: hostedButtonId,
+          merchant_id: merchantId,
+          context_id: orderID,
+          status: "CREATED",
+        },
+      })
+    );
+  const createdOrderID = await createOrder({ paymentSource: "paypal" });
+  expect(request).toHaveBeenCalledWith(
+    expect.objectContaining({
+      headers: expect.objectContaining({
+        Authorization: `Bearer ${accessToken}`,
+      }),
     })
   );
-  const createdOrderID = await createOrder({ paymentSource: "paypal" });
   expect(createdOrderID).toBe(orderID);
+  expect.assertions(2);
+});
+
+test("buildHostedButtonCreateOrder with DPoP enabled", async () => {
+  const createOrder = buildHostedButtonCreateOrder({
+    enableDPoP: true,
+    hostedButtonId,
+    merchantId,
+  });
+
+  request
+    // $FlowIssue
+    .mockImplementationOnce(mockCreateAccessTokenRequest)
+    .mockImplementation(() =>
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
+        body: {
+          link_id: hostedButtonId,
+          merchant_id: merchantId,
+          context_id: orderID,
+          status: "CREATED",
+        },
+      })
+    );
+  await createOrder({ paymentSource: "paypal" });
+  expect(request).toHaveBeenCalledWith(
+    expect.objectContaining({
+      headers: expect.objectContaining({
+        Authorization: `DPoP ${accessToken}`,
+        DPoP: expect.any(String),
+      }),
+    })
+  );
   expect.assertions(1);
 });
 
@@ -107,7 +193,8 @@ test("buildHostedButtonCreateOrder error handling", async () => {
 
   // $FlowIssue
   request.mockImplementation(() =>
-    ZalgoPromise.resolve({
+    // eslint-disable-next-line compat/compat
+    Promise.resolve({
       body: {
         name: "RESOURCE_NOT_FOUND",
       },
@@ -133,7 +220,8 @@ describe("buildHostedButtonOnApprove", () => {
 
     // $FlowIssue
     request.mockImplementation(() =>
-      ZalgoPromise.resolve({
+      // eslint-disable-next-line compat/compat
+      Promise.resolve({
         body: {},
       })
     );
@@ -149,4 +237,33 @@ describe("buildHostedButtonOnApprove", () => {
     );
     expect.assertions(1);
   });
+
+  test("with DPoP enabled", async () => {
+    const onApprove = buildHostedButtonOnApprove({
+      enableDPoP: true,
+      hostedButtonId,
+      merchantId,
+    });
+    request
+      // $FlowIssue
+      .mockImplementationOnce(mockCreateAccessTokenRequest)
+      .mockImplementation(() =>
+        // eslint-disable-next-line compat/compat
+        Promise.resolve({
+          body: {},
+        })
+      );
+    await onApprove({ orderID, paymentSource: "paypal" });
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        headers: expect.objectContaining({
+          Authorization: `DPoP ${accessToken}`,
+          DPoP: expect.any(String),
+        }),
+      })
+    );
+    expect.assertions(1);
+  });
 });
+
+/* eslint-enable no-restricted-globals, promise/no-native */