@paypal/checkout-components 5.0.287-alpha.0 → 5.0.287-alpha.11

package/__sdk__.js

@@ -52,10 +52,6 @@ module.exports = {
     fundingSources: SMART_FUNDING_SOURCES,
     cards: SMART_CARDS,
   },
-  "hosted-buttons": {
-    entry: "./src/interface/hosted-button",
-    globals,
-  },
   marks: {
     entry: "./src/interface/marks",
     globals,

package/package.json

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

package/src/hosted-buttons/index.js

@@ -1,22 +1,128 @@
 /* @flow */
+import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
+import { request, noop } from "@krakenjs/belter/src";
+import { getSDKHost } from "@paypal/sdk-client/src";
+
 import { getButtonsComponent } from "../zoid/buttons";
 
+type HostedButtonsProps = {|
+  hostedButtonId: string,
+  merchantId?: string,
+|};
+
 type HostedButtonsInstance = {|
   render: (string | HTMLElement) => void,
 |};
 
-type HostedButtonsProps = {|
-  hostedButtonId?: string,
-|};
+type HostedButtonDetailsParams = (HostedButtonsProps) => ZalgoPromise<{|
+  merchantId: string,
+  style: {|
+    layout: string,
+    shape: string,
+    color: string,
+    label: string,
+  |},
+|}>;
+
+type ButtonVariables = $ReadOnlyArray<{|
+  name: string,
+  value: string,
+|}>;
+
+type CreateOrder = () => ZalgoPromise<string>;
+
+type OnApprove = (data: {| orderID: string |}) => ZalgoPromise<void>;
 
 export type HostedButtonsComponent =
   (HostedButtonsProps) => HostedButtonsInstance;
 
+const headers = {
+  "PayPal-Entry-Point": "SDK",
+  "Content-Type": "application/json",
+};
+
+const apiUrl = `https://${getSDKHost()}/v1/ncp`;
+
+const getButtonVariable = (variables: ButtonVariables, key: string): string =>
+  variables.find((variable) => variable.name === key)?.value ?? "";
+
+export const getHostedButtonDetails: HostedButtonDetailsParams = ({
+  hostedButtonId,
+}) => {
+  return request({
+    url: `${apiUrl}/button/${hostedButtonId}`,
+    headers,
+  }).then(({ body }) => {
+    return {
+      merchantId: getButtonVariable(body.button_variables, "business"),
+      style: {
+        layout: getButtonVariable(body.button_variables, "layout"),
+        shape: getButtonVariable(body.button_variables, "shape"),
+        color: getButtonVariable(body.button_variables, "color"),
+        label: getButtonVariable(body.button_variables, "button_text"),
+      },
+    };
+  });
+};
+
+export const getHostedButtonCreateOrder = ({
+  hostedButtonId,
+  merchantId,
+}: HostedButtonsProps): CreateOrder => {
+  return () => {
+    return request({
+      url: `${apiUrl}/orders`,
+      headers,
+      method: "POST",
+      body: JSON.stringify({
+        hosted_button_id: hostedButtonId,
+        merchant_id: merchantId,
+      }),
+    }).then(({ body }) => body.order_id);
+  };
+};
+
+export const getHostedButtonOnApprove = ({
+  hostedButtonId,
+  merchantId,
+}: HostedButtonsProps): OnApprove => {
+  return (data) => {
+    return request({
+      url: `${apiUrl}/orders/${data.orderID}/capture`,
+      headers,
+      method: "POST",
+      body: JSON.stringify({
+        hosted_button_id: hostedButtonId,
+        id: data.orderID,
+        merchant_id: merchantId,
+      }),
+    }).then(noop);
+  };
+};
+
 export const getHostedButtonsComponent = (): HostedButtonsComponent => {
-  function HostedButtons(): HostedButtonsInstance {
+  function HostedButtons({
+    hostedButtonId,
+  }: HostedButtonsProps): HostedButtonsInstance {
     const Buttons = getButtonsComponent();
     const render = (selector) => {
-      Buttons().render(selector);
+      getHostedButtonDetails({ hostedButtonId }).then(
+        ({ merchantId, style }) => {
+          // $FlowFixMe
+          Buttons({
+            style,
+            hostedButtonId,
+            createOrder: getHostedButtonCreateOrder({
+              hostedButtonId,
+              merchantId,
+            }),
+            onApprove: getHostedButtonOnApprove({
+              hostedButtonId,
+              merchantId,
+            }),
+          }).render(selector);
+        }
+      );
     };
     return {
       render,

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

@@ -0,0 +1,142 @@
+/* @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",
+  };
+});
+
+vi.mock("../zoid/buttons", async () => {
+  return {
+    ...(await vi.importActual("../zoid/buttons")),
+    getButtonsComponent: vi.fn(),
+  };
+});
+
+const getHostedButtonDetailsResponse = {
+  body: {
+    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();
+    // $FlowIssue
+    getButtonsComponent.mockImplementationOnce(() => Buttons);
+    const HostedButtons = getHostedButtonsComponent();
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      ZalgoPromise.resolve(getHostedButtonDetailsResponse)
+    );
+    HostedButtons({
+      hostedButtonId: "B1234567890",
+    }).render("");
+    expect(Buttons).toHaveBeenCalled();
+    expect.assertions(1);
+  });
+
+  test("getHostedButtonDetails", async () => {
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      ZalgoPromise.resolve(getHostedButtonDetailsResponse)
+    );
+    await getHostedButtonDetails({
+      hostedButtonId: "B1234567890",
+    }).then(({ merchantId, style }) => {
+      expect(merchantId).toBe("M1234567890");
+      expect(style).toEqual({
+        layout: "vertical",
+        shape: "rect",
+        color: "gold",
+        label: "paypal",
+      });
+    });
+    expect.assertions(2);
+  });
+
+  test("getHostedButtonCreateOrder", async () => {
+    const createOrder = getHostedButtonCreateOrder({
+      hostedButtonId: "B1234567890",
+      merchantId: "M1234567890",
+    });
+
+    // $FlowIssue
+    request.mockImplementationOnce(() =>
+      ZalgoPromise.resolve({
+        body: {
+          hosted_button_id: "B1234567890",
+          merchant_id: "M1234567890",
+          order_id: "EC-1234567890",
+          status: "PAYER_ACTION_REQUIRED",
+        },
+      })
+    );
+    const orderID = await createOrder();
+    expect(orderID).toBe("EC-1234567890");
+    expect.assertions(1);
+  });
+
+  test("getHostedButtonOnApprove", async () => {
+    const onApprove = getHostedButtonOnApprove({
+      hostedButtonId: "B1234567890",
+      merchantId: "M1234567890",
+    });
+
+    // $FlowIssue
+    request.mockImplementationOnce(() => ZalgoPromise.resolve({}));
+    await onApprove({ orderID: "EC-1234567890" });
+    expect(request).toHaveBeenCalledWith(
+      expect.objectContaining({
+        body: JSON.stringify({
+          hosted_button_id: "B1234567890",
+          id: "EC-1234567890",
+          merchant_id: "M1234567890",
+        }),
+      })
+    );
+    expect.assertions(1);
+  });
+});

package/src/interface/button.js

@@ -33,11 +33,19 @@ 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,6 +834,12 @@ export const getButtonsComponent: () => ButtonsComponent = memoize(() => {
         value: getExperimentation,
       },
 
+      hostedButtonId: {
+        type: "string",
+        required: false,
+        queryParam: true,
+      },
+
       displayOnly: {
         type: "array",
         queryParam: true,

package/src/interface/hosted-buttons.js

@@ -1,10 +0,0 @@
-/* @flow */
-import type { LazyExport } from "../types";
-import {
-  getHostedButtonsComponent,
-  type HostedButtonsComponent,
-} from "../hosted-buttons";
-
-export const HostedButtons: LazyExport<HostedButtonsComponent> = {
-  __get__: () => getHostedButtonsComponent(),
-};