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

package/package.json

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

package/src/hosted-buttons/index.js

@@ -1,11 +1,12 @@
 /* @flow */
 import { ZalgoPromise } from "@krakenjs/zalgo-promise/src";
 import { request, noop } from "@krakenjs/belter/src";
-import { getSDKHost } from "@paypal/sdk-client/src";
+import { getSDKHost, getClientID } from "@paypal/sdk-client/src";
 
 import { getButtonsComponent } from "../zoid/buttons";
 
 type HostedButtonsProps = {|
+  buttonType?: string,
   hostedButtonId: string,
   merchantId?: string,
 |};
@@ -15,7 +16,10 @@ type HostedButtonsInstance = {|
 |};
 
 type HostedButtonDetailsParams = (HostedButtonsProps) => ZalgoPromise<{|
+  buttonType: string,
   merchantId: string,
+  html: string,
+  htmlScript: string,
   style: {|
     layout: string,
     shape: string,
@@ -29,19 +33,21 @@ type ButtonVariables = $ReadOnlyArray<{|
   value: string,
 |}>;
 
-type CreateOrder = () => ZalgoPromise<string>;
+type CreateOrder = (data: {| paymentSource: string |}) => ZalgoPromise<string>;
 
 type OnApprove = (data: {| orderID: string |}) => ZalgoPromise<void>;
 
 export type HostedButtonsComponent =
   (HostedButtonsProps) => HostedButtonsInstance;
 
-const headers = {
+const getHeaders = () => ({
   "PayPal-Entry-Point": "SDK",
   "Content-Type": "application/json",
-};
+  Authorization: `Basic ${btoa(getClientID())}`,
+});
 
-const apiUrl = `https://${getSDKHost()}/v1/ncp`;
+const nocodeApiUrl = `https://${getSDKHost()}/ncp/api`;
+const entryPoint = "SDK";
 
 const getButtonVariable = (variables: ButtonVariables, key: string): string =>
   variables.find((variable) => variable.name === key)?.value ?? "";
@@ -50,56 +56,90 @@ export const getHostedButtonDetails: HostedButtonDetailsParams = ({
   hostedButtonId,
 }) => {
   return request({
-    url: `${apiUrl}/button/${hostedButtonId}`,
-    headers,
+    url: `${nocodeApiUrl}/form-fields/${hostedButtonId}`,
+    headers: getHeaders(),
   }).then(({ body }) => {
+    const button_details = body.button_details;
     return {
-      merchantId: getButtonVariable(body.button_variables, "business"),
+      buttonType: getButtonVariable(
+        button_details.button_variables,
+        "button_type"
+      ),
+      merchantId: getButtonVariable(
+        button_details.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"),
+        layout: getButtonVariable(button_details.button_variables, "layout"),
+        shape: getButtonVariable(button_details.button_variables, "shape"),
+        color: getButtonVariable(button_details.button_variables, "color"),
+        label: getButtonVariable(
+          button_details.button_variables,
+          "button_text"
+        ),
       },
+      html: body.html,
+      htmlScript: body.html_script,
     };
   });
 };
 
 export const getHostedButtonCreateOrder = ({
+  buttonType,
   hostedButtonId,
   merchantId,
 }: HostedButtonsProps): CreateOrder => {
-  return () => {
+  return (data) => {
+    const userInputs = window.__pp_form_fields?.getUserInputs?.() || {};
     return request({
-      url: `${apiUrl}/orders`,
-      headers,
+      url: `${nocodeApiUrl}/create-order`,
+      headers: getHeaders(),
       method: "POST",
       body: JSON.stringify({
+        button_type: buttonType,
         hosted_button_id: hostedButtonId,
         merchant_id: merchantId,
+        entry_point: entryPoint,
+        funding_source: `PAY_WITH_${data.paymentSource.toUpperCase()}`,
+        ...userInputs,
       }),
     }).then(({ body }) => body.order_id);
   };
 };
 
 export const getHostedButtonOnApprove = ({
+  buttonType,
   hostedButtonId,
   merchantId,
 }: HostedButtonsProps): OnApprove => {
   return (data) => {
     return request({
-      url: `${apiUrl}/orders/${data.orderID}/capture`,
-      headers,
+      url: `${nocodeApiUrl}/capture-order`,
+      headers: getHeaders(),
       method: "POST",
       body: JSON.stringify({
+        button_type: buttonType,
         hosted_button_id: hostedButtonId,
         id: data.orderID,
         merchant_id: merchantId,
+        entry_point: entryPoint,
       }),
     }).then(noop);
   };
 };
 
+const renderForm = (selector, html, htmlScript) => {
+  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,
@@ -107,16 +147,26 @@ export const getHostedButtonsComponent = (): HostedButtonsComponent => {
     const Buttons = getButtonsComponent();
     const render = (selector) => {
       getHostedButtonDetails({ hostedButtonId }).then(
-        ({ merchantId, style }) => {
+        ({ buttonType, style, html, htmlScript, merchantId }) => {
+          renderForm(selector, html, htmlScript);
+
           // $FlowFixMe
           Buttons({
             style,
             hostedButtonId,
+            onInit(data, actions) {
+              window.__pp_form_fields?.onInit?.(data, actions);
+            },
+            onClick(data, actions) {
+              window.__pp_form_fields?.onClick?.(data, actions);
+            },
             createOrder: getHostedButtonCreateOrder({
+              buttonType,
               hostedButtonId,
               merchantId,
             }),
             onApprove: getHostedButtonOnApprove({
+              buttonType,
               hostedButtonId,
               merchantId,
             }),

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

@@ -24,6 +24,7 @@ vi.mock("@paypal/sdk-client/src", async () => {
   return {
     ...(await vi.importActual("@paypal/sdk-client/src")),
     getSDKHost: () => "example.com",
+    getClientID: () => "client_id_123",
   };
 });
 
@@ -36,34 +37,36 @@ vi.mock("../zoid/buttons", async () => {
 
 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",
-      },
-    ],
+    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();
+    const Buttons = vi.fn(() => ({ render: vi.fn() }));
     // $FlowIssue
     getButtonsComponent.mockImplementationOnce(() => Buttons);
     const HostedButtons = getHostedButtonsComponent();
@@ -73,7 +76,7 @@ describe("HostedButtons", () => {
     );
     HostedButtons({
       hostedButtonId: "B1234567890",
-    }).render("");
+    }).render("#example");
     expect(Buttons).toHaveBeenCalled();
     expect.assertions(1);
   });
@@ -114,7 +117,7 @@ describe("HostedButtons", () => {
         },
       })
     );
-    const orderID = await createOrder();
+    const orderID = await createOrder({ paymentSource: "paypal" });
     expect(orderID).toBe("EC-1234567890");
     expect.assertions(1);
   });
@@ -134,6 +137,7 @@ describe("HostedButtons", () => {
           hosted_button_id: "B1234567890",
           id: "EC-1234567890",
           merchant_id: "M1234567890",
+          entry_point: "SDK",
         }),
       })
     );