@paypal/checkout-components 5.0.289-alpha.43 → 5.0.290-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paypal/checkout-components",
-  "version": "5.0.289-alpha.43",
+  "version": "5.0.290-alpha.0",
   "description": "PayPal Checkout components, for integrating checkout products.",
   "main": "index.js",
   "scripts": {

package/src/connect/component.jsx

@@ -6,20 +6,34 @@ import {
   getClientMetadataID,
   getUserIDToken,
   getLogger,
+  getEnv,
+  loadFraudnet,
+  getCSPNonce,
 } from "@paypal/sdk-client/src";
 
 import { sendCountMetric } from "./sendCountMetric";
 
 // $FlowFixMe
-export const getConnectComponent = async (merchantProps) => {
+export const getConnectComponent = async (merchantProps = {}) => {
+  const cmid = getClientMetadataID();
+  const clientID = getClientID();
+  const userIdToken = getUserIDToken();
+  const env = getEnv();
+  const cspNonce = getCSPNonce();
+
+  const { collect } = loadFraudnet({
+    env,
+    clientMetadataID: cmid,
+    cspNonce,
+    appName: "ppcp-sdk-connect",
+    // queryStringParams = {}, // TODO: what do we need here in this case?
+  });
+
   sendCountMetric({
     name: "pp.app.paypal_sdk.connect.init.count",
     dimensions: {},
   });
 
-  const cmid = getClientMetadataID();
-  const clientID = getClientID();
-  const userIdToken = getUserIDToken();
   const { metadata } = merchantProps;
 
   let loadResult = {};
@@ -29,6 +43,7 @@ export const getConnectComponent = async (merchantProps) => {
       btSdkVersion: "3.97.3-connect-alpha.6.1",
       minified: true,
       metadata,
+      fraudnet: collect,
     });
   } catch (error) {
     sendCountMetric({

package/src/interface/button.js

@@ -33,19 +33,11 @@ import {
   getModalComponent,
   type ModalComponent,
 } from "../zoid/modal/component";
-import {
-  getHostedButtonsComponent,
-  type HostedButtonsComponent,
-} from "../hosted-buttons";
 
 export const Buttons: LazyExport<ButtonsComponent> = {
   __get__: () => getButtonsComponent(),
 };
 
-export const HostedButtons: LazyExport<HostedButtonsComponent> = {
-  __get__: () => getHostedButtonsComponent(),
-};
-
 export const Checkout: LazyProtectedExport<CheckoutComponent> = {
   __get__: () => protectedExport(getCheckoutComponent()),
 };

package/src/zoid/buttons/component.jsx

@@ -834,12 +834,6 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getExperimentation,
       },
 
-      hostedButtonId: {
-        type: "string",
-        required: false,
-        queryParam: true,
-      },
-
       displayOnly: {
         type: "array",
         queryParam: true,

package/src/hosted-buttons/index.js

@@ -1,216 +0,0 @@
-/* @flow */
-import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
-import { request, noop, memoize } from "@krakenjs/belter/src";
-import { getSDKHost, getClientID, getMerchantID } from "@paypal/sdk-client/src";
-
-import { getButtonsComponent } from "../zoid/buttons";
-
-type HostedButtonsComponentProps = {|
-  hostedButtonId: string,
-|};
-
-type GetCallbackProps = {|
-  buttonType: string,
-  hostedButtonId: string,
-  merchantId: string,
-|};
-
-type HostedButtonsInstance = {|
-  render: (string | HTMLElement) => void,
-|};
-
-type HostedButtonDetailsParams =
-  (HostedButtonsComponentProps) => ZalgoPromise<{|
-    buttonType: string,
-    html: string,
-    htmlScript: string,
-    style: {|
-      layout: string,
-      shape: string,
-      color: string,
-      label: string,
-    |},
-  |}>;
-
-type ButtonVariables = $ReadOnlyArray<{|
-  name: string,
-  value: string,
-|}>;
-
-type CreateOrder = (data: {| paymentSource: string |}) => ZalgoPromise<string>;
-
-type OnApprove = (data: {| orderID: string |}) => ZalgoPromise<void>;
-
-type CreateAccessToken = (clientID: string) => ZalgoPromise<string>;
-
-export type HostedButtonsComponent =
-  (HostedButtonsComponentProps) => HostedButtonsInstance;
-
-const entryPoint = "SDK";
-const baseUrl = `https://${getSDKHost()}`;
-
-const getHeaders = (accessToken?: string) => ({
-  ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
-  "Content-Type": "application/json",
-  "PayPal-Entry-Point": entryPoint,
-});
-
-const getButtonVariable = (variables: ButtonVariables, key: string): string =>
-  variables?.find((variable) => variable.name === key)?.value ?? "";
-
-const getFundingSource = (paymentSource) => {
-  if (paymentSource === "credit") {
-    return `PAY_WITH_PAYPAL_CREDIT`;
-  }
-  return `PAY_WITH_${paymentSource.toUpperCase()}`;
-};
-
-export const getHostedButtonDetails: HostedButtonDetailsParams = ({
-  hostedButtonId,
-}) => {
-  return request({
-    url: `${baseUrl}/ncp/api/form-fields/${hostedButtonId}`,
-    headers: getHeaders(),
-  }).then(({ body }) => {
-    const variables = body.button_details.button_variables;
-    return {
-      buttonType: getButtonVariable(variables, "button_type"),
-      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,
-    };
-  });
-};
-
-const createAccessToken = memoize<CreateAccessToken>((clientId) => {
-  return request({
-    url: `${baseUrl.replace("www", "api")}/v1/oauth2/token`,
-    method: "POST",
-    body: "grant_type=client_credentials",
-    headers: {
-      Authorization: `Basic ${btoa(clientId)}`,
-      "Content-Type": "application/json",
-    },
-  }).then((response) => response.body.access_token);
-});
-
-export const getHostedButtonCreateOrder = ({
-  buttonType,
-  hostedButtonId,
-  merchantId,
-}: GetCallbackProps): CreateOrder => {
-  return (data) => {
-    const userInputs = window.__pp_form_fields?.getUserInputs?.() || {};
-    return createAccessToken(getClientID()).then((accessToken) => {
-      return request({
-        url: `${baseUrl.replace("www", "api")}/v1/ncp/orders`,
-        headers: getHeaders(accessToken),
-        method: "POST",
-        body: JSON.stringify({
-          button_type: buttonType,
-          entry_point: entryPoint,
-          funding_source: getFundingSource(data.paymentSource),
-          hosted_button_id: hostedButtonId,
-          merchant_id: merchantId,
-          ...userInputs,
-        }),
-      }).then(({ body }) => body.order_id);
-    });
-  };
-};
-
-export const getHostedButtonOnApprove = ({
-  buttonType,
-  hostedButtonId,
-  merchantId,
-}: GetCallbackProps): OnApprove => {
-  return (data) => {
-    return createAccessToken(getClientID()).then((accessToken) => {
-      return request({
-        url: `${baseUrl.replace("www", "api")}/v1/ncp/orders/${
-          data.orderID
-        }/capture`,
-        headers: getHeaders(accessToken),
-        method: "POST",
-        body: JSON.stringify({
-          button_type: buttonType,
-          entry_point: entryPoint,
-          hosted_button_id: hostedButtonId,
-          merchant_id: merchantId,
-          id: data.orderID,
-        }),
-      }).then(noop);
-    });
-  };
-};
-
-/**
- * Attaches form fields (html) to the given selector, and
- * initializes window.__pp_form_fields (htmlScript).
- */
-const renderForm = ({ html, htmlScript, selector }) => {
-  const elm =
-    typeof selector === "string" ? document.querySelector(selector) : selector;
-  if (elm) {
-    elm.innerHTML = html + htmlScript;
-    const newScriptEl = document.createElement("script");
-    const oldScriptEl = elm.querySelector("script");
-    newScriptEl.innerHTML = oldScriptEl?.innerHTML ?? "";
-    oldScriptEl?.parentNode?.replaceChild(newScriptEl, oldScriptEl);
-  }
-};
-
-export const getHostedButtonsComponent = (): HostedButtonsComponent => {
-  function HostedButtons({
-    hostedButtonId,
-  }: HostedButtonsComponentProps): HostedButtonsInstance {
-    const Buttons = getButtonsComponent();
-    const render = (selector) => {
-      // The SDK supports mutiple merchant IDs, but hosted buttons only
-      // have one merchant id as a query parameter to the SDK script.
-      // https://github.com/paypal/paypal-sdk-client/blob/c58e35f8f7adbab76523eb25b9c10543449d2d29/src/script.js#L144
-      const merchantId = getMerchantID()[0];
-
-      getHostedButtonDetails({ hostedButtonId }).then(
-        ({ buttonType, html, htmlScript, style }) => {
-          renderForm({ html, htmlScript, selector });
-
-          // $FlowFixMe
-          Buttons({
-            style,
-            hostedButtonId,
-            onInit(data, actions) {
-              // disable the button, listen for input changes,
-              // and enable the button when the form is valid
-              // using actions.disable() and actions.enable()
-              window.__pp_form_fields?.onInit?.(data, actions);
-            },
-            onClick(data, actions) {
-              // render form errors, if present
-              window.__pp_form_fields?.onClick?.(data, actions);
-            },
-            createOrder: getHostedButtonCreateOrder({
-              buttonType,
-              hostedButtonId,
-              merchantId,
-            }),
-            onApprove: getHostedButtonOnApprove({
-              buttonType,
-              hostedButtonId,
-              merchantId,
-            }),
-          }).render(selector);
-        }
-      );
-    };
-    return {
-      render,
-    };
-  }
-  return HostedButtons;
-};

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

@@ -1,149 +0,0 @@
-/* @flow */
-
-import { describe, test, expect, vi } from "vitest";
-import { request } from "@krakenjs/belter/src";
-import { ZalgoPromise } from "@krakenjs/zalgo-promise";
-
-import { getButtonsComponent } from "../zoid/buttons";
-
-import {
-  getHostedButtonDetails,
-  getHostedButtonCreateOrder,
-  getHostedButtonOnApprove,
-  getHostedButtonsComponent,
-} from ".";
-
-vi.mock("@krakenjs/belter/src", async () => {
-  return {
-    ...(await vi.importActual("@krakenjs/belter/src")),
-    request: vi.fn(),
-  };
-});
-
-vi.mock("@paypal/sdk-client/src", async () => {
-  return {
-    ...(await vi.importActual("@paypal/sdk-client/src")),
-    getSDKHost: () => "example.com",
-    getClientID: () => "client_id_123",
-    getMerchantID: () => ["merchant_id_123"],
-  };
-});
-
-vi.mock("../zoid/buttons", async () => {
-  return {
-    ...(await vi.importActual("../zoid/buttons")),
-    getButtonsComponent: vi.fn(),
-  };
-});
-
-const getHostedButtonDetailsResponse = {
-  body: {
-    button_details: {
-      button_variables: [
-        {
-          name: "business",
-          value: "M1234567890",
-        },
-        {
-          name: "shape",
-          value: "rect",
-        },
-        {
-          name: "layout",
-          value: "vertical",
-        },
-        {
-          name: "color",
-          value: "gold",
-        },
-        {
-          name: "button_text",
-          value: "paypal",
-        },
-      ],
-    },
-  },
-};
-
-describe("HostedButtons", () => {
-  test("paypal.Buttons calls getHostedButtonDetails and invokes v5 of the SDK", () => {
-    const Buttons = vi.fn(() => ({ render: vi.fn() }));
-    // $FlowIssue
-    getButtonsComponent.mockImplementationOnce(() => Buttons);
-    const HostedButtons = getHostedButtonsComponent();
-    // $FlowIssue
-    request.mockImplementationOnce(() =>
-      ZalgoPromise.resolve(getHostedButtonDetailsResponse)
-    );
-    HostedButtons({
-      hostedButtonId: "B1234567890",
-    }).render("#example");
-    expect(Buttons).toHaveBeenCalled();
-    expect.assertions(1);
-  });
-
-  test("getHostedButtonDetails", async () => {
-    // $FlowIssue
-    request.mockImplementationOnce(() =>
-      ZalgoPromise.resolve(getHostedButtonDetailsResponse)
-    );
-    await getHostedButtonDetails({
-      hostedButtonId: "B1234567890",
-    }).then(({ style }) => {
-      expect(style).toEqual({
-        layout: "vertical",
-        shape: "rect",
-        color: "gold",
-        label: "paypal",
-      });
-    });
-    expect.assertions(1);
-  });
-
-  test("getHostedButtonCreateOrder", async () => {
-    const createOrder = getHostedButtonCreateOrder({
-      buttonType: "FIXED_PRICE",
-      hostedButtonId: "B1234567890",
-      merchantId: "M1234567890",
-    });
-
-    // $FlowIssue
-    request.mockImplementation(() =>
-      ZalgoPromise.resolve({
-        body: {
-          hosted_button_id: "B1234567890",
-          merchant_id: "M1234567890",
-          order_id: "EC-1234567890",
-          status: "PAYER_ACTION_REQUIRED",
-        },
-      })
-    );
-    const orderID = await createOrder({ paymentSource: "paypal" });
-    expect(orderID).toBe("EC-1234567890");
-    expect.assertions(1);
-  });
-
-  test("getHostedButtonOnApprove", async () => {
-    const onApprove = getHostedButtonOnApprove({
-      buttonType: "FIXED_PRICE",
-      hostedButtonId: "B1234567890",
-      merchantId: "M1234567890",
-    });
-
-    // $FlowIssue
-    request.mockImplementation(() => ZalgoPromise.resolve({}));
-    await onApprove({ orderID: "EC-1234567890" });
-    expect(request).toHaveBeenCalledWith(
-      expect.objectContaining({
-        body: JSON.stringify({
-          button_type: "FIXED_PRICE",
-          entry_point: "SDK",
-          hosted_button_id: "B1234567890",
-          id: "EC-1234567890",
-          merchant_id: "M1234567890",
-        }),
-      })
-    );
-    expect.assertions(1);
-  });
-});