@paypal/checkout-components 5.0.291 → 5.0.292-alpha.11

package/src/api/shopper-insights/validation.test.js

@@ -0,0 +1,155 @@
+/* @flow */
+import { vi, describe, expect } from "vitest";
+
+import { validateMerchantConfig, validateMerchantPayload } from "./validation";
+
+vi.mock("@paypal/sdk-client/src", () => {
+  return {
+    sendCountMetric: vi.fn(),
+  };
+});
+
+describe("shopper insights merchant SDK config validation", () => {
+  test("should throw if sdk token is not passed", () => {
+    expect(() =>
+      validateMerchantConfig({
+        sdkToken: "",
+        pageType: "",
+        userIDToken: "",
+        clientToken: "",
+      })
+    ).toThrowError(
+      "script data attribute sdk-client-token is required but was not passed"
+    );
+  });
+
+  test("should throw if page type is not passed", () => {
+    expect(() =>
+      validateMerchantConfig({
+        sdkToken: "sdk-token",
+        pageType: "",
+        userIDToken: "",
+        clientToken: "",
+      })
+    ).toThrowError(
+      "script data attribute page-type is required but was not passed"
+    );
+  });
+
+  test("should throw if ID token is passed", () => {
+    expect(() =>
+      validateMerchantConfig({
+        sdkToken: "sdk-token",
+        pageType: "product-listing",
+        userIDToken: "id-token",
+        clientToken: "",
+      })
+    ).toThrowError(
+      "use script data attribute sdk-client-token instead of user-id-token"
+    );
+  });
+});
+
+describe("shopper insights merchant payload validation", () => {
+  test("should have successful validation if email is only passed", () => {
+    expect(() =>
+      validateMerchantPayload({
+        customer: {
+          email: "email@test.com",
+        },
+      })
+    ).not.toThrowError();
+  });
+
+  test("should have successful validation if phone is only passed", () => {
+    expect(() =>
+      validateMerchantPayload({
+        customer: {
+          phone: {
+            countryCode: "1",
+            nationalNumber: "2345678901",
+          },
+        },
+      })
+    ).not.toThrowError();
+  });
+
+  test("should have successful validation if email and phone is passed", () => {
+    expect(() =>
+      validateMerchantPayload({
+        customer: {
+          email: "email@test.com",
+          phone: {
+            countryCode: "1",
+            nationalNumber: "2345678901",
+          },
+        },
+      })
+    ).not.toThrowError();
+  });
+
+  test("should throw if email or phone is not passed", () => {
+    expect(() =>
+      validateMerchantPayload({
+        customer: {},
+      })
+    ).toThrowError(
+      "Expected shopper information to include an email or phone number"
+    );
+  });
+
+  test("should throw if countryCode or nationalNumber in phone is not passed or is empty", () => {
+    expect(() =>
+      validateMerchantPayload({
+        customer: {
+          phone: {
+            nationalNumber: "",
+            countryCode: "",
+          },
+        },
+      })
+    ).toThrowError(
+      "Expected shopper information to include an email or phone number"
+    );
+
+    expect(() =>
+      validateMerchantPayload(
+        // $FlowFixMe
+        { customer: { phone: {} } }
+      )
+    ).toThrowError(
+      "Expected shopper information to include an email or phone number"
+    );
+    expect.assertions(2);
+  });
+
+  test("should throw if phone is in an invalid format", () => {
+    expect(() =>
+      validateMerchantPayload({
+        customer: { phone: { countryCode: "1", nationalNumber: "2.354" } },
+      })
+    ).toThrowError(
+      "Expected shopper information to a valid phone number format"
+    );
+    expect(() =>
+      validateMerchantPayload({
+        customer: { phone: { countryCode: "1", nationalNumber: "2-354" } },
+      })
+    ).toThrowError(
+      "Expected shopper information to a valid phone number format"
+    );
+    expect.assertions(2);
+  });
+
+  test("should throw if email is in an invalid format", () => {
+    expect(() =>
+      validateMerchantPayload({
+        customer: {
+          email: "123",
+        },
+      })
+    ).toThrowError(
+      "Expected shopper information to include a valid email format"
+    );
+  });
+});

package/src/constants/api.js

@@ -0,0 +1,29 @@
+/* @flow */
+
+export const HEADERS = {
+  AUTHORIZATION: "authorization",
+  CONTENT_TYPE: "content-type",
+  PARTNER_ATTRIBUTION_ID: "paypal-partner-attribution-id",
+  CLIENT_METADATA_ID: "paypal-client-metadata-id",
+};
+
+export const ELIGIBLE_PAYMENT_METHODS = "v2/payments/find-eligible-methods";
+
+export const FPTI_TRANSITION = {
+  SHOPPER_INSIGHTS_API_INIT: "sdk_shopper_insights_recommended_init",
+  SHOPPER_INSIGHTS_API_SUCCESS: "sdk_shopper_insights_recommended_success",
+  SHOPPER_INSIGHTS_API_ERROR: "sdk_shopper_insights_recommended_error",
+};
+
+export const SHOPPER_INSIGHTS_METRIC_NAME =
+  "pp.app.paypal_sdk.api.shopper_insights.count";
+
+export type MerchantPayloadData = {|
+  customer: {|
+    email?: string,
+    phone?: {|
+      countryCode?: string,
+      nationalNumber?: string,
+    |},
+  |},
+|};

package/src/hosted-buttons/index.js

@@ -0,0 +1,71 @@
+/* @flow */
+
+import { getMerchantID } from "@paypal/sdk-client/src";
+
+import { getButtonsComponent } from "../zoid/buttons";
+
+import {
+  buildHostedButtonCreateOrder,
+  buildHostedButtonOnApprove,
+  getHostedButtonDetails,
+  renderForm,
+} from "./utils";
+import type {
+  HostedButtonsComponent,
+  HostedButtonsComponentProps,
+  HostedButtonsInstance,
+} from "./types";
+
+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(
+        ({ 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_${hostedButtonId}`]?.onInit?.(
+                data,
+                actions
+              );
+            },
+            onClick(data, actions) {
+              // render form errors, if present
+              window[`__pp_form_fields_${hostedButtonId}`]?.onClick?.(
+                data,
+                actions
+              );
+            },
+            createOrder: buildHostedButtonCreateOrder({
+              hostedButtonId,
+              merchantId,
+            }),
+            onApprove: buildHostedButtonOnApprove({
+              hostedButtonId,
+              merchantId,
+            }),
+          }).render(selector);
+        }
+      );
+    };
+    return {
+      render,
+    };
+  }
+  return HostedButtons;
+};

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

@@ -0,0 +1,84 @@
+/* @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 { 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: {
+      link_variables: [
+        {
+          name: "shape",
+          value: "rect",
+        },
+        {
+          name: "layout",
+          value: "vertical",
+        },
+        {
+          name: "color",
+          value: "gold",
+        },
+        {
+          name: "button_text",
+          value: "paypal",
+        },
+        {
+          name: "button_type",
+          value: "FIXED_PRICE",
+        },
+      ],
+    },
+  },
+};
+
+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).toHaveBeenCalledWith(
+      expect.objectContaining({
+        hostedButtonId: "B1234567890",
+        hostedButtonType: "NO_CODE_FIXED_PRICE",
+      })
+    );
+    expect.assertions(1);
+  });
+});

package/src/hosted-buttons/types.js

@@ -0,0 +1,50 @@
+/* @flow */
+
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+
+export type HostedButtonsComponentProps = {|
+  hostedButtonId: string,
+|};
+
+export type GetCallbackProps = {|
+  hostedButtonId: string,
+  merchantId: string,
+|};
+
+export type HostedButtonsInstance = {|
+  render: (string | HTMLElement) => void,
+|};
+
+export type HostedButtonDetailsParams =
+  (HostedButtonsComponentProps) => ZalgoPromise<{|
+    html: string,
+    htmlScript: string,
+    style: {|
+      layout: string,
+      shape: string,
+      color: string,
+      label: string,
+    |},
+  |}>;
+
+export type ButtonVariables = $ReadOnlyArray<{|
+  name: string,
+  value: string,
+|}>;
+
+export type CreateOrder = (data: {|
+  paymentSource: string,
+|}) => ZalgoPromise<string>;
+
+export type OnApprove = (data: {| orderID: string |}) => ZalgoPromise<void>;
+
+export type CreateAccessToken = (clientID: string) => ZalgoPromise<string>;
+
+export type HostedButtonsComponent =
+  (HostedButtonsComponentProps) => HostedButtonsInstance;
+
+export type RenderForm = {|
+  html: string,
+  htmlScript: string,
+  selector: string | HTMLElement,
+|};

package/src/hosted-buttons/utils.js

@@ -0,0 +1,132 @@
+/* @flow */
+
+import { request, noop, memoize } from "@krakenjs/belter/src";
+import { getSDKHost, getClientID } from "@paypal/sdk-client/src";
+
+import type {
+  ButtonVariables,
+  CreateAccessToken,
+  CreateOrder,
+  GetCallbackProps,
+  HostedButtonDetailsParams,
+  OnApprove,
+  RenderForm,
+} from "./types";
+
+const entryPoint = "SDK";
+const baseUrl = `https://${getSDKHost()}`;
+const apiUrl = baseUrl.replace("www", "api");
+
+const getHeaders = (accessToken?: string) => ({
+  ...(accessToken && { Authorization: `Bearer ${accessToken}` }),
+  "Content-Type": "application/json",
+  "PayPal-Entry-Point": entryPoint,
+});
+
+export const createAccessToken: CreateAccessToken = memoize<CreateAccessToken>(
+  (clientId) => {
+    return request({
+      url: `${apiUrl}/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);
+  }
+);
+
+const getButtonVariable = (variables: ButtonVariables, key: string): string =>
+  variables?.find((variable) => variable.name === key)?.value ?? "";
+
+const getFundingSource = (paymentSource) => {
+  if (paymentSource === "credit") {
+    return `CARD`;
+  }
+  return 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.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,
+    };
+  });
+};
+
+/**
+ * Attaches form fields (html) to the given selector, and
+ * initializes window.__pp_form_fields (htmlScript).
+ */
+export const renderForm = ({
+  html,
+  htmlScript,
+  selector,
+}: RenderForm): void => {
+  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 buildHostedButtonCreateOrder = ({
+  hostedButtonId,
+  merchantId,
+}: GetCallbackProps): CreateOrder => {
+  return (data) => {
+    const userInputs =
+      window[`__pp_form_fields_${hostedButtonId}`]?.getUserInputs?.() || {};
+    return createAccessToken(getClientID()).then((accessToken) => {
+      return request({
+        url: `${apiUrl}/v1/checkout/links/${hostedButtonId}/create-context`,
+        headers: getHeaders(accessToken),
+        method: "POST",
+        body: JSON.stringify({
+          entry_point: entryPoint,
+          funding_source: getFundingSource(data.paymentSource),
+          merchant_id: merchantId,
+          ...userInputs,
+        }),
+      }).then(({ body }) => body.context_id);
+    });
+  };
+};
+
+export const buildHostedButtonOnApprove = ({
+  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,
+        }),
+      }).then(noop);
+    });
+  };
+};

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

@@ -0,0 +1,121 @@
+/* @flow */
+
+import { test, expect, vi } from "vitest";
+import { request } from "@krakenjs/belter/src";
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+
+import {
+  getHostedButtonDetails,
+  buildHostedButtonCreateOrder,
+  buildHostedButtonOnApprove,
+} from "./utils";
+
+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"],
+  };
+});
+
+const getHostedButtonDetailsResponse = {
+  body: {
+    button_details: {
+      link_variables: [
+        {
+          name: "business",
+          value: "M1234567890",
+        },
+        {
+          name: "shape",
+          value: "rect",
+        },
+        {
+          name: "layout",
+          value: "vertical",
+        },
+        {
+          name: "color",
+          value: "gold",
+        },
+        {
+          name: "button_text",
+          value: "paypal",
+        },
+      ],
+    },
+  },
+};
+
+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("buildHostedButtonCreateOrder", async () => {
+  const createOrder = buildHostedButtonCreateOrder({
+    hostedButtonId: "B1234567890",
+    merchantId: "M1234567890",
+  });
+
+  // $FlowIssue
+  request.mockImplementation(() =>
+    ZalgoPromise.resolve({
+      body: {
+        link_id: "B1234567890",
+        merchant_id: "M1234567890",
+        context_id: "EC-1234567890",
+        status: "CREATED",
+      },
+    })
+  );
+  const orderID = await createOrder({ paymentSource: "paypal" });
+  expect(orderID).toBe("EC-1234567890");
+  expect.assertions(1);
+});
+
+test("buildHostedButtonOnApprove", async () => {
+  const onApprove = buildHostedButtonOnApprove({
+    hostedButtonId: "B1234567890",
+    merchantId: "M1234567890",
+  });
+
+  // $FlowIssue
+  request.mockImplementation(() =>
+    ZalgoPromise.resolve({
+      body: {},
+    })
+  );
+  await onApprove({ orderID: "EC-1234567890" });
+  expect(request).toHaveBeenCalledWith(
+    expect.objectContaining({
+      body: JSON.stringify({
+        entry_point: "SDK",
+        merchant_id: "M1234567890",
+        context_id: "EC-1234567890",
+      }),
+    })
+  );
+  expect.assertions(1);
+});

package/src/interface/hosted-buttons.js

@@ -0,0 +1,29 @@
+/* @flow */
+
+import { getHostedButtonsComponent } from "../hosted-buttons";
+import type { HostedButtonsComponent } from "../hosted-buttons/types";
+import { getButtonsComponent } from "../zoid/buttons";
+import {
+  getCardFormComponent,
+  type CardFormComponent,
+} from "../zoid/card-form";
+import { getCheckoutComponent, type CheckoutComponent } from "../zoid/checkout";
+import type { LazyExport, LazyProtectedExport } from "../types";
+import { protectedExport } from "../lib";
+
+export const HostedButtons: LazyExport<HostedButtonsComponent> = {
+  __get__: () => getHostedButtonsComponent(),
+};
+
+export const Checkout: LazyProtectedExport<CheckoutComponent> = {
+  __get__: () => protectedExport(getCheckoutComponent()),
+};
+
+export const CardForm: LazyProtectedExport<CardFormComponent> = {
+  __get__: () => protectedExport(getCardFormComponent()),
+};
+
+export function setup() {
+  getButtonsComponent();
+  getCheckoutComponent();
+}

package/src/zoid/buttons/component.jsx

@@ -719,6 +719,16 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         },
       },
 
+      referrerDomain: {
+        type: "string",
+        required: false,
+        value: () => {
+          if (window.document.referrer) {
+            return new URL(window.document.referrer).host || undefined;
+          }
+        },
+      },
+
       userIDToken: {
         type: "string",
         default: getUserIDToken,
@@ -834,6 +844,11 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getExperimentation,
       },
 
+      hostedButtonId: {
+        type: "string",
+        required: false,
+      },
+
       displayOnly: {
         type: "array",
         queryParam: true,